/* The dialog is opened only for manual marking on phones. */
#phoneMarkingView{position:fixed;inset:0;width:100%;height:100%;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;border-radius:0;background:#071923;color:#fff;overflow:hidden;}
#phoneMarkingView::backdrop{background:#071923;}
#phoneMarkingView[open]{display:flex;flex-direction:column;}
#phoneMarkingView [hidden]{display:none !important;}
body.phone-marking-open{overflow:hidden;overscroll-behavior:none;}
.phone-marking-bar{display:flex;align-items:center;gap:10px;flex:none;padding:6px max(10px,env(safe-area-inset-right)) 6px max(10px,env(safe-area-inset-left));background:#102a3e;}
.phone-marking-bar button,.phone-marking-bar select{appearance:none;min-width:48px;min-height:44px;border:1px solid #7693a6;border-radius:7px;padding:8px 12px;background:#102a3e;color:#fff;font:700 14px/1.2 Arial,sans-serif;touch-action:manipulation;}
.phone-marking-bar button:disabled{opacity:.45;}
.phone-marking-bar button:focus-visible,.phone-marking-bar select:focus-visible{outline:3px solid #7de0f0;outline-offset:1px;}
.phone-marking-top{padding-top:max(6px,env(safe-area-inset-top));}
.phone-marking-readout{flex:1;min-width:0;line-height:1.25;}
#phoneMarkingTime{font-size:18px;font-weight:700;font-variant-numeric:tabular-nums;}
#phoneMarkingHint{display:block;font-size:12px;color:#d0e5f0;}
.phone-marking-stage{position:relative;flex:1;min-height:0;display:flex;}
#phoneMarkingView #videoContainer{flex:1;width:100%;height:100%;min-height:0;max-height:none;aspect-ratio:auto;border:0;border-radius:0;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;}
#phoneMarkingView #sourceVideo{pointer-events:none;object-fit:contain;}
#phoneMarkingView #videoInfo{display:none;}
#phoneMarkingView .video-action-ring{inset:3px;border-width:6px;border-radius:0;box-shadow:none;}
#phoneMarkingView #videoContainer[data-phone-feedback="stroke"] .video-action-ring{border-color:#73e3ed;}
#phoneMarkingView #videoContainer[data-phone-feedback="wall"] .video-action-ring{border-color:#ffd16b;}
#phoneMarkingFeedback{position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:45;background:#102a3e;color:#fff;padding:6px 14px;border-radius:6px;font-size:16px;font-weight:700;pointer-events:none;white-space:nowrap;}
.phone-marking-bottom{padding-bottom:max(6px,env(safe-area-inset-bottom));}
#phoneMarkingSpeed{flex:0 0 70px;width:70px;min-width:70px;max-width:70px;}
#phoneMarkingWall{flex:1;min-width:128px;white-space:nowrap;background:#ffd16b;border-color:#ffd16b;color:#102a3e;}
.phone-marking-gate{position:absolute;inset:0;z-index:50;background:#071923;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:18px;}
.phone-marking-gate svg{width:62px;height:62px;color:#73e3ed;}
.phone-marking-gate h2{color:#fff;font-size:23px;margin:0;}
.phone-marking-gate p{color:#d0e5f0;font-size:15px;line-height:1.5;margin:0;}
.phone-marking-gate button{min-height:48px;min-width:180px;padding:12px 20px;border:1px solid #73e3ed;border-radius:7px;background:#73e3ed;color:#102a3e;font:700 16px/1.2 Arial,sans-serif;}
.phone-marking-gate .phone-upright{background:transparent;border-color:#7693a6;color:#fff;font-size:14px;}
.phone-marking-seek{display:flex;align-items:center;gap:10px;background:#102a3e;padding:0 max(12px,env(safe-area-inset-right)) 6px max(12px,env(safe-area-inset-left));}
.phone-marking-seek label{font-size:12px;color:#d0e5f0;}
#phoneMarkingSeek{flex:1;min-width:0;min-height:44px;accent-color:#73e3ed;}
#openPhoneMarking{margin-top:12px;min-height:48px;width:100%;}
.phone-marking-prep{font-size:15px;}
#desktopManualStrokePrep[hidden],#phoneManualStrokePrep[hidden]{display:none !important;}
@media (max-height:360px) and (orientation:landscape){
  .phone-marking-bar{padding-top:3px;padding-bottom:3px;gap:6px;}
  .phone-marking-gate{gap:8px;padding:10px;}
  .phone-marking-gate svg{display:none;}
  .phone-marking-gate h2{font-size:20px;}
}