/* Fit the whole play surface to the desktop viewport, without clipping content. */
@media (min-width:621px) {
  body { --board-size:min(560px, calc(100dvh - 310px), calc(100vw - 320px)); }
  .topbar { max-width:1000px; height:70px; padding:10px 28px; }
  .brand { font-size:23px; }
  .brand-mark { width:40px; height:40px; font-size:33px; border-radius:14px; }
  .brand small { margin-top:2px; }
  .game-layout { width:fit-content; max-width:none; margin:4px auto 0; padding:0 20px; grid-template-columns:minmax(280px,var(--board-size)) 240px; gap:12px 24px; }
  .journey { min-height:72px; padding:7px 14px; gap:10px; border-radius:22px; }
  .journey h2 { font-size:17px; }
  .level-label span { font-size:25px; }
  .goal { min-width:51px; padding:1px 7px 5px; }
  .goal .symbol { font-size:25px; line-height:28px; }
  .board-top { height:46px; padding:0 6px 9px; }
  .moves strong { font-size:26px; padding:5px; width:46px; }
  .board-frame { padding:10px; border-width:4px; border-radius:23px; }
  .board { gap:clamp(4px,.7vh,7px); }
  .tile { border-radius:clamp(9px,1.7vh,16px); }
  .tile .symbol { font-size:clamp(21px,3.8vh,36px); }
  .board-bottom { margin:19px 2px 0; flex-wrap:nowrap; gap:5px; }
  .board-bottom>span { max-width:210px; line-height:1.5; }
  .text-button { padding:6px 9px; }
  .companion { margin-top:0; }
  .tag { padding:4px 15px; }
  .portrait { height:clamp(105px,calc(100dvh - 555px),190px); margin:0 16px; border-radius:65px 65px 26px 26px; }
  .portrait-placeholder { margin-bottom:28px; }
  .portrait-placeholder>span { width:clamp(52px,9vh,78px); height:clamp(52px,9vh,78px); font-size:clamp(34px,6vh,50px); border-radius:22px; }
  .portrait-placeholder small { display:none; }
  .portrait-caption { bottom:9px; }
  .portrait-caption span { font-size:19px; margin-top:3px; }
  .dialogue { margin-top:17px; min-height:95px; padding:10px 14px; }
  .dialogue p { margin:4px 0 6px; line-height:1.7; }
  .skill-panel { margin-top:17px; padding:13px 15px; }
  .skill-panel>p { margin:9px 0 12px; }
  .skill-button { padding:10px; margin-top:12px; }
  .skill-panel:has(#skill-confirm:not([hidden]))>#skill { display:none; }
  #skill-confirm:not([hidden]) { display:flex; align-items:stretch; gap:7px; margin-top:12px; }
  #skill-confirm .skill-button { flex:1; margin:0; }
  #skill-confirm .text-button { width:auto; margin:0; padding:6px; box-shadow:0 4px #e8cddd; }
  footer { max-width:none; width:fit-content; margin:17px auto 0; padding:0 12px 9px; gap:38px; line-height:1.5; }
}
/* Keep readable, scrollable controls for unusually short windows and zoomed text. */
@media (min-width:621px) and (max-height:700px) {
  .portrait { height:105px; }
  .companion-top { display:none; }
  .skill-panel { margin-top:13px; }
}

/* Wide-screen game composition: use height for play, width for supporting UI. */
@media (min-width:1000px) {
 body { --board-size:min(840px,calc(100dvh - 174px),calc(100vw - 520px)); }
 .topbar {max-width:none;width:calc(100% - 64px);height:62px;padding:7px 0;}
 .game-layout {width:calc(100% - 64px);padding:0;margin:0 auto;grid-template-columns:minmax(160px,1fr) var(--board-size) minmax(230px,1.25fr);grid-template-areas:'journey play companion';gap:24px;align-items:center;}
 .journey {display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:16px;padding:24px 18px;min-height:420px;width:100%;max-width:260px;justify-self:end;transform:rotate(-1deg);border-width:4px;border-radius:30px;}
 .journey h2 {display:block;text-align:center;font-size:24px;}
 .journey>.muted {display:block;text-align:center;font-size:14px;color:#a17894;}
 .level-label {display:flex;flex-direction:row;align-items:center;justify-content:center;gap:12px;font-size:14px;}
 .level-label span {font-size:36px;}
 .goals {margin:0;justify-content:center;gap:10px;}
 .goal {min-width:64px;padding:10px 7px;border-radius:19px;}
 .goal .symbol {font-size:36px;line-height:43px;}
 .goal-count {font-size:19px;}
 .goal-count span {font-size:14px;}
 .score-block {display:block;padding:14px 4px 0;text-align:center;}
 .score-block>span {font-size:14px;color:#a17894;}
 .score-block strong {font-size:34px;font-weight:700;color:#d576a1;margin:8px 0 14px;}
 .score-track {background:#f5e0ec;height:7px;}
 .score-track i {background:#eab267;}
 .star-labels {font-size:25px;}
 .board-top {height:48px;padding:0 5px 10px;}
 .moves strong {font-size:30px;width:54px;}
 .moves span,.board-status {font-size:14px;}
 .board-frame {padding:12px;border-radius:29px;}
 .board {gap:clamp(6px,1vh,10px);}
 .tile {border-radius:clamp(13px,2.2vh,22px);}
 .tile .symbol {font-size:clamp(30px,5vh,52px);}
 .board-bottom {height:36px;margin-top:19px;}
 .board-bottom>span {max-width:none;font-size:12px;}
 .board-bottom .text-button {font-size:14px;padding:7px 12px;}
 .companion {width:100%;max-width:310px;justify-self:start;}
 .portrait {height:clamp(120px,calc(100dvh - 485px),330px);margin:0 15px;}
 .portrait-placeholder>span {width:clamp(64px,12vh,130px);height:clamp(64px,12vh,130px);font-size:clamp(42px,8vh,82px);border-radius:30px;}
 .portrait-caption span {font-size:24px;}
 .dialogue {padding:13px 17px;min-height:100px;}
 .dialogue p {font-size:16px;}
 .speaker {font-size:13px;}
 .skill-panel {padding:16px 18px;}
 .skill-heading h2 {font-size:21px;}
 .skill-heading div>span,.skill-panel>p,.energy-label {font-size:12px;}
 .skill-button {font-size:16px;padding:11px;}
 footer {margin-top:8px;padding-bottom:4px;}
}
@media (min-width:1000px) and (max-height:700px) {
 .journey {min-height:365px;padding:15px;gap:11px;}
 .portrait {height:105px;}
 .portrait-placeholder>span {height:54px;width:54px;font-size:35px;border-radius:19px;}
 .portrait-caption span {font-size:19px;}
 .dialogue {min-height:85px;padding:9px 13px;margin-top:12px;}
 .dialogue p {font-size:14px;}
 .skill-panel {margin-top:12px;padding:12px;}
 .skill-heading h2 {font-size:18px;}
 .skill-panel>p {margin:7px 0;line-height:1.5;}
 .skill-button {font-size:14px;padding:9px;}
 .board-bottom>span {font-size:11px;}
}
/* 120-cell board: twelve columns, ten rows. */
.board {grid-template-columns:repeat(12,minmax(0,1fr));}
@media(min-width:1000px){
 body {--board-size:min(1050px,calc((100dvh - 205px)*1.2),calc(100vw - 490px));}
 .game-layout {grid-template-columns:minmax(150px,1fr) var(--board-size) minmax(220px,1.2fr);gap:20px;}
 .tile .symbol {font-size:clamp(24px,4vh,45px);}
 .portrait {height:clamp(120px,calc(100dvh - 530px),280px);}
 .board {gap:clamp(4px,.7vh,8px);}
}
@media(max-width:999px){.board{gap:4px;}.tile{border-radius:9px;}.tile .symbol{font-size:clamp(16px,3.3vw,27px);}}