/* The playfield owns the screen. Desktop controls live beside it, not below it. */
#panel:has(.puyo-game) {
    box-sizing: border-box;
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    padding: 12px max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    border: 0;
    border-radius: 0;
    overflow: hidden;
    background: radial-gradient(ellipse at 35% 25%, #414477, #202744 60%, #111a30);
    color: #f5f1ff;
}
#panel:has(.puyo-game)::backdrop {background: #111a30;}
#panel:has(.puyo-game) :is(#panel-title, #panel-subtitle) {display: none;}
#panel:has(.puyo-game) #panel-close {color: #e4def9; z-index: 3;}
#panel:has(.puyo-game) #panel-body {height: 100%; max-width: none; margin: 0;}
.puyo-game {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    grid-template-rows: auto auto auto auto auto minmax(0, 1fr);
    gap: 14px 28px;
    height: 100%; max-width: 1280px; margin: auto;
    font-family: system-ui, sans-serif; line-height: 1.3; text-align: center; outline: none;
}
.puyo-game [hidden] {display: none !important;}
.puyo-heading, .puyo-hud, .puyo-status, .puyo-actions, .puyo-controls, .puyo-help {grid-column: 2;}
.puyo-heading {display: flex; align-items: center; gap: 10px; padding-right: 32px;}
.puyo-heading h3 {margin: 0; font-size: 25px; color: #fff4c8;}
.puyo-emblem {font-size: 28px; color: #a8ede7;}
.puyo-free {display: none;}
.puyo-hud {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;}
.puyo-hud > div {padding: 10px 4px; border: 1px solid #c6bded28; border-radius: 10px; background: #ffffff08;}
.puyo-hud span {display: block; font-size: 12px; color: #c2c6e5;}
.puyo-hud strong {display: block; margin-top: 2px; font-size: 26px; font-variant-numeric: tabular-nums; color: #fff4c8;}
.puyo-stage {
    grid-column: 1; grid-row: 1 / 7;
    container-type: size;
    display: flex; align-items: center; justify-content: center; gap: 16px;
    height: 100%; min-height: 0; min-width: 0;
}
.puyo-well {
    position: relative; flex: 0 0 auto;
    height: min(100cqh, calc((100cqw - 104px) * 2));
    aspect-ratio: 1 / 2;
    border: 3px solid #aaa5da; border-radius: 10px; overflow: hidden;
    box-shadow: 0 8px 24px #0004;
}
.puyo-canvas {display: block; width: 100%; height: 100%;}
.puyo-overlay {position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 16px; background: #171d3ee8;}
.puyo-overlay strong {font-size: clamp(20px, 3vw, 36px); color: #ffe7a8;}
.puyo-overlay span {max-width: 280px; font-size: clamp(13px, 1.4vw, 18px); line-height: 1.6; color: #d2d4ed;}
.puyo-side {width: 88px; flex: 0 0 88px; align-self: flex-start; text-align: center; overflow: hidden;}
.puyo-side h4 {margin: 0 0 8px; color: #d6d0ee; font-size: 12px; letter-spacing: .08em;}
.puyo-next {display: block; width: 88px; height: 160px; border-radius: 10px;}
.puyo-tip {margin: 12px 0; font-size: 12px; line-height: 1.7; color: #b9c3e3;}
.puyo-status {min-height: 24px; margin: 0; font-size: 15px; color: #ffe7a8; font-weight: 700;}
.puyo-game button {
    box-sizing: border-box; min-height: 46px; padding: 8px 14px;
    border: 1px solid #9ca7d5; border-bottom: 3px solid #6570a5; border-radius: 10px;
    background: linear-gradient(#f1edff, #ced5ef); color: #293256;
    font: 700 14px system-ui, sans-serif; cursor: pointer;
    touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.puyo-game button:hover:enabled {filter: brightness(1.1);}
.puyo-game button:is(:active, .is-pressed):enabled {transform: translateY(2px); border-bottom-width: 1px; background: #b5c7e5;}
.puyo-game button:focus-visible, .puyo-help summary:focus-visible {outline: 3px solid #ffd56a; outline-offset: 3px;}
.puyo-game button:disabled {opacity: .4; cursor: default;}
.puyo-actions {display: flex; justify-content: center; gap: 8px;}
.puyo-game .puyo-start {min-width: 160px; background: linear-gradient(#ffeaa8, #edc268); border-color: #b08c43; color: #46351b;}
.puyo-controls {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%;}
.puyo-controls button {min-height: 62px; padding: 5px;}
.puyo-controls b {display: block; font-size: 28px; line-height: 1.1;}
.puyo-controls small {display: block; font-size: 11px;}
.puyo-help {align-self: start; max-height: 100%; overflow-y: auto; font-size: 12px; color: #c6cbe7;}
.puyo-help summary {cursor: pointer; min-height: 28px;}
.puyo-help p {text-align: left; line-height: 1.7; margin: 6px 0;}

/* Portrait phones: a small score strip, the board, and one row of icon controls. */
@media (max-width: 700px) and (orientation: portrait) {
    #panel:has(.puyo-game) {padding: max(8px, env(safe-area-inset-top)) 10px max(8px, env(safe-area-inset-bottom));}
    #panel:has(.puyo-game) #panel-close {top: 6px; right: 10px;}
    .puyo-game {grid-template-columns: minmax(0, 1fr); grid-template-rows: 26px 40px minmax(0, 1fr) 34px 48px; gap: 6px;}
    .puyo-heading, .puyo-hud, .puyo-actions, .puyo-controls {grid-column: 1;}
    .puyo-heading {grid-row: 1; padding-right: 80px; gap: 6px;}
    .puyo-heading h3 {font-size: 19px;}
    .puyo-emblem {font-size: 20px;}
    .puyo-hud {grid-row: 2; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px;}
    .puyo-hud > div {padding: 2px; border-radius: 7px;}
    .puyo-hud span {font-size: 9px;}
    .puyo-hud strong {font-size: 17px; margin-top: 0;}
    .puyo-stage {grid-column: 1; grid-row: 3; gap: 10px;}
    .puyo-well {height: min(100cqh, calc((100cqw - 62px) * 2)); border-width: 2px;}
    .puyo-side {flex-basis: 52px; width: 52px;}
    .puyo-side h4 {font-size: 10px; letter-spacing: 0; margin-bottom: 5px;}
    .puyo-next {width: 52px; height: auto;}
    .puyo-tip {display: none;}
    .puyo-overlay {gap: 10px; padding: 12px;}
    .puyo-overlay strong {font-size: 24px;}
    .puyo-overlay span {font-size: 13px;}
    .puyo-status {position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;}
    .puyo-actions {grid-row: 4;}
    .puyo-game .puyo-actions button {min-height: 34px; padding: 4px 16px; font-size: 12px;}
    .puyo-controls {grid-row: 5; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px;}
    .puyo-controls button {min-height: 48px; padding: 3px;}
    .puyo-controls small {display: none;}
    .puyo-controls b {font-size: 27px;}
    .puyo-help {position: absolute; z-index: 4; top: 0; right: 35px; max-height: min(65dvh, 500px); overflow-y: auto;}
    .puyo-help summary {display: flex; align-items: center; justify-content: center; width: 28px; height: 26px; font-size: 0; list-style: none; border: 1px solid #a6b8db; border-radius: 50%;}
    .puyo-help summary::-webkit-details-marker {display: none;}
    .puyo-help summary::after {content: '?'; font: 800 17px system-ui; color: #e5e8ff;}
    .puyo-help[open] {width: min(300px, calc(100vw - 70px)); padding: 10px; border: 1px solid #a6b8db; border-radius: 12px; background: #202744; box-shadow: 0 8px 30px #0008;}
    .puyo-help[open] summary {margin-left: auto;}
}

/* Landscape and short desktop windows keep the full-height board and compact sidebar. */
@media (orientation: landscape) and (max-height: 650px) {
    .puyo-game {grid-template-columns: minmax(0, 1fr) 260px; gap: 6px 14px;}
    .puyo-heading h3 {font-size: 19px;}
    .puyo-emblem {font-size: 22px;}
    .puyo-hud {grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px;}
    .puyo-hud > div {padding: 3px 1px;}
    .puyo-hud span {font-size: 9px;}
    .puyo-hud strong {font-size: 17px;}
    .puyo-status {font-size: 12px; min-height: 18px;}
    .puyo-game button {min-height: 34px; padding: 4px 10px; font-size: 12px;}
    .puyo-controls {gap: 5px;}
    .puyo-controls button {min-height: 39px; padding: 2px;}
    .puyo-controls b {font-size: 21px;}
    .puyo-controls small {font-size: 9px;}
    .puyo-tip {display: none;}
    .puyo-help summary {min-height: 22px;}
}