:root{
  --sc-bg:#0a2236;
  --sc-bg-deep:#071a2b;
  --sc-panel:rgba(7,26,43,.90);
  --sc-line:#315f78;
  --sc-line-hi:#8fb8c8;
  --sc-text:#d7e5ea;
  --sc-muted:#91aeb8;
  --sc-danger:#b66f70;
  --sc-good:#83a994;
  --sc-cell:48px;
  --sc-status-w:164px;
  --sc-panel-w:224px;
  --sc-gap:14px;
  --sc-serif:"Noto Serif KR","Noto Serif CJK KR","NanumMyeongjo","Batang","Georgia","Times New Roman",serif;
}

html,body{background:var(--sc-bg-deep);color:var(--sc-text)}
body{font-family:var(--sc-serif)!important;letter-spacing:.015em}
button,select,input{font-family:inherit}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,.cell:focus-visible{outline:3px solid var(--sc-line-hi)!important;outline-offset:3px}
.cell:focus-visible{z-index:9;outline-offset:-4px}

html.scBooting{background:var(--sc-bg-deep)}
html.scBooting body{visibility:hidden!important;overflow:hidden!important}
html.scBooting::before{content:"";visibility:visible;position:fixed;inset:0;z-index:2147483646;background:linear-gradient(90deg,transparent 49.8%,rgba(143,184,200,.2) 50%,transparent 50.2%),linear-gradient(180deg,#071a2b,#0a2236 54%,#071a2b)}
html.scBooting::after{content:"";display:none!important}

/* Shared Nordic pixel controls */
.btn,.entryBtn,.modeCard,.utilityBtn,.aiSelect,.netInput{
  border-radius:0!important;
  border-color:var(--sc-line)!important;
  background:rgba(10,34,54,.92)!important;
  color:var(--sc-text)!important;
  box-shadow:inset 0 0 0 1px rgba(143,184,200,.08)!important;
}
.btn:hover:not(:disabled),.entryBtn:hover:not(:disabled),.modeCard:hover:not(:disabled),.utilityBtn:hover{
  border-color:var(--sc-line-hi)!important;
  background:rgba(49,95,120,.64)!important;
  filter:none!important;
}
.btn.primary,.entryBtn.primary,.modeCard.primary,.utilityBtn.rulebookBtn{
  border-color:var(--sc-line-hi)!important;
  background:rgba(49,95,120,.62)!important;
}
.btn.danger,.entryBtn.danger,.onlineResignBtn{border-color:#835f67!important;background:rgba(76,42,54,.76)!important}

/* Main menu and every lobby sub-screen */
body.entryMode{
  min-height:100svh;
  background:var(--sc-bg-deep) url("./ui/menu/background.png") center/cover no-repeat fixed!important;
  overflow:hidden;
}
body.entryMode::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(7,26,43,.12),rgba(7,26,43,.32));
}
.entryHub{position:relative;z-index:1;padding:clamp(16px,3vw,34px)!important}
.entryShell{width:min(100%,900px)!important;min-height:min(760px,92svh);position:relative}
.entryTop{
  border:0!important;
  padding:0!important;
  display:block!important;
}
.entryBrand{display:flex;flex-direction:column;align-items:center;gap:12px;padding-top:clamp(8px,3vh,34px)}
.entryBrand h1{
  width:min(72vw,815px);
  aspect-ratio:815/128;
  margin:0!important;
  background:url("./ui/menu/title.png") center/contain no-repeat;
  color:transparent!important;
  font-size:1px!important;
  overflow:hidden;
}
.entryBrand::after{
  content:"";
  width:min(220px,28vw);
  aspect-ratio:280/16;
  background:url("./ui/menu/divider.png") center/contain no-repeat;
  opacity:.9;
}
.entryBrand p{display:none}
.entryUtility{position:fixed;top:max(18px,env(safe-area-inset-top));right:max(20px,env(safe-area-inset-right));z-index:4}
.entryUtility a{
  min-width:64px!important;
  min-height:42px!important;
  border:2px solid var(--sc-line)!important;
  border-radius:0!important;
  background:rgba(7,26,43,.76)!important;
  color:var(--sc-text)!important;
  font-size:14px!important;
}
.entryUtility a.primaryLink{display:none}
.entryPanel{
  width:min(390px,88vw);
  margin:clamp(28px,5vh,58px) auto 0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.entryView{animation:scPanelIn .16s steps(4,end)}
@keyframes scPanelIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.entryView h2{
  margin:0 0 12px!important;
  color:var(--sc-text)!important;
  font:700 21px/1.25 var(--sc-serif)!important;
  text-align:center;
  letter-spacing:.08em;
}
.entryDesc{margin:0 0 14px!important;text-align:center;color:var(--sc-muted)!important;font-size:13px!important}
.modeGrid{grid-template-columns:1fr!important;gap:9px!important}
.modeCard{
  position:relative;
  min-height:58px!important;
  padding:11px 15px!important;
  border-width:2px!important;
  align-items:center!important;
  justify-content:center!important;
  gap:3px!important;
  text-align:center!important;
}
.modeCard::before{content:"";position:absolute;left:12px;top:50%;width:5px;height:5px;border:1px solid var(--sc-line-hi);transform:translateY(-50%) rotate(45deg);opacity:.58}
.modeCard strong{font-size:17px!important;color:var(--sc-text)!important;letter-spacing:.04em}
.modeCard span{font-size:12px!important;color:var(--sc-muted)!important}
.visualHomeMenu .modeCard span{display:none}
.visualHomeMenu .modeCard{min-height:54px!important}
.visualUpdatesView{padding:4px 0}
.visualVersionBadge{margin:18px 0 0;padding:13px;border-block:1px solid var(--sc-line-hi);color:var(--sc-text);font-size:15px;text-align:center;letter-spacing:.04em}
.visualUpdateMessage{min-height:112px;margin:0;padding:26px 16px;color:var(--sc-muted);font-size:14px;line-height:1.8;text-align:center;word-break:keep-all}
.entryBack{display:block;margin:14px auto 0!important;color:var(--sc-line-hi)!important;font-size:13px}
.entryStatus,.netStatus{
  border-radius:0!important;
  border-color:var(--sc-line)!important;
  background:rgba(7,26,43,.82)!important;
  color:var(--sc-text)!important;
}
.entryCode,.netCode{color:var(--sc-text)!important;text-shadow:0 0 14px rgba(143,184,200,.24)}
.entryCodeInput,.netInput{border-width:2px!important;text-align:center}
.entryActions{grid-template-columns:1fr 1fr!important}

/* Desktop play surface */
body:not(.entryMode){overflow:hidden;background:radial-gradient(circle at 50% 8%,#17384d 0,var(--sc-bg) 38%,var(--sc-bg-deep) 100%)!important}
body:not(.entryMode) .app{
  width:100vw!important;
  max-width:none!important;
  height:100dvh;
  margin:0!important;
  padding:10px 12px!important;
  display:grid!important;
  grid-template-columns:var(--sc-status-w) max-content var(--sc-panel-w)!important;
  grid-template-rows:1fr!important;
  gap:var(--sc-gap)!important;
  justify-content:center;
  align-items:center!important;
}
body:not(.entryMode) .app>header{display:none!important}
.visualStatusPanel{
  position:relative;
  grid-column:1;
  grid-row:1;
  width:var(--sc-status-w);
  height:calc(var(--sc-cell) * 14 + 28px);
  min-height:0;
  padding:11px 10px;
  border:2px solid var(--sc-line);
  background:rgba(7,26,43,.56);
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:9px;
  overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(143,184,200,.08);
}
.visualStatusPanel::before{content:"◇";position:absolute;top:6px;right:8px;color:var(--sc-line-hi);font-size:12px;line-height:1;opacity:.42;pointer-events:none}
.visualStatusEmblem{height:70px;background:url("./ui/board/emblem.png") center/contain no-repeat;image-rendering:pixelated}
.visualStatusRule{height:1px;background:linear-gradient(90deg,transparent,var(--sc-line-hi),transparent);opacity:.7}
.visualScoreHead{display:flex;align-items:baseline;justify-content:space-between;font-weight:700;font-size:21px;font-variant-numeric:tabular-nums}
.visualScoreHead strong{font-size:27px;color:var(--sc-text)}
.visualPips{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin-top:8px}
.visualPip{aspect-ratio:1;border:2px solid var(--sc-line-hi);clip-path:polygon(28% 0,72% 0,100% 28%,100% 72%,72% 100%,28% 100%,0 72%,0 28%)}
.visualPip.on{background:var(--sc-line-hi)}
.visualRound{text-align:center;font-size:19px;line-height:1.45;font-variant-numeric:tabular-nums}
.visualTurn{color:var(--sc-text);font-weight:700}
.visualLast{text-align:center;color:var(--sc-muted);font-size:13px;line-height:1.5;min-height:40px}
.visualLast strong{display:block;color:var(--sc-text);font-size:14px}
.visualLast strong.hasMove{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:3px}
.visualMoveSquare{min-width:36px;padding:2px 5px;border:1px solid var(--sc-line-hi);background:rgba(49,95,120,.32);color:var(--sc-text)}
.visualMoveArrow{color:var(--sc-line-hi)}
.visualStatusLinks{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-top:2px}
.visualStatusLinks a{padding:7px 3px;border:1px solid var(--sc-line);color:var(--sc-muted);text-decoration:none;text-align:center;font-size:12px}
.visualStatusLinks a:hover{border-color:var(--sc-line-hi);color:var(--sc-text)}

body:not(.entryMode) .boardWrap{
  grid-column:2;
  grid-row:1;
  width:calc(var(--sc-cell) * 7 + 63px)!important;
  max-width:none!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  align-self:center!important;
}
body:not(.entryMode) .coordsTop{
  width:calc(var(--sc-cell) * 7);
  height:28px;
  margin:0 0 0 27px!important;
  grid-template-columns:repeat(7,var(--sc-cell))!important;
  align-items:center;
  color:var(--sc-text)!important;
  font-size:clamp(13px,calc(var(--sc-cell) * .32),19px)!important;
}
body:not(.entryMode) .boardWithRows{grid-template-columns:21px calc(var(--sc-cell) * 7)!important;gap:6px!important}
body:not(.entryMode) .rowLabels{
  height:calc(var(--sc-cell) * 14)!important;
  grid-template-rows:repeat(14,var(--sc-cell))!important;
  color:var(--sc-text)!important;
  font-size:clamp(11px,calc(var(--sc-cell) * .26),16px)!important;
}
body:not(.entryMode) .board{
  width:calc(var(--sc-cell) * 7)!important;
  height:calc(var(--sc-cell) * 14)!important;
  max-width:none!important;
  max-height:none!important;
  aspect-ratio:auto!important;
  grid-template-columns:repeat(7,var(--sc-cell))!important;
  grid-template-rows:repeat(14,var(--sc-cell))!important;
  border:2px solid #9db5bf!important;
  background:var(--sc-bg-deep)!important;
  overflow:hidden;
}
body:not(.entryMode) .cell{width:var(--sc-cell);height:var(--sc-cell);border:0!important;border-right:1px solid rgba(3,24,47,.55)!important;border-bottom:1px solid rgba(3,24,47,.55)!important;background-size:cover!important;image-rendering:pixelated}
body:not(.entryMode) .cell.land.a{background-image:url("./ui/board/land_light.png")!important}
body:not(.entryMode) .cell.land.b{background-image:url("./ui/board/land_dark.png")!important}
body:not(.entryMode) .cell.sea.a{background-image:url("./ui/board/sea_light.png")!important}
body:not(.entryMode) .cell.sea.b{background-image:url("./ui/board/sea_dark.png")!important}
body:not(.entryMode) .cell.coast::after{box-shadow:inset 0 0 0 2px rgba(143,184,200,.18)!important}
body:not(.entryMode) .cell.selected{box-shadow:inset 0 0 0 max(2px,calc(var(--sc-cell) * .055)) var(--sc-line-hi)!important}
body:not(.entryMode) .cell.legal::before{background:#aecbd3!important}
body:not(.entryMode) .cell.capture::before{border-color:#c07a7d!important}
body:not(.entryMode) .piece{width:94%!important;height:94%!important}
body:not(.entryMode) .cell.selected .piece{z-index:7;transform:scale(1.075);filter:brightness(1.08) drop-shadow(0 0 4px rgba(143,184,200,.66));transition:transform .12s steps(3,end),filter .12s steps(3,end)}
.visualLastMoveMark{position:absolute;inset:5%;z-index:1;pointer-events:none;box-sizing:border-box}
.visualLastMoveMark.from{border:2px dashed rgba(215,183,123,.92);background:rgba(215,183,123,.08)}
.visualLastMoveMark.to{border:3px solid #b8d7df;background:rgba(143,184,200,.14);box-shadow:inset 0 0 0 2px rgba(7,26,43,.48),0 0 9px rgba(143,184,200,.52)}

body:not(.entryMode) .panel{
  position:relative;
  grid-column:3;
  grid-row:1;
  width:var(--sc-panel-w)!important;
  height:calc(var(--sc-cell) * 14 + 28px);
  min-height:0;
  display:flex!important;
  flex-direction:column!important;
  gap:7px!important;
  padding:9px!important;
  border:2px solid var(--sc-line);
  background:rgba(7,26,43,.58);
  overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(143,184,200,.08);
}
body:not(.entryMode) .panel::before{content:"◇";position:absolute;top:5px;right:7px;z-index:2;color:var(--sc-line-hi);font-size:12px;line-height:1;opacity:.34;pointer-events:none}
body:not(.entryMode) .panel>.card{
  flex:0 0 auto!important;
  margin:0!important;
  padding:9px!important;
  border:1px solid var(--sc-line)!important;
  border-radius:0!important;
  background:rgba(7,26,43,.54)!important;
  box-shadow:none!important;
}
body:not(.entryMode) .panel>.card:first-child{display:flex;flex-direction:column;gap:7px;min-height:0;flex:1 1 auto!important;overflow:hidden}
body:not(.entryMode) .panel>.card:nth-child(2){min-height:86px}
body:not(.entryMode) .panel>.card:nth-child(3){max-height:122px;overflow:auto}
body:not(.entryMode) .panel>.card:nth-child(n+4){display:none!important}
body:not(.entryMode) .turnName{font-size:17px!important}
body:not(.entryMode) .phase{font-size:12px!important;color:var(--sc-muted)!important}
body:not(.entryMode) .pill{border-radius:0!important;background:transparent!important;border-color:var(--sc-line)!important;color:var(--sc-muted)!important}
body:not(.entryMode) .scMatchScore{display:none!important}
body:not(.entryMode) .note{display:none!important}
body:not(.entryMode) .controls{display:none!important}
body:not(.entryMode) .aiRow{grid-template-columns:auto auto 1fr!important;gap:5px!important;margin-top:0!important;padding-top:7px!important;border-top:1px solid var(--sc-line)!important}
body:not(.entryMode) .aiRow .aiSelect:last-of-type{grid-column:1/-1}
body:not(.entryMode) .aiState{display:none}
body:not(.entryMode) .aiSelect{min-height:32px!important;padding:4px 6px!important;font-size:12px!important}
body:not(.entryMode) .aiLabel{font-size:12px!important;color:var(--sc-text)!important}
.visualPrimaryActions{display:grid;grid-template-rows:repeat(3,minmax(48px,1fr));gap:6px;flex:1 1 auto;min-height:0}
.visualUtilityActions{display:grid;grid-template-columns:1fr 1fr;gap:5px;flex:0 0 auto}
.visualActionButton{display:flex!important;align-items:center;justify-content:center;gap:7px;min-height:0!important;padding:7px!important;border-width:2px!important;font-size:13px!important}
.visualPrimaryActions .visualActionButton{flex-direction:column;font-size:15px!important;font-weight:700}
.visualActionButton::before{content:"";width:31px;height:31px;flex:0 0 auto;background:var(--visual-icon) center/contain no-repeat;image-rendering:pixelated}
.visualPrimaryActions .visualActionButton::before{width:clamp(34px,calc(var(--sc-cell) * .72),48px);height:clamp(28px,calc(var(--sc-cell) * .62),42px)}
.visualUtilityActions .visualActionButton{font-size:12px!important;min-height:45px!important}
.visualUtilityActions .visualActionButton::before{width:23px;height:23px}
.visualAdvancedActions{border:1px solid var(--sc-line);padding:4px 6px;background:rgba(7,26,43,.45)}
.visualAdvancedActions summary{font-size:12px;color:var(--sc-muted);text-align:center;cursor:pointer}
.visualAdvancedGrid{display:grid;grid-template-columns:1fr;gap:4px;margin-top:5px}
.visualAdvancedGrid .btn{min-height:34px!important;padding:4px!important;font-size:12px!important}
.visualSelectedLayout{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;align-items:center}
body:not(.entryMode) .sectionTitle{margin:0 0 5px!important;color:var(--sc-text)!important;font-size:12px!important}
body:not(.entryMode) .selectedInfo{min-height:0!important;font-size:12px!important;line-height:1.45!important;color:var(--sc-muted)!important}
body:not(.entryMode) .actions{max-height:82px!important;gap:4px!important}
body:not(.entryMode) .actionBtn{min-height:34px!important;padding:5px 6px!important;border-radius:0!important;border-color:var(--sc-line)!important;background:rgba(49,95,120,.25)!important;font-size:12px!important}
body:not(.entryMode) .piece .pieceArt{image-rendering:auto!important;filter:drop-shadow(0 2px 3px rgba(0,0,0,.34))!important}
body:not(.entryMode) .piece .crewLoad{position:absolute;left:50%;bottom:10%;z-index:5;display:flex;align-items:center;justify-content:center;gap:2px;min-height:7px;padding:1px 3px;border:1px solid rgba(143,184,200,.82);background:rgba(3,20,34,.88);transform:translateX(-50%);box-sizing:border-box;pointer-events:none}
body:not(.entryMode) .piece .crewLoad i{display:block;width:3px;height:3px;background:#b8d7df;box-shadow:0 0 3px rgba(184,215,223,.72)}
body:not(.entryMode) .piece .crewLoad i.kingLight{background:#cfb373;box-shadow:0 0 4px rgba(207,179,115,.9)}
body:not(.entryMode) .piece .crewBadge{right:-2px!important;bottom:-2px!important;min-width:12px!important;height:12px!important;padding:0 1px!important;border-radius:0!important;background:#071a2b!important;border-color:#8fb8c8!important;color:#d7e5ea!important;box-shadow:none!important;font-size:7px!important;line-height:1!important;font-variant-numeric:tabular-nums}
body:not(.entryMode) .piece .kingBadge{left:-2px!important;right:auto!important;top:auto!important;bottom:-2px!important;display:grid!important;place-items:center;min-width:12px!important;height:12px!important;padding:0 1px!important;border-radius:0!important;background:#b69a68!important;border-color:#d1bd8f!important;color:#071a2b!important;box-shadow:none!important;font-size:7px!important;line-height:1!important;font-weight:800}
body:not(.entryMode) .cell:nth-child(7n) .crewBadge{right:1px!important}
.visualCrewDelta{position:fixed;left:0;top:0;z-index:10000;display:grid;place-items:center;min-width:28px;height:24px;padding:0 5px;border:1px solid currentColor;background:rgba(3,20,34,.96);font:800 15px/1 var(--sc-serif);font-variant-numeric:tabular-nums;transform:translate(-50%,-50%) scale(.78);pointer-events:none;animation:visualCrewDeltaPop .82s ease-out forwards}
.visualCrewDelta.minus{color:#e2a7a7}
.visualCrewDelta.plus{color:#b8ddca}
.cell.visualCrewTransferPulse{animation:visualCrewTransferPulse .72s ease-out}
@keyframes visualCrewDeltaPop{0%{opacity:0;transform:translate(-50%,-25%) scale(.72)}18%{opacity:1;transform:translate(-50%,-50%) scale(1)}72%{opacity:1}100%{opacity:0;transform:translate(-50%,-118%) scale(.92)}}
@keyframes visualCrewTransferPulse{0%{box-shadow:inset 0 0 0 0 rgba(143,184,200,0)}38%{box-shadow:inset 0 0 0 3px rgba(143,184,200,.78)}100%{box-shadow:inset 0 0 0 0 rgba(143,184,200,0)}}
@media (prefers-reduced-motion:reduce){.visualCrewDelta,.cell.visualCrewTransferPulse{animation-duration:1ms!important}}

/* Dialogs and result placards */
.netModal,.winner{background:rgba(3,14,24,.82)!important}
.netDialog,.winnerBox,.boardResultCard{
  border-radius:0!important;
  border:2px solid var(--sc-line)!important;
  background:rgba(7,26,43,.97)!important;
  box-shadow:0 18px 60px rgba(0,0,0,.45)!important;
}
.winnerBox h2,.boardResultMain{font-family:var(--sc-serif)!important;color:var(--sc-text)!important}
.toast{border-radius:0!important;border:1px solid var(--sc-line-hi)!important;background:var(--sc-bg-deep)!important;color:var(--sc-text)!important}

/* Settings view / modal */
.visualSettingsFields{display:grid;gap:9px}
.visualSettingRow{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;min-height:52px;padding:9px 11px;border:1px solid var(--sc-line);background:rgba(7,26,43,.72);color:var(--sc-text);font-size:13px}
.visualSettingRow small{display:block;margin-top:3px;color:var(--sc-muted);font-size:12px;line-height:1.4}
.visualToggle{min-width:64px;min-height:34px;border:1px solid var(--sc-line-hi);background:rgba(49,95,120,.48);color:var(--sc-text);cursor:pointer}
.visualToggle[aria-pressed="false"]{border-color:var(--sc-line);background:rgba(7,26,43,.82);color:var(--sc-muted)}
.visualRange{width:118px;accent-color:var(--sc-line-hi)}
.visualSettingsModal{position:fixed;inset:0;z-index:190;display:none;place-items:center;padding:16px;background:rgba(3,14,24,.78)}
.visualSettingsModal.show{display:grid}
.visualSettingsDialog{width:min(100%,420px);padding:18px;border:2px solid var(--sc-line);background:var(--sc-bg-deep)}
.visualSettingsDialog h2{margin:0 0 14px;text-align:center;font-size:20px;letter-spacing:.08em}
.visualSettingsClose{width:100%;min-height:42px;margin-top:12px;border:2px solid var(--sc-line-hi);background:rgba(49,95,120,.55);color:var(--sc-text);cursor:pointer}
.visualUndoModal{z-index:205}
.visualUndoDialog{width:min(100%,390px)}
.visualUndoMessage{margin:0;padding:14px;border:1px solid var(--sc-line);background:rgba(7,26,43,.72);color:var(--sc-text);font-size:15px;line-height:1.65;text-align:center;word-break:keep-all}
.visualUndoActions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:12px}
.visualUndoActions button{min-height:48px;border:2px solid var(--sc-line-hi);color:var(--sc-text);font:700 14px/1.25 var(--sc-serif);cursor:pointer}
.visualUndoReject{background:rgba(39,62,75,.92)}
.visualUndoApprove{background:rgba(49,95,120,.92)}
.visualUndoActions button:disabled{cursor:wait;opacity:.58}
.visualUndoState{min-height:18px;margin:8px 0 0;color:var(--sc-muted);font-size:12px;text-align:center}
.visualResignPending{position:fixed;inset:0;z-index:220;display:none;place-items:center;gap:12px;padding:20px;background:rgba(3,14,24,.88);color:var(--sc-text);text-align:center}
.visualResignPending.show{display:grid;align-content:center}
.visualResignPending strong{font-size:18px;letter-spacing:.06em}
.visualPendingMark{width:34px;height:34px;border:2px solid var(--sc-line);border-top-color:var(--sc-line-hi);transform:rotate(45deg);animation:scPending 1s steps(8,end) infinite}
@keyframes scPending{to{transform:rotate(405deg)}}

/* Mobile play surface */
@media(max-width:900px){
  body:not(.entryMode){overflow-x:hidden;overflow-y:auto!important}
  body:not(.entryMode) .app{
    width:100%!important;
    height:auto!important;
    min-height:100dvh!important;
    padding:calc(7px + env(safe-area-inset-top)) max(6px,env(safe-area-inset-right)) calc(92px + env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left))!important;
    display:flex!important;
    flex-direction:column!important;
    gap:6px!important;
    overflow:visible!important;
  }
  .visualStatusPanel{
    order:0;
    position:relative;
    width:100%;
    height:auto;
    min-height:46px;
    padding:4px 6px;
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    grid-template-rows:1fr;
    align-items:center;
    gap:2px;
  }
  .visualStatusPanel::before{display:none}
  .visualStatusEmblem{position:absolute;left:6px;top:50%;width:24px;height:24px;transform:translateY(-50%)}
  .visualStatusRule,.visualStatusLinks,.visualPips{display:none}
  .visualScore{display:flex;min-width:0;align-items:center;justify-content:center}
  .visualScoreHead{gap:3px;font-size:12px;line-height:1}
  .visualScoreHead strong{font-size:17px}
  .visualScore.black{grid-column:1;grid-row:1;padding-left:25px}
  .visualScore.white{grid-column:4;grid-row:1}
  .visualRound{grid-column:2;grid-row:1;display:flex;min-width:0;flex-direction:column;align-items:center;justify-content:center;gap:1px;font-size:12px;line-height:1.05;text-align:center;white-space:nowrap}
  .visualRound br{display:none}
  .visualTurn{font-size:12px}
  .visualLast{grid-column:3;grid-row:1;display:flex;min-width:0;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-height:0;font-size:12px;line-height:1.05;text-align:center;white-space:nowrap}
  .visualLastLabel{font-size:12px}
  .visualLast strong{display:flex;font-size:12px;line-height:1}
  .visualLast strong.hasMove{gap:1px;margin:0}
  .visualMoveSquare{min-width:22px;padding:0 1px;border:0;background:transparent}
  body:not(.entryMode) .boardWrap{order:1;width:calc(var(--sc-cell) * 7 + 35px)!important;max-width:100%!important;align-self:center!important;flex:0 0 auto!important}
  body:not(.entryMode) .coordsTop{height:20px;margin-left:23px!important;font-size:12px!important;font-variant-numeric:tabular-nums}
  body:not(.entryMode) .boardWithRows{grid-template-columns:17px calc(var(--sc-cell) * 7)!important;gap:4px!important}
  body:not(.entryMode) .rowLabels{font-size:12px!important;font-variant-numeric:tabular-nums}
  body:not(.entryMode) .piece{width:92%!important;height:92%!important}
  body:not(.entryMode) .panel{order:2;width:100%!important;height:auto!important;display:flex!important;border:0;padding:0!important;background:transparent!important;overflow:visible;box-shadow:none}
  body:not(.entryMode) .panel::before{display:none}
  body:not(.entryMode) .panel>.card:first-child{min-height:0;flex:0 0 auto!important}
  body:not(.entryMode) .panel>.card:nth-child(2){min-height:72px}
  body:not(.entryMode) .panel>.card:nth-child(3){max-height:none}
  .visualPrimaryActions,.visualUtilityActions,.visualAdvancedActions{display:none!important}
  .visualSelectedLayout{grid-template-columns:1fr}
  body:not(.entryMode) .aiRow{grid-template-columns:auto auto 1fr!important}
  body:not(.entryMode) .aiRow .aiSelect:last-of-type{grid-column:auto}
  .mobileDock{display:grid!important;gap:5px!important;left:6px!important;right:6px!important;bottom:max(6px,env(safe-area-inset-bottom))!important;padding:7px!important;border:2px solid var(--sc-line)!important;border-radius:0!important;background:rgba(7,26,43,.97)!important;box-shadow:0 8px 28px rgba(0,0,0,.4)!important;backdrop-filter:none!important}
  .mobileDockButtons{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:5px!important}
  .mobileDock .btn{min-height:42px!important;border-radius:0!important;font-size:12px!important;padding:7px 3px!important}
  .mobileMore{position:relative}
  .mobileMore>.btn{width:100%}
  .mobileMorePanel{position:absolute;right:0;bottom:calc(100% + 9px);width:min(255px,82vw);display:none;grid-template-columns:1fr 1fr;gap:5px;padding:7px;border:2px solid var(--sc-line);background:var(--sc-bg-deep);box-shadow:0 12px 32px rgba(0,0,0,.45)}
  .mobileMore.open .mobileMorePanel{display:grid}
  .mobileMorePanel .btn{min-height:40px!important}
  .mobileMorePanel .visualActionButton::before{width:20px;height:20px}
}

@media(max-width:620px){
  body.entryMode{overflow:auto}
  .entryShell{min-height:0}
  .entryBrand{padding-top:8vh}
  .entryPanel{margin-top:4vh!important}
  .entryUtility{top:max(10px,env(safe-area-inset-top));right:max(10px,env(safe-area-inset-right))}
  .entryUtility a{min-width:54px!important;min-height:38px!important;font-size:12px!important}
  .entryActions{grid-template-columns:1fr!important}
}

@media(max-height:720px){
  body.entryMode{overflow-y:auto}
  .entryShell{min-height:0!important}
  .entryBrand{padding-top:0;gap:7px}
  .entryBrand h1{width:min(62vw,620px)}
  .entryBrand::after{width:min(150px,22vw)}
  .entryPanel{margin-top:14px!important}
  .visualHomeMenu{gap:6px!important}
  .visualHomeMenu .modeCard{min-height:46px!important;padding-block:8px!important}
}

@media(orientation:landscape) and (max-height:600px) and (max-width:1000px){
  body:not(.entryMode) .app{display:grid!important;grid-template-columns:minmax(300px,58vh) minmax(280px,1fr)!important;align-items:start!important;gap:8px!important}
  .visualStatusPanel{grid-column:2;grid-row:1;width:100%;min-height:54px}
  body:not(.entryMode) .boardWrap{grid-column:1;grid-row:1 / span 2;position:sticky;top:5px}
  body:not(.entryMode) .panel{grid-column:2;grid-row:2;width:100%!important}
}

@media(prefers-reduced-motion:reduce){
  .entryView{animation:none}
}

.scReduceMotion *{
  animation-duration:.001ms!important;
  animation-iteration-count:1!important;
  transition-duration:.001ms!important;
  scroll-behavior:auto!important;
}