/* Each game surface occupies the available screen, including browser chrome. */
:root{--header-h:64px;--space:clamp(10px,1.5vh,20px)}
html,body{height:100%;min-height:0}body{height:100dvh}#app{height:100dvh;display:flex;flex-direction:column;min-height:0}
.top{height:var(--header-h);flex:0 0 var(--header-h);padding:0 3vw}.top-actions{flex-wrap:nowrap}.top button{min-height:36px}
button{min-height:40px;padding:10px 16px}.actions{gap:8px}.eyebrow{letter-spacing:2px}.footer{flex:0 0 34px;padding:8px 3vw;font-size:12px}
.intro{flex:1;min-height:0;width:100%;max-width:1400px;padding:var(--space) 5vw;gap:6vw;grid-template-columns:1fr 1fr}.intro-copy{min-height:0}h1{font-size:clamp(46px,8vh,90px);margin:14px 0;line-height:1.08}.intro-sub{margin:12px 0;font-size:clamp(16px,2.1vh,21px)}.rule-list{margin:24px 0;gap:12px}.intro .gold{padding:13px 26px}
.demo{transform:none;max-height:100%;height:min(100%,670px);min-height:0;padding:20px;display:flex;flex-direction:column;border-radius:18px}.demo-title{flex-shrink:0;margin-bottom:14px}.demo-grid{flex:1;min-height:0;grid-template-rows:repeat(11,minmax(0,1fr));gap:6px}.demo-row{min-height:0;display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:6px}.demo-cell{width:100%;height:100%;min-height:0}.demo-caption{flex-shrink:0;margin-top:16px;padding-top:14px}
.board-wrap{flex:1;min-height:0;width:100%;max-width:1600px;margin:0 auto;padding:var(--space) 3vw;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;gap:var(--space)}.board-heading{margin:0;gap:12px}.board-heading h2{font-size:clamp(22px,3vh,32px);margin:4px 0}.board-heading .muted{margin:4px 0}.board-layout{min-height:0;gap:20px;flex-direction:row}.board{min-width:0;min-height:0;padding:12px 18px;grid-template-rows:repeat(11,minmax(0,1fr));gap:5px}.row{height:100%;min-height:0;grid-template-columns:32px repeat(15,minmax(0,1fr));gap:5px}.cell{aspect-ratio:auto;min-height:0;height:100%;font-size:clamp(15px,2.7vh,30px)}.keyword-panel{margin:0;padding:10px 0 0;gap:16px;flex-wrap:nowrap}.keyword-cells{margin-top:6px;gap:5px}.letter{height:clamp(30px,4.7vh,46px);width:clamp(25px,3vw,40px);font-size:clamp(18px,2.8vh,26px)}.board-wrap>.actions{flex-wrap:nowrap}.board-wrap>.actions button{min-height:32px;padding:6px 12px}.shortcut{margin-left:auto}.scoreboard{width:190px;flex:0 0 190px;padding:16px;display:flex;flex-direction:column;gap:8px}.score{padding:8px 0;flex:1;min-height:0}.score strong{font-size:clamp(20px,3vh,28px)}.score-edit{margin-top:5px}
dialog{width:min(1180px,calc(100vw - 32px));max-height:calc(100dvh - 24px);margin:auto;border-radius:16px;overflow:visible}dialog[open]{display:flex;flex-direction:column}.modal-head{padding:12px 22px;flex-shrink:0;min-height:60px}.modal-head .eyebrow{font-size:14px}.question{padding:18px 28px;text-align:center;min-height:0}.question h3{font-size:clamp(23px,3.1vh,38px);line-height:1.35;margin:14px auto}.question-image{height:clamp(100px,23vh,270px);max-width:100%;object-fit:contain}.emoji{font-size:clamp(40px,7vh,72px);margin:8px 0}.hint{font-size:clamp(17px,2.2vh,24px);line-height:1.4;margin:12px auto;padding:10px 16px}.hint>div+div{margin-top:6px}.answer{font-size:clamp(30px,4.5vh,52px);margin:12px 0}.question>p{margin:10px 0}.modal-actions{padding-top:12px;gap:8px}.live{min-height:0;margin-top:8px}.live:empty{display:none}.steps,.choices{margin:14px 0;gap:10px}.step,.choice{padding:16px}.final .keyword-cells{margin:18px 0}.final .letter{height:clamp(38px,7vh,65px);width:clamp(32px,5vw,54px)}.final h3{font-size:clamp(24px,3.4vh,38px)}
.settings{width:100%;max-width:840px;padding:18px 28px}.setting{padding:10px 0;min-height:52px}.setting input[type=number],.setting select{min-height:38px;padding:7px 10px}.settings .actions{margin-top:16px}.settings p{line-height:1.5;margin:10px 0}.setting-help{margin:6px 0 12px!important}.close{min-height:36px;width:36px}.timer{padding:7px 12px}
@media(min-width:800px){.question:has(.question-image):not(:has(.answer)){display:grid;grid-template-columns:minmax(220px,.8fr) minmax(0,1.2fr);column-gap:24px;align-items:center}.question:has(.question-image):not(:has(.answer)) .question-image{grid-column:1;grid-row:1 / span 2;height:min(43vh,340px)}.question:has(.question-image):not(:has(.answer)) h3,.question:has(.question-image):not(:has(.answer)) .hint{grid-column:2}.question:has(.question-image):not(:has(.answer)) .modal-actions,.question:has(.question-image):not(:has(.answer)) .live{grid-column:1 / -1}.question:has(.answer) .question-image{height:min(19vh,180px)}}
@media(max-width:800px){:root{--header-h:56px;--space:10px}.intro{gap:24px;padding:20px 4vw}h1{letter-spacing:-2px}.demo{padding:14px}.demo-caption{font-size:12px}.board-wrap{padding:10px 16px}.board-heading .eyebrow{font-size:12px}.scoreboard{width:155px;flex-basis:155px;padding:12px}.score-edit{gap:4px}.score .small{font-size:12px;padding:3px 8px}.keyword-panel{gap:10px}.keyword-panel button{font-size:14px;padding:9px 12px}.shortcut{display:none}.question{padding:14px 20px}.modal-head{padding:10px 16px}.settings{padding:14px 20px}}
@media(max-width:600px){:root{--header-h:54px;--space:8px}.top{padding:0 14px}.top .brand{font-size:12px;letter-spacing:0}.intro{display:flex;flex-direction:column;justify-content:center;gap:16px;padding:18px 24px}.intro-copy{width:100%;max-width:410px}.intro h1{font-size:clamp(44px,8vh,70px)}.rule-list{margin:20px 0;gap:12px}.rule{font-size:14px}.demo{display:none}.footer{font-size:11px;padding:8px 16px;justify-content:center;text-align:center}.footer span:last-child{display:none}.board-heading{align-items:center}.board-heading h2{font-size:20px}.board-heading .eyebrow{font-size:11px;letter-spacing:1px}.board-heading b{font-size:13px}.board-heading .muted{display:none}.board-layout{flex-direction:column;gap:8px}.board{padding:8px;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(6,minmax(0,1fr));gap:6px}.row{display:flex;gap:5px;min-height:0;padding:5px 7px;align-items:center;justify-content:space-between}.row .cell{display:none}.rownum{font-size:12px;width:auto}.mobile-label{display:block;font-size:13px;line-height:1.2}.row .mobile-label:last-child{font-size:12px}.scoreboard{width:100%;flex:0 0 auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 12px;padding:6px 10px}.scoreboard>b{display:none}.score{padding:3px 0;display:flex;align-items:center;justify-content:space-between;gap:6px}.score-line{gap:7px;font-size:12px}.score strong{font-size:18px}.score-edit{margin:0;gap:3px}.score .small{min-height:26px;font-size:11px;padding:3px 5px}.keyword-panel{display:grid;grid-template-columns:1fr;padding-top:6px;gap:8px}.keyword-panel>div:first-child{display:flex;flex-direction:column;align-items:center}.keyword-panel .eyebrow{font-size:11px}.keyword-panel .actions{justify-content:center}.keyword-cells{gap:4px}.letter{width:25px;height:30px;font-size:18px}.board-wrap>.actions{justify-content:center;gap:6px}.board-wrap>.actions button{font-size:12px;padding:6px 8px}.question h3{font-size:21px;margin:12px auto}.question-image{height:min(21vh,160px)}.emoji{font-size:40px;letter-spacing:10px}.hint{font-size:16px;padding:10px;margin:10px auto}.modal-head .eyebrow{font-size:12px;letter-spacing:1px}.modal-head{gap:10px}.modal-head .actions{gap:6px}.timer{min-width:70px;font-size:14px}.modal-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.modal-actions button{font-size:13px;padding:9px;min-height:38px}.modal-actions button:last-child:nth-child(odd){grid-column:1 / -1}.question .actions{justify-content:center}.steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.choices{flex-direction:column}.step,.choice{padding:10px;font-size:15px}.answer{font-size:30px}.final .letter{width:25px;height:36px;font-size:20px}.final h3{font-size:22px}.final .keyword-cells{gap:3px;flex-wrap:nowrap;margin:16px 0}.setting{gap:10px;font-size:14px;padding:9px 0}.settings{padding:12px 18px}.settings p{font-size:14px}.setting input[type=number]{width:85px}.settings h2{font-size:24px}.setting-help{font-size:12px!important}.live{font-size:12px}}
@media(max-height:560px) and (min-width:601px){:root{--header-h:46px;--space:6px}.top button{min-height:30px;padding:5px 10px}.board-heading h2{font-size:20px}.board-heading .muted{display:none}.board-heading .eyebrow{font-size:11px}.board{gap:3px;padding:6px 12px}.cell{font-size:16px}.keyword-panel{padding-top:5px}.letter{height:27px}.keyword-panel .eyebrow{font-size:11px}.board-wrap>.actions button{min-height:28px;padding:4px 10px}.scoreboard{padding:8px}.score{padding:4px 0}.score-edit{margin-top:2px}.score .small{min-height:24px}.intro h1{font-size:44px;margin:8px 0}.intro .rule-list{margin:14px 0;gap:8px}.demo{padding:10px}.demo-title{margin-bottom:8px}.demo-caption{margin-top:8px;padding-top:8px}.demo-grid{gap:3px}.footer{flex-basis:26px;padding:4px 3vw}.question h3{font-size:22px}.modal-head{min-height:45px;padding:6px 16px}.question{padding:10px 20px}.settings{padding:10px 24px}.setting{padding:5px 0;min-height:40px}.settings .actions{margin-top:8px}}

/* Keep geometry proportional instead of stretching tiles to fill a wide screen. */
.board-wrap{max-width:1280px}
@media(min-width:601px){
.board-layout{align-items:center;justify-content:center}
.board{flex:0 0 auto;width:var(--board-width,760px);height:var(--board-height,490px);padding:12px 18px;gap:5px;grid-template-rows:repeat(11,var(--tile,38px));align-content:center}
.row{height:var(--tile,38px);grid-template-columns:32px repeat(15,var(--tile,38px));gap:5px}
.cell{width:var(--tile,38px);height:var(--tile,38px);aspect-ratio:1;font-size:clamp(14px,calc(var(--tile,38px)*.56),30px)}
.scoreboard{max-height:100%;height:var(--board-height,490px)}
.demo-grid{flex:0 0 auto;height:var(--demo-grid-height,450px);width:var(--demo-grid-width,410px);align-self:center;grid-template-rows:repeat(11,var(--demo-tile,35px));gap:6px}
.demo-row{grid-template-columns:repeat(10,var(--demo-tile,35px));gap:6px}
.demo-cell{width:var(--demo-tile,35px);height:var(--demo-tile,35px);aspect-ratio:1}
.demo{justify-content:center;height:auto;align-self:center;width:100%}
}
.letter{width:clamp(25px,4.7vh,42px);height:clamp(25px,4.7vh,42px);aspect-ratio:1}
.final .letter{width:clamp(25px,5vw,52px);height:clamp(25px,5vw,52px);aspect-ratio:1}
dialog{width:min(900px,calc(100vw - 32px))}
dialog:has(.question-image){width:min(1000px,calc(100vw - 32px))}
dialog:has(.settings){width:min(700px,calc(100vw - 32px))}
@media(max-width:600px){.letter,.final .letter{width:25px;height:25px;font-size:18px}.row{border-radius:8px}.board{align-content:stretch}}

/* User-supplied background, preserved as an original image asset. */
body{background:#fff1db url('background.png') center center / cover no-repeat fixed;color:#591726}
.top{background:rgba(92,20,38,.94);color:#fff8eb;border-bottom-color:#f4c65d55}
.intro-copy{padding:24px;border-radius:18px;background:rgba(255,248,235,.92);box-shadow:0 8px 35px #701c2c14}
.intro-copy .eyebrow,.board-heading .eyebrow,.keyword-panel .eyebrow{color:#842738}
h1 em{color:#a52c38}.intro-sub,.rule{color:#692c35}.rule b{color:#842738;border-color:#b67959}
.intro-copy .ghost,.board-wrap>.actions .ghost,.keyword-panel .ghost{background:rgba(255,248,235,.95);color:#701c2c;border-color:#ae7265}
.board-heading{background:rgba(255,248,235,.94);border:1px solid #d7b293;border-radius:12px;padding:8px 16px}
.board-heading .muted,.shortcut{color:#6f3540}
.board,.demo{background:rgba(89,19,33,.95);box-shadow:0 10px 35px #50131c22}
.keyword-panel{background:rgba(255,248,235,.94);border:1px solid #d7b293;border-radius:12px;padding:10px 16px}
.footer{color:#591726;background:rgba(255,248,235,.91)}
dialog::backdrop{background:rgba(46,17,20,.56);backdrop-filter:blur(3px)}
@media(max-width:600px){.intro-copy{padding:18px}.board-heading{padding:8px 10px}.keyword-panel{padding:8px}.board-wrap>.actions{padding:3px 0}.shortcut{display:none}}
@media(max-height:560px){.intro-copy{padding:14px}.board-heading{padding:5px 12px}.keyword-panel{padding:5px 12px}}

/* Question 04 uses concrete actor → activity → value examples. */
.benefit-rebus{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:820px;margin:2px auto 10px}
.benefit-example{display:grid;grid-template-columns:minmax(92px,1fr) 84px minmax(92px,1fr);align-items:center;gap:7px;min-height:128px;padding:12px;border:1px solid #dfc69b;border-radius:18px;background:linear-gradient(145deg,#fffdf7,#f6ead4);box-shadow:0 8px 22px #66182a14}
.example-person,.example-result{display:flex;flex-direction:column;align-items:center;gap:4px;color:#762337}
.example-person svg,.example-result svg{width:62px;height:62px;overflow:visible;fill:#7b2942}
.example-person svg .detail{fill:#f4c65d;stroke:#f4c65d;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.example-person.student svg{fill:#a43d52}.example-result{color:#8b5b0c}.example-result svg{fill:#d69b22}.example-result.knowledge svg{fill:#edb72d}.example-result.knowledge svg .detail{fill:none;stroke:#9a6711;stroke-width:4;stroke-linecap:round}
.example-person span,.example-result span{font-size:11px;font-weight:900;letter-spacing:.7px;white-space:nowrap}
.example-arrow{display:flex;flex-direction:column;align-items:center;gap:2px;color:#762337}
.example-arrow small{font-size:10px;font-weight:900;letter-spacing:1px}
.example-arrow b{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:#f4c65d;color:#591726;font-size:30px;line-height:1;box-shadow:0 4px 0 #cb9435}
.benefit-caption{grid-column:1/-1;justify-self:center;margin-top:0;padding:7px 18px;border-radius:999px;background:#762337;color:#fff8eb;font-size:12px;font-weight:900;letter-spacing:1.2px}
@media(max-width:780px){.benefit-rebus{grid-template-columns:1fr;max-width:430px}.benefit-example{min-height:102px;padding:8px}.benefit-caption{font-size:10px}.example-person svg,.example-result svg{width:48px;height:48px}}
@media(max-width:420px){.benefit-example{grid-template-columns:minmax(80px,1fr) 58px minmax(80px,1fr);gap:3px}.example-person span,.example-result span{font-size:9px}.example-arrow small{font-size:8px}.example-arrow b{width:36px;height:36px;font-size:24px}.benefit-caption{padding:6px 10px;letter-spacing:.6px}}