/* Only activated by phone.js for small-screen coarse-pointer touch devices. */
body.phone{position:fixed;left:var(--phone-left,0);top:var(--phone-top,0);width:var(--phone-width,100%);height:var(--phone-height,100dvh);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);font-size:14px}
.phone .topbar{flex:none;height:48px;padding:2px 8px}.phone .brand{font-size:22px}.phone .brand>span{display:none}.phone nav{gap:1px}.phone nav button{min-height:44px;padding:6px 8px;font-size:12px}.phone main{width:100%;flex:1;min-height:0;padding:6px;overflow:auto;overscroll-behavior:contain}.phone .intro{margin:4px 0 10px}.phone .intro h1{font-size:36px;letter-spacing:-1px}.phone .intro .eyebrow,.phone .edition{display:none}.phone .intro p{margin:3px 0}.phone footer{display:none}.phone .setup{padding:12px}.phone .setupGrid{grid-template-columns:1fr;gap:12px}.phone .setupHeading{display:block}.phone .seatRow{grid-template-columns:1fr 1fr}.phone .joinBox{padding:12px}.phone h2{font-size:22px}.phone button,.phone select,.phone input{min-height:44px}.phone input,.phone select{font-size:16px}.phone button:hover:not(:disabled){transform:none}.phone button:disabled{opacity:1;color:#686f69;background:#e8e9e0;border-color:#c9cdc2}
.phone.phone-playing main{overflow:hidden;display:flex;flex-direction:column;gap:4px}.phone-playing .intro{display:none}.phone #notice{padding:4px 8px;margin:0;font-size:12px;max-height:92px;overflow:auto;flex:none}.phone #table{flex:1;min-height:0;display:flex;flex-direction:column}.phone .tableLayout{flex:1;min-height:0;display:grid;grid-template-columns:1fr;grid-template-rows:minmax(100px,1fr) minmax(180px,41%);gap:6px}.phone .boardColumn{display:flex;flex-direction:column;max-width:none;margin:0;min-height:0;overflow:hidden;border-radius:10px;border:1px solid #b5bcae}.phone .boardCaption{display:none}
#phoneZoom{display:grid;grid-template-columns:1fr 1fr 1fr;gap:3px;background:#f6f3e8;padding:3px;flex:none}#phoneZoom button{padding:3px 5px;font-size:12px;line-height:1.1;min-width:0}#phoneFollow{grid-column:span 2}#phoneZoomState{align-self:center;text-align:center;font-size:11px;color:#203c34;font-weight:700}#phoneViewport{position:relative;flex:1;min-height:0;overflow:hidden;background:#d5d6c8;touch-action:none;overscroll-behavior:contain;user-select:none;-webkit-user-select:none}.phone .woodFrame{position:absolute;top:0;left:0;max-width:none;aspect-ratio:auto;padding:0;border:0;border-radius:0;box-shadow:none;will-change:transform}.phone .board{border-radius:0;box-shadow:none}.phone .centerpiece{top:28%;height:43%}.phone .boardTitle{font-size:44px}.phone .centerpiece .card #cardNumber{font-size:65px}.phone .centerpiece .card #cardNumber.word{font-size:32px}.phone .card p{font-size:12px}.phone .deckInfo{font-size:11px}.phone .phoneLatest .halo{opacity:1;stroke:#60180e;stroke-width:5;stroke-dasharray:4 3}.phoneDestination{cursor:pointer}
.phone .turnPanel{min-width:0;min-height:0;overflow:hidden;padding:6px 8px;display:flex;flex-direction:column;border-radius:9px;gap:3px}.phone .turnPanel>.row:first-child{position:absolute;right:16px;pointer-events:none}.phone .turnPanel>.row:first-child .eyebrow{display:none}.phone .connection{font-size:10px;max-width:130px;overflow:hidden}.phone #turnTitle{font:700 15px/1.2 system-ui;margin:0 130px 0 0;min-height:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.phone #turnStatus{font-size:12px;line-height:1.25;min-height:0;margin:0;max-height:32px;overflow:auto;flex-shrink:0}#phoneCard{display:flex;gap:8px;align-items:center;background:#fff3d2;border:1px solid #b59c60;border-radius:5px;padding:3px 6px;min-height:34px;flex:none}#phoneCardNumber{font-size:16px;white-space:nowrap;color:#812238}#phoneCardText{font-size:12px;line-height:1.2}.phone #moveControls{display:flex;flex-direction:column;min-height:0;flex:1;gap:3px}.phone .pawnChoices{gap:3px;margin:0;flex:none;flex-wrap:nowrap}.phone .pawnChoices button{min-width:44px;padding:4px 8px;font-size:12px}.phone #moveControls>label{font-size:0;margin:0;flex:none}.phone #actionType{font-size:13px;min-height:36px;height:36px;margin:0;padding:3px 6px}#phoneChoiceHelp{font-size:11px;line-height:1.2;margin:0;max-height:28px;overflow:auto;flex:none}.phone .actions{flex:1;min-height:44px;max-height:none;margin:0;gap:3px;overscroll-behavior:contain}.phone .actions button{font-size:12px;padding:4px 8px;min-height:44px}.phone .actions button small{font-size:11px}.phone #preview{padding:4px 6px;flex:none;max-height:106px;overflow:auto}.phone #preview p{font-size:12px;line-height:1.2;margin:0 0 3px}.phone #preview .row{gap:4px}.phone #preview button{padding:5px 10px;font-size:13px}.phone #victory{overflow:auto;min-height:0}.phone .trophy{font-size:25px}.phone #victory p{margin:0}
.phone dialog{padding:12px;max-height:calc(var(--phone-height,100dvh) - 16px);width:calc(100% - 16px);overscroll-behavior:contain}.phone dialog form>.row:first-child,.phoneDialogHead{position:sticky;top:-12px;z-index:5;background:#fbfaf3;display:flex;align-items:center;justify-content:space-between;gap:8px;border-bottom:1px solid #bdc7b4;padding:4px 0}.phone dialog h2{font-size:20px;margin:6px 0}.phone dialog form>button:last-child{position:sticky;bottom:-12px;min-height:44px;box-shadow:0 0 0 5px #fbfaf3}.phone #scoreboard{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin:12px 0}.phone #turnOrder{display:block;font-size:12px;margin:6px 0}.phone .score{padding:6px;gap:6px}.phone .score small{font-size:11px}.phone .scoreName{font-size:13px}.phone .recent{margin:8px 0;padding:6px 0}.phone .recent ol{max-height:none}.phone .footControls{margin-top:8px;padding-top:8px}#phoneMoveList{display:grid;gap:6px;margin-top:8px}#phoneMoveList button{text-align:left}
@media (orientation:landscape){.phone .topbar{height:44px}.phone .tableLayout{grid-template-columns:minmax(0,1fr) 320px;grid-template-rows:minmax(0,1fr)}.phone #phoneZoom{grid-template-columns:repeat(3,1fr)}.phone .turnPanel{padding:4px 6px}.phone #turnStatus{max-height:30px}.phone #phoneChoiceHelp{max-height:26px}.phone #phoneCard{min-height:32px}.phone #phoneCardNumber{font-size:15px}.phone #preview{max-height:90px}.phone #turnTitle{margin-right:115px}.phone .connection{max-width:112px}}
/* Short browser areas keep primary decisions available; the move list scrolls internally. */
@media (max-height:650px) and (orientation:portrait){.phone .tableLayout{grid-template-rows:minmax(100px,1fr) minmax(245px,52%)}.phone #phoneZoom{grid-template-columns:repeat(3,1fr)}.phone #turnStatus{max-height:16px}}
.phone .tableLayout{align-items:stretch}
.phone #moveControls:has(#preview:not([hidden]))>.actions,.phone #moveControls:has(#preview:not([hidden]))>label{display:none}
.phone #moveControls:has(#preview:not([hidden])) #phoneChoiceHelp{display:none}
.phone #moveControls:has(#preview:not([hidden])) #preview{margin-top:auto}
.phone #turnStatus.phoneDuplicateStatus{display:none}