/* Enhanced touch-phone dashboard. The original desktop stylesheet is unchanged. */
html.gotcha-phone{height:100%;overflow:hidden;overscroll-behavior:none}
html.gotcha-phone body{height:var(--gotcha-visible-height,100dvh);min-height:0;overflow:hidden;display:grid;grid-template-rows:calc(50px + env(safe-area-inset-top)) minmax(0,1fr);overscroll-behavior:none}
html.gotcha-phone .top{width:100%;max-width:none;min-width:0;padding:env(safe-area-inset-top) max(6px,env(safe-area-inset-right)) 0 max(8px,env(safe-area-inset-left));gap:4px}
html.gotcha-phone .brand{font-size:27px;letter-spacing:-1.5px;white-space:nowrap}
html.gotcha-phone .brand small{display:none}
html.gotcha-phone nav{gap:2px;flex-shrink:0}
html.gotcha-phone nav button{min-height:44px;min-width:44px;padding:5px 8px;font-size:12px;line-height:1.15;border:1px solid #69877a;background:#23413d}
html.gotcha-phone .phone-label{display:inline!important}
html.gotcha-phone .desktop-symbol{display:none}
html.gotcha-phone main{display:grid;grid-template-rows:17px 49px minmax(0,1fr) 44px;gap:4px;width:100%;height:100%;margin:0;max-width:none;min-width:0;min-height:0;padding:3px max(4px,env(safe-area-inset-right)) max(4px,env(safe-area-inset-bottom)) max(4px,env(safe-area-inset-left));overflow:hidden}
html.gotcha-phone .headline{display:block;margin:0;min-width:0;line-height:16px;overflow:hidden}
html.gotcha-phone .headline>div{display:none}
html.gotcha-phone #connection{display:block;font-size:10px;line-height:16px;max-width:none;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html.gotcha-phone .roster{display:flex;min-width:0;min-height:0;gap:4px;margin:0}
html.gotcha-phone .player{position:relative;min-width:0;min-height:0;padding:3px 5px;gap:4px;line-height:1.15;border-radius:7px}
html.gotcha-phone .player>div{min-width:0}
html.gotcha-phone .player .badge{font-size:19px;flex-shrink:0;line-height:1.1;text-align:center}
html.gotcha-phone .player.active .badge:after{content:'TURN';display:block;font:bold 8px/1.2 system-ui;color:#ffe19a;text-shadow:none;letter-spacing:.3px;margin-top:2px}
html.gotcha-phone .player strong{font-size:12px;line-height:1.2}
html.gotcha-phone .player small{display:block;font-size:10px;line-height:1.2;margin-top:2px;color:#e0e7dc}
html.gotcha-phone .player .home-count,html.gotcha-phone .player .player-type{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.gotcha-phone .player .roster-separator{display:none}
html.gotcha-phone .table-layout{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(110px,1fr) minmax(0,auto);gap:5px;min-width:0;min-height:0;align-items:stretch}
html.gotcha-phone .play-area{width:100%;height:100%;min-width:0;min-height:0;max-width:none;margin:0;overflow:hidden}
html.gotcha-phone .board-frame{width:100%;height:100%;min-width:0;min-height:0;max-width:none;margin:0;padding:4px;border-width:2px;border-radius:10px;display:grid;grid-template-rows:44px minmax(0,1fr);gap:4px;overflow:hidden;box-shadow:inset 0 1px 2px #d6a469,inset 0 -2px 2px #362a21}
html.gotcha-phone #phoneCameraControls{display:grid;grid-template-columns:minmax(0,1fr) 39px minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:3px;min-width:0;align-items:stretch}
html.gotcha-phone #phoneCameraControls button{min-height:44px;min-width:0;border-radius:6px;padding:2px 3px;font-size:11px;line-height:1.1;background:#203d39;color:#fff5d7;border-color:#b9bc94;transform:none}
html.gotcha-phone #phoneCameraControls button[aria-pressed=true]{background:#f1cc7e;color:#1f342d;border-color:#fff4c7;box-shadow:inset 0 0 0 1px #473b20}
html.gotcha-phone #phoneZoomValue{align-self:center;text-align:center;font-size:11px;font-weight:800;color:#fff5d7;text-shadow:0 1px 2px #28190e}
html.gotcha-phone #phoneBoardViewport{display:block!important;position:relative;min-width:0;min-height:0;width:100%;height:100%;overflow:hidden;border-radius:6px;touch-action:none;overscroll-behavior:none;background:#e9d5ac}
html.gotcha-phone #board{display:block;width:100%;height:100%;border-radius:0;box-shadow:none;touch-action:none;user-select:none;-webkit-user-select:none}
html.gotcha-phone #board .track-number{font-size:13px;font-weight:800;fill:#665439;stroke:#fff3d5;stroke-width:.6px;paint-order:stroke}
html.gotcha-phone #board .pawn.legal .halo{stroke:#36544a;stroke-width:3}
html.gotcha-phone #board .pawn.selected .halo{stroke:#253a30;stroke-width:6;stroke-dasharray:5 3}
html.gotcha-phone #board .dest{fill:#ffe27ea8;stroke:#604314;stroke-width:3.5}
html.gotcha-phone #enlarge{display:none}
html.gotcha-phone #toast{top:45%;font-size:36px;z-index:2}
html.gotcha-phone .console{display:flex;flex-direction:column;position:static;bottom:auto;z-index:auto;width:100%;min-width:0;min-height:0;max-height:calc(var(--gotcha-visible-height,100dvh) - 298px);padding:5px;border-radius:9px;overflow:hidden;overscroll-behavior:contain;touch-action:pan-y;box-shadow:none}
html.gotcha-phone .card-top,html.gotcha-phone .aside-note,html.gotcha-phone #latest{display:none}
html.gotcha-phone .movement-card{display:flex;flex-shrink:0;align-items:center;gap:7px;text-align:left;min-height:58px;padding:4px 6px;border-radius:6px;box-shadow:none}
html.gotcha-phone .movement-card svg{display:block;width:43px;height:43px;flex-shrink:0;margin:0}
html.gotcha-phone .movement-card>div{flex:1;min-width:0}
html.gotcha-phone .movement-card #cardKind{display:block;font-size:8px;line-height:1.1;letter-spacing:.4px}
html.gotcha-phone .movement-card h2{font-size:21px;line-height:1.05;margin:2px 0;font-weight:bold}
html.gotcha-phone .movement-card p{font-size:11px;line-height:1.2;margin:0}
html.gotcha-phone #turnPrompt{flex-shrink:0;font-size:12px;line-height:1.25;min-height:0;margin:5px 0;font-weight:750}
html.gotcha-phone .pawn-buttons{display:flex;flex-shrink:0;gap:4px;margin:4px 0}
html.gotcha-phone .pawn-buttons button{min-width:0;min-height:44px;font-size:12px;padding:4px;line-height:1.1}
html.gotcha-phone .choice-wrap{display:flex;flex-direction:column;flex:1;gap:0;min-width:0;min-height:44px}
html.gotcha-phone #actionChoice{display:block;flex-shrink:0;width:100%;min-width:0;min-height:44px;font-size:12px;padding:6px}
html.gotcha-phone #preview{flex:1;min-height:0;max-height:54px;overflow:auto;overscroll-behavior:contain;touch-action:pan-y;margin:3px 0;font-size:11px;line-height:1.2;color:#d1dfd1}
html.gotcha-phone .console:has(#draw:not([hidden])) .choice-wrap,html.gotcha-phone .console:has(#pass:not([hidden])) .choice-wrap,html.gotcha-phone .console:has(#pass:not([hidden])) .pawn-buttons{display:none}
html.gotcha-phone .controls{display:flex;flex-shrink:0;gap:5px;margin:5px 0 0;min-width:0}
html.gotcha-phone .controls button{flex:1;min-width:0;min-height:44px;font-size:12px;line-height:1.15;padding:5px;box-shadow:none}
html.gotcha-phone #draw span{display:none}
html.gotcha-phone .console:has(#draw:not([hidden])) #latest{display:block;flex-shrink:0;font-size:11px;line-height:1.2;max-height:40px;overflow:auto;touch-action:pan-y;overscroll-behavior:contain;margin:5px 0 0;padding:4px 0 0;color:#d1dfd1}
html.gotcha-phone .below{display:flex;align-items:stretch;gap:4px;margin:0;min-width:0;min-height:0;height:44px;font-size:11px;line-height:1.1}
html.gotcha-phone .below>details{flex:1;min-width:0}
html.gotcha-phone .below summary{height:44px;min-width:0;display:flex;align-items:center;justify-content:center;padding:4px;text-align:center;border:1px solid #69877a;border-radius:6px;background:#23413d;list-style:none;font-size:0;cursor:pointer}
html.gotcha-phone .below summary::-webkit-details-marker{display:none}
html.gotcha-phone .below details:first-child summary:before{content:'History';font-size:11px}
html.gotcha-phone .below details:nth-child(2) summary:before{content:'Statistics';font-size:11px}
html.gotcha-phone .below details[open] summary{background:#f1cc7e;color:#1f342d}
html.gotcha-phone .below #history,html.gotcha-phone .below #stats{position:fixed;z-index:15;left:max(8px,env(safe-area-inset-left));right:max(8px,env(safe-area-inset-right));bottom:calc(53px + env(safe-area-inset-bottom));max-height:calc(var(--gotcha-visible-height,100dvh) - 120px);overflow:auto;overscroll-behavior:contain;touch-action:pan-y;padding:16px 16px 16px 32px;margin:0;border:1px solid #bdd0aa;border-radius:9px;background:#173634;color:#fff1d3;font-size:13px;line-height:1.5;box-shadow:0 -5px 30px #0008}
html.gotcha-phone .below #stats{padding:16px}
html.gotcha-phone .below>button,html.gotcha-phone .below>a{flex:1;min-height:44px;min-width:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:4px;font-size:11px;line-height:1.1;border:1px solid #69877a;border-radius:6px;background:#23413d;color:#fff1d3;text-decoration:none}
html.gotcha-phone dialog{position:fixed;top:calc(8px + env(safe-area-inset-top));bottom:auto;left:0;right:0;margin:0 auto;width:min(650px,calc(100vw - 12px));max-height:calc(var(--gotcha-visible-height,100dvh) - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom));padding:18px;overflow:auto;overscroll-behavior:contain;touch-action:pan-y;scrollbar-width:thin;border-radius:12px}
html.gotcha-phone dialog button,html.gotcha-phone dialog input,html.gotcha-phone dialog select{min-height:44px}
html.gotcha-phone dialog .close{min-width:44px;min-height:44px}
html.gotcha-phone dialog h2{font-size:26px}
html.gotcha-phone .phone-view-help{display:block!important;font-size:13px;line-height:1.45}
html.gotcha-phone dialog .check input{min-height:24px;width:24px;height:24px;flex-shrink:0}
html.gotcha-phone dialog .seat-row{grid-template-columns:1fr 1fr}
html.gotcha-phone dialog .seat-row input,html.gotcha-phone dialog .seat-row .level{grid-column:1/3}
html.gotcha-phone button:hover:not(:disabled){transform:none}
html.gotcha-phone button:disabled,html.gotcha-phone select:disabled,html.gotcha-phone #phoneCameraControls button:disabled{opacity:1;background:#2c403d;color:#cbd3c8;-webkit-text-fill-color:#cbd3c8;border-color:#77867c;border-style:dashed;box-shadow:none;text-shadow:none;cursor:default}
html.gotcha-phone .enlarged .top{display:flex}
html.gotcha-phone .enlarged .headline{display:block}
html.gotcha-phone .enlarged .below{display:flex}

@media(orientation:landscape){
 html.gotcha-phone main{grid-template-columns:minmax(0,1fr) minmax(270px,34%);grid-template-rows:49px minmax(0,1fr) 44px;gap:4px}
 html.gotcha-phone .headline{position:fixed;z-index:1;top:calc(17px + env(safe-area-inset-top));left:145px;right:206px;pointer-events:none}
 html.gotcha-phone #connection{text-align:center}
 html.gotcha-phone .roster{grid-column:1;grid-row:1}
 html.gotcha-phone .table-layout{display:contents}
 html.gotcha-phone .play-area{grid-column:1;grid-row:2}
 html.gotcha-phone .console{grid-column:2;grid-row:1/3;max-height:none;height:100%}
 html.gotcha-phone .below{grid-column:1/3;grid-row:3}
 html.gotcha-phone .console{position:relative;padding:4px}
 html.gotcha-phone .card-top{display:block;position:absolute;top:8px;right:12px;margin:0;pointer-events:none}
 html.gotcha-phone .card-top .eyebrow{display:none}
 html.gotcha-phone #deckCount{font-size:9px;color:#715738}
 html.gotcha-phone .movement-card{min-height:50px;padding:3px 6px;gap:0}
 html.gotcha-phone .movement-card svg,html.gotcha-phone .movement-card #cardKind{display:none}
 html.gotcha-phone .movement-card h2{font-size:19px;line-height:1.05;margin:0;padding-right:68px}
 html.gotcha-phone .movement-card p{font-size:11px;line-height:1.1;margin-top:2px}
 html.gotcha-phone #turnPrompt{font-size:12px;margin:3px 0}
 html.gotcha-phone .console:not(:has(#pass:not([hidden]))) #turnPrompt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 html.gotcha-phone .pawn-buttons{margin:2px 0}
 html.gotcha-phone .choice-wrap{min-height:74px}
 html.gotcha-phone #preview{min-height:24px}
 html.gotcha-phone .controls{margin-top:3px}
 html.gotcha-phone .below #history,html.gotcha-phone .below #stats{left:12px;right:12px;max-height:calc(var(--gotcha-visible-height,100dvh) - 113px)}
}

@media(max-width:350px){
 html.gotcha-phone .brand{font-size:25px}
 html.gotcha-phone nav button{padding:4px 6px;font-size:11px}
 html.gotcha-phone .player{padding:3px;gap:3px}
 html.gotcha-phone .player .badge{font-size:16px}
 html.gotcha-phone .player strong{font-size:11px}
 html.gotcha-phone .player small{font-size:9px}
 html.gotcha-phone .movement-card h2{font-size:19px}
 html.gotcha-phone #phoneCameraControls button{font-size:10px}
 html.gotcha-phone #phoneCameraControls{grid-template-columns:minmax(0,1fr) 36px minmax(0,1fr) minmax(0,1fr) minmax(0,1fr)}
}

/* Keep a useful camera window when browser chrome leaves a short portrait. */
@media(orientation:portrait) and (max-height:680px){
 html.gotcha-phone main{grid-template-rows:44px minmax(0,1fr) 44px}
 html.gotcha-phone .top .brand{align-self:start;margin-top:4px;font-size:25px}
 html.gotcha-phone .headline{position:fixed;top:calc(34px + env(safe-area-inset-top));left:8px;right:204px;height:12px;pointer-events:none}
 html.gotcha-phone #connection{font-size:9px;line-height:11px}
 html.gotcha-phone .player{padding:2px 4px}
 html.gotcha-phone .player strong{font-size:11px}
 html.gotcha-phone .player small{font-size:9px;line-height:1.1;margin-top:1px}
 html.gotcha-phone .console{position:relative;padding:4px;max-height:calc(var(--gotcha-visible-height,100dvh) - 260px)}
 html.gotcha-phone .card-top{display:block;position:absolute;top:8px;right:12px;margin:0;pointer-events:none}
 html.gotcha-phone .card-top .eyebrow{display:none}
 html.gotcha-phone #deckCount{font-size:9px;color:#715738}
 html.gotcha-phone .movement-card{min-height:50px;padding:3px 6px;gap:0}
 html.gotcha-phone .movement-card svg,html.gotcha-phone .movement-card #cardKind{display:none}
 html.gotcha-phone .movement-card h2{font-size:19px;line-height:1.05;margin:0;padding-right:68px}
 html.gotcha-phone .movement-card p{font-size:11px;line-height:1.1;margin-top:2px}
 html.gotcha-phone #turnPrompt{margin:3px 0}
 html.gotcha-phone .console:not(:has(#pass:not([hidden]))) #turnPrompt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 html.gotcha-phone .pawn-buttons{margin:2px 0}
 html.gotcha-phone #preview{max-height:40px}
 html.gotcha-phone .controls{margin-top:3px}
}