html.phone{width:100%;height:100%;overflow:hidden}.phone body{position:fixed;top:var(--phone-y,0);left:var(--phone-x,0);width:100%;height:var(--phone-h,100dvh);min-height:0;overflow:hidden;display:flex;flex-direction:column;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);overscroll-behavior:none}
.phone .topbar{flex:0 0 50px;min-height:50px;padding:3px 5px;gap:3px;flex-wrap:nowrap}.phone .brand{font-size:11px;letter-spacing:0;gap:2px}.phone .brand small,.phone .brand-icon{display:none}.phone .topbar nav{gap:3px;flex:1;justify-content:flex-end;font-size:11px}.phone .topbar nav a,.phone .topbar nav button{min-height:44px;display:flex;align-items:center;padding:4px;font-size:11px;white-space:normal;line-height:1.15;text-align:center}
.phone main{min-height:0;flex:1;max-width:none;width:100%;padding:4px;display:flex;flex-direction:column;overflow:hidden}.phone .welcome,.phone main>footer{display:none}.phone .workspace,.phone body.playing .workspace{margin:0;min-height:0;flex:1;gap:4px;width:100%}
.phone .workspace{display:flex;flex-direction:column;overflow:auto;overscroll-behavior:contain}.phone .sidebar{display:contents}.phone .card{padding:12px;border-radius:8px;flex-shrink:0}.phone .card h2{font-size:23px;margin:5px 0 10px}.phone .board-section{height:430px;flex-shrink:0;order:2;display:flex;flex-direction:column;min-height:0;border-radius:8px}.phone #setup,.phone #lobby{order:1}.phone .phone-tools{order:4;display:flex;gap:3px;min-height:44px}.phone .phone-tools button{flex:1;font-size:12px;min-height:44px;padding:4px}
.phone-game .workspace{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(140px,1fr) 250px 44px;overflow:hidden;align-items:stretch}
.phone-game .board-section{grid-row:1;height:100%;order:0}.phone-game #gameControls,.phone-game #playgroundControls{grid-row:2;order:0;height:100%;min-height:0;position:static!important;overflow:hidden;padding:7px;display:flex;flex-direction:column;gap:3px;box-shadow:none;border-width:1px}
.phone-game .phone-tools{grid-row:3;order:0}.phone-game .sidebar>#playersPanel,.phone-game .sidebar>#logPanel,.phone-game .sidebar>#lobby{display:none!important}
.phone .board-top{padding:3px 6px;min-height:27px;flex:0 0 auto;gap:4px}.phone .board-top .eyebrow{display:none}.phone .board-top h2{font:bold 12px/1.15 'Segoe UI',Arial;margin:0}.phone .pill{font-size:10px;padding:3px 6px}
.phone .phone-camera{flex:0 0 64px;padding:0 3px}.phone .phone-camera>div{display:flex;gap:3px}.phone .phone-camera button{flex:1;min-height:44px;padding:3px;font:600 12px/1.1 'Segoe UI',Arial}.phone #phoneCameraStatus{font-size:11px;line-height:18px;text-align:center;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.phone .board-window{min-height:0;flex:1;margin:0 3px;border:2px solid #b38a5d;border-radius:6px;box-shadow:none;overflow:hidden}.phone #board{width:100%;height:100%;max-height:none;display:block;touch-action:none}
.phone .board-footer{flex:0 0 auto;min-height:0;display:flex;flex-direction:column;align-items:stretch;gap:1px;padding:3px 5px;font-size:11px}.phone .board-footer>span{max-width:none;max-height:28px;line-height:14px;overflow:auto}.phone .board-footer>div{display:flex;gap:3px;margin:0}.phone .board-footer button{flex:1;min-height:44px;padding:3px;font-size:12px}.phone #replayBtn:disabled{display:none}
.phone #gameControls .turn-heading{position:absolute;right:7px;top:5px;float:none}.phone #gameControls{position:relative!important}.phone .turn-heading .eyebrow{display:none}.phone .die{width:44px;height:44px;font-size:32px}.phone #turnName{font:bold 18px/1.2 Georgia;margin:1px 52px 0 0;min-height:23px;flex:0 0 auto}
.phone #turnInstruction{font:13px/1.25 'Segoe UI',Arial;margin:0 47px 3px 0;max-height:33px;overflow:auto;flex:0 0 auto}.phone #actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3px;flex:0 0 auto}.phone #actions>.primary:first-child{grid-column:1/-1}.phone #actions button{min-height:44px;padding:4px;font:600 12px/1.15 'Segoe UI',Arial;text-align:center}.phone #actions>button:last-child:nth-child(even){grid-column:auto}.phone #actionHelp{font:11px/1.25 'Segoe UI',Arial;margin:0;min-height:0;overflow:auto;flex:1}.phone #tutorialHelp{margin:0;padding:4px;font:11px/1.25 'Segoe UI',Arial;min-height:0;max-height:65px;overflow:auto}.phone #rematchBtn{min-height:44px;margin:0}
.phone #playgroundControls{overflow:auto!important}.phone #playgroundControls>.eyebrow{display:none}.phone #playgroundControls h2{font-size:18px;margin:0}.phone #playgroundControls p{font-size:12px;margin:0 0 4px}.phone #playgroundControls .full{min-height:44px;margin-bottom:3px}.phone #playgroundControls label{margin:2px 0}.phone .phone-ring{fill:none;stroke:#802516;stroke-width:4;pointer-events:none}.phone .phone-active-mouse{filter:drop-shadow(0 0 3px #fff8d4)}.phone .track-tile .track-label{font-size:12px}.phone .track-tile text:nth-of-type(1){font-size:10px}
.phone dialog{position:fixed;left:var(--phone-x,0);top:var(--phone-y,0);margin:5px;width:calc(100% - 10px);max-width:none;max-height:calc(var(--phone-h,100dvh) - 10px);padding:10px;border-radius:9px;overflow:auto;overscroll-behavior:contain}.phone .dialog-title{position:sticky;top:-10px;background:#fffdf5;z-index:5;align-items:center;gap:5px;padding:3px 0;border-bottom:1px solid #ccd3c7;margin-bottom:5px}.phone .dialog-title h2{font-size:21px;margin:0}.phone .dialog-title button{min-width:44px;min-height:44px}.phone #settingsDialog form{margin:0}.phone #settingsDialog form>button:last-child{position:sticky;bottom:-10px;margin:0}.phone #phonePanel[open]{height:calc(var(--phone-h,100dvh) - 10px);display:flex;flex-direction:column;overflow:hidden}.phone #phonePanelBody{min-height:0;overflow:auto;flex:1}.phone #phonePanelBody .card{border:0;box-shadow:none;padding:4px}.phone #phonePanelBody #players{display:block}.phone #phonePanelBody #eventLog{max-height:none}.phone #phonePanelBody .view-controls,.phone #phonePanelBody .legend{padding:4px;gap:6px}.phone #phonePanelBody button{min-height:44px;font-size:12px}.phone #phonePanelBody .view-controls label{min-height:44px;display:flex;align-items:center}
.phone .toast{bottom:5px;max-height:30%;overflow:auto;margin:0;padding:8px 12px;font-size:12px}.phone button:disabled{opacity:1}
.phone-landscape.phone-game .workspace{grid-template-columns:minmax(0,1fr) minmax(285px,38%);grid-template-rows:minmax(0,1fr) 44px}.phone-landscape.phone-game .board-section{grid-column:1;grid-row:1/-1}.phone-landscape.phone-game #gameControls,.phone-landscape.phone-game #playgroundControls{grid-column:2;grid-row:1}.phone-landscape.phone-game .phone-tools{grid-column:2;grid-row:2}.phone-landscape .topbar nav{max-width:450px;margin-left:auto}.phone-landscape .board-top h2{font-size:11px}
@media(max-height:370px){.phone-landscape #turnName{font-size:15px;min-height:19px}.phone-landscape #turnInstruction{max-height:30px;font-size:12px}.phone-landscape #actionHelp{font-size:10px}.phone-landscape #tutorialHelp{max-height:40px}.phone-landscape .board-footer>span{max-height:14px}}
.phone .topbar{height:50px;max-height:50px;flex-direction:row;align-items:center}.phone-game:not(.phone-landscape) .workspace{grid-template-rows:minmax(140px,1fr) var(--phone-controls,200px) 44px}