:root{font-family:'Noto Sans KR',system-ui,sans-serif;color:#20203a;background:#f4f3fb;font-synthesis:none;text-rendering:optimizeLegibility;--ink:#20203a;--muted:#77778f;--purple:#6959e8;--purple-deep:#4f42c4;--line:#e7e5f1;--panel:#fff;--coral:#f0787a;--mint:#62c8ad;--shadow:0 18px 55px rgba(42,34,101,.09)}
*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background:radial-gradient(ellipse at 10% 0%,#e9e6ff 0,transparent 34%),radial-gradient(ellipse at 100% 55%,#fce9ef 0,transparent 35%),#f6f5fb}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible{outline:3px solid #9a8fff;outline-offset:3px}.app-shell{max-width:1120px;margin:0 auto;padding:0 28px;min-height:100vh;display:flex;flex-direction:column}.site-header{height:86px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:11px;color:var(--ink);text-decoration:none}.brand-mark{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:#211f49;color:white;font-size:23px;box-shadow:0 6px 14px #211f4930}.brand strong,.brand small{display:block}.brand strong{font-size:16px}.brand small{font-size:11px;color:#88869f;margin-top:1px}.teacher-link{font-size:13px;text-decoration:none;color:#77758e;border:1px solid #dedbea;border-radius:99px;padding:9px 15px;background:#ffffff85}.teacher-link:hover{color:var(--purple);border-color:#b8b1fa}main{flex:1;display:flex;flex-direction:column}.screen{width:100%;animation:enter .32s ease both}.hidden{display:none!important}@keyframes enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.home-screen{display:grid;grid-template-columns:1fr 1fr;gap:38px;align-items:center;padding:55px 0 38px;max-width:960px;margin:auto}.hero-copy{padding:0 0 30px 10px}.eyebrow{letter-spacing:.18em;font-size:10px;font-weight:bold;color:#8078cd}.hero-copy h1{font-size:clamp(38px,5vw,58px);line-height:1.24;letter-spacing:-.055em;margin:19px 0 16px;color:#211f46}.hero-copy h1 span{color:var(--purple)}.hero-copy p{color:#77758f;font-size:15px;line-height:1.9;margin:0}.panel{background:var(--panel);border:1px solid #eeedf5;border-radius:24px;box-shadow:var(--shadow)}.setup-card{padding:27px 28px 23px}.section-title{display:flex;align-items:center;gap:12px}.step-number{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;background:#f0efff;color:var(--purple);font-weight:bold;font-size:12px}.section-title h2{font-size:16px;margin:0 0 3px}.section-title p{font-size:11px;color:#9290a5;margin:0}.identity-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:20px 0 26px}.identity-fields label{font-size:11px;font-weight:bold;color:#69677e}.identity-fields input{display:block;width:100%;height:43px;border:1px solid #e5e3ef;border-radius:11px;margin-top:7px;padding:0 11px;color:var(--ink);background:#fcfbff;font-size:13px}.identity-fields input::placeholder{color:#aaa8b8}.mode-heading{margin-bottom:13px}.mode-cards{display:grid;gap:10px}.mode-card{width:100%;min-height:69px;display:flex;align-items:center;text-align:left;gap:13px;padding:11px 14px;border:1px solid #e8e6f1;border-radius:15px;background:#fff;color:var(--ink);transition:transform .18s,box-shadow .18s,border-color .18s}.mode-card:hover{transform:translateY(-2px);border-color:#b8b0fc;box-shadow:0 8px 18px #6959e81a}.mode-card:active{transform:translateY(0) scale(.99)}.mode-icon{width:42px;height:42px;border-radius:13px;background:#f0efff;color:#6555db;display:grid;place-items:center;font-size:23px;font-weight:bold}.vowel-card .mode-icon{background:#fff0ec;color:#e47a65}.mode-copy{flex:1}.mode-copy strong,.mode-copy small{display:block}.mode-copy strong{font-size:14px}.mode-copy small{font-size:10px;color:#918fa4;margin-top:3px}.mode-arrow{color:#aaa7bc;font-size:18px}.text-button{background:none;border:0;color:#7369cd;padding:17px 0 0;font-size:12px;font-weight:bold}.text-button:hover{text-decoration:underline}.home-note{grid-column:1/-1;text-align:center;color:#85829a;font-size:12px;margin-top:-14px}.home-note span{color:#f3a44f;font-size:17px;vertical-align:-2px;margin-right:5px}footer{padding:23px 0 22px;text-align:center;color:#a09eb0;font-size:10px;letter-spacing:.04em}

.game-screen{max-width:900px;margin:0 auto;padding:12px 0 28px}.game-topline{display:flex;align-items:center;gap:12px;margin:0 0 13px}.back-button{border:0;background:transparent;color:#77758d;font-size:12px;padding:8px 4px}.back-button:hover{color:var(--purple)}.mode-pill{font-size:11px;font-weight:bold;color:#5d50c9;background:#eeecff;border-radius:99px;padding:7px 12px}.live-label{margin-left:auto;font-size:9px;letter-spacing:.14em;color:#9290a7;display:flex;align-items:center;gap:7px}.live-label i,.pulse-dot{width:7px;height:7px;border-radius:50%;background:#66c8a8;box-shadow:0 0 0 4px #66c8a81c}.hud{display:grid;grid-template-columns:140px 1fr 150px;align-items:center;gap:20px;padding:15px 22px;margin-bottom:14px;border-radius:18px}.hud-stat span,.time-label span{font-size:10px;color:#8a889f;display:block}.hud-stat strong{display:block;font-size:22px;line-height:1.3;margin-top:2px;color:#252344}.combo-stat{text-align:right}.combo-stat strong{color:#e18464}.hud-stat small{font-size:9px;color:#a2a0b2}.time-label{display:flex;align-items:center;justify-content:space-between}.time-label strong{font-size:19px;color:#302d58}.time-label strong small{font-size:10px;margin-left:3px;color:#8d8ba1}.time-track{height:8px;margin-top:8px;background:#eeedf5;border-radius:8px;overflow:hidden}.time-track i{height:100%;width:100%;display:block;border-radius:inherit;background:linear-gradient(90deg,#65cfad,#a7d976);transition:width .15s linear,background .2s}.time-track i.warning{background:linear-gradient(90deg,#ffbc70,#f07a7d)}.question-card{position:relative;text-align:center;padding:13px 18px 12px;margin-bottom:14px;overflow:hidden;background:linear-gradient(120deg,#fff 55%,#fbfaff)}.question-label{font-size:11px;color:#7d7a92;display:flex;align-items:center;justify-content:center;gap:9px}.pulse-dot{width:6px;height:6px}.target-letter{font-size:clamp(55px,8vw,78px);font-weight:bold;line-height:1.12;color:#292651;margin:2px 0 1px;text-shadow:0 3px 0 #f0eeff}.question-subline{display:flex;justify-content:space-between;align-items:center;color:#aaa8b8;font-size:10px}.question-subline #feedback{color:#7975a0}.question-subline #feedback.correct{color:#28a17e}.question-subline #feedback.wrong{color:#e16d72}.board-wrap{padding:14px 14px 13px;overflow:hidden}.board-container{width:100%;overflow-x:auto;overscroll-behavior-x:contain}.board-title{display:flex;align-items:center;justify-content:space-between;margin:0 1px 9px}.board-title strong{font-size:12px}.board-title span{font-size:9px;color:#a1a0b1}.phoneme-table{width:100%;border-collapse:separate;border-spacing:3px;table-layout:fixed;color:#55536e}.phoneme-table th{font-size:clamp(8px,1.3vw,11px);font-weight:normal;line-height:1.2;text-align:center;padding:7px 2px;background:#f2f1f7;border-radius:6px}.phoneme-table .axis-cell{background:#eeedfa;color:#6c64b3;font-weight:bold}.phoneme-table .group-cell{width:11%;color:#555174;font-weight:bold}.phoneme-table .type-cell{width:9%;color:#77758e}.phoneme-table td{height:42px;text-align:center;background:#fbfaff;border:1px solid #eeeef5;border-radius:8px;padding:2px}.phoneme-table .void-cell{background:#f7f6fa;border:1px solid transparent}.slot-button{position:relative;width:100%;height:36px;min-width:0;border:1px solid #dcd8f8;border-bottom-width:3px;border-radius:8px;color:#6156be;background:linear-gradient(180deg,#fff 0%,#f1efff 100%);font-size:17px;font-weight:bold;box-shadow:0 2px 0 #e4e0ff,inset 0 1px 0 white;transition:transform .08s,border-color .12s,background .12s,box-shadow .12s;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.slot-button::after{content:"";position:absolute;inset:4px;border:1px dashed #d9d5fa;border-radius:5px;opacity:.8;pointer-events:none}.slot-button:hover{border-color:#a69bf3;background:#eeebff;box-shadow:0 3px 8px #786ae82a}.slot-button:active,.slot-button.pressed{transform:translateY(2px);border-bottom-width:1px;box-shadow:0 0 0 transparent,inset 0 2px 4px #6959e82a}.slot-button.clue{border:1px solid #e9e8f0;background:#f8f8fb;color:#39374f;box-shadow:none;cursor:default}.slot-button.clue::after{display:none}.slot-button.correct-flash{animation:good .5s ease}.slot-button.wrong-flash{animation:bad .38s ease}@keyframes good{50%{transform:scale(.9);background:#cbf1e4;border-color:#66caa9;box-shadow:0 0 0 5px #66caa933}}@keyframes bad{25%{transform:translateX(-4px);background:#ffe1e1;border-color:#ee8888}75%{transform:translateX(4px)}}.vowel-table th{padding:10px 3px}.vowel-table td{height:62px}.vowel-table .slot-button{height:52px;font-size:21px}.vowel-table .slot-button::after{inset:6px}.game-hint{text-align:center;color:#9795a8;font-size:10px;padding:10px 0}.game-hint span{color:#a59ce9;margin-right:4px}

.screen-heading{text-align:center;padding:28px 0 20px}.screen-heading .back-button{display:block;margin:0 auto 16px}.screen-heading h1{font-size:32px;line-height:1.2;margin:7px 0;color:#252344}.screen-heading p{font-size:12px;color:#88869a;margin:7px}.ranking-panel{max-width:670px;margin:0 auto 25px;padding:20px}.ranking-tabs{display:flex;gap:8px}.ranking-tab{flex:1;border:1px solid #e5e2f1;border-radius:11px;padding:10px;background:#fff;color:#77758f;font-size:12px}.ranking-tab.active{background:#efedff;border-color:#c5bffd;color:#594cc9;font-weight:bold}.ranking-updated{text-align:right;color:#a3a1b2;font-size:10px;padding:14px 2px 8px}.ranking-list{min-height:160px}.rank-row{display:grid;grid-template-columns:42px 1fr 80px;align-items:center;border-top:1px solid #f0eff5;padding:12px 8px;gap:10px}.rank-number{width:27px;height:27px;border-radius:9px;background:#f2f1f7;color:#88859c;display:grid;place-items:center;font-size:11px;font-weight:bold}.rank-row:nth-child(1) .rank-number{background:#fff1d9;color:#c98a2b}.rank-row:nth-child(2) .rank-number{background:#f1f1f5;color:#727284}.rank-row:nth-child(3) .rank-number{background:#f8e8de;color:#bb795c}.rank-name{font-size:12px}.rank-name small{display:block;color:#a09eaf;font-size:10px;margin-top:2px}.rank-score{text-align:right;font-size:14px;font-weight:bold;color:#4941a4}.empty-ranking{text-align:center;padding:44px 10px;color:#a09eaf;font-size:12px}

.result-screen{max-width:520px;margin:auto;padding:28px 0}.result-card{text-align:center;padding:29px 34px 26px}.result-kicker{color:#9993d0;font-weight:bold;letter-spacing:.18em;font-size:10px}.result-emblem{width:54px;height:54px;display:grid;place-items:center;margin:13px auto 4px;border-radius:18px;background:#f2f0ff;color:#7769e5;font-size:25px}.result-card h1{font-size:24px;margin:4px 0}.result-mode{color:#8a879f;font-size:11px;margin:3px 0 17px}.final-score{padding:14px;border-radius:15px;background:#f8f7ff}.final-score span{display:block;color:#9693a8;font-size:10px}.final-score strong{font-size:36px;line-height:1.3;color:#5144ca}.result-stats{display:grid;grid-template-columns:repeat(3,1fr);padding:15px 0 10px}.result-stats div+div{border-left:1px solid #eeedf3}.result-stats strong,.result-stats span{display:block}.result-stats strong{font-size:18px;color:#373552}.result-stats span{font-size:10px;color:#9a98aa;margin-top:2px}.save-status{font-size:10px;color:#9996aa;min-height:17px}.result-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:17px}.primary-button,.secondary-button,.danger-button{min-height:46px;border-radius:12px;padding:0 16px;font-size:13px;font-weight:bold}.primary-button{border:1px solid #6254df;background:linear-gradient(135deg,#7969f1,#5b4dcf);color:#fff;box-shadow:0 6px 14px #6254df33}.primary-button:hover{filter:brightness(1.04);transform:translateY(-1px)}.secondary-button{border:1px solid #e2e0ed;background:#fff;color:#67647e}.danger-button{border:1px solid #f2c9cb;background:#fff2f2;color:#c75c65}.dialog-card{width:min(460px,calc(100vw - 30px));border:1px solid #eceaf5;border-radius:22px;padding:24px 25px 23px;color:var(--ink);box-shadow:0 25px 90px #1716383d}.dialog-card::backdrop{background:#19173575;backdrop-filter:blur(4px)}.dialog-top{display:flex;align-items:center;justify-content:space-between}.icon-button{border:0;background:#f3f2f8;border-radius:50%;width:30px;height:30px;color:#76748a;font-size:20px;line-height:1}.dialog-card h2{font-size:23px;margin:5px 0 15px}.howto-list{list-style:none;counter-reset:howto;padding:0;margin:0;display:grid;gap:13px}.howto-list li{counter-increment:howto;position:relative;padding-left:37px}.howto-list li::before{content:counter(howto);position:absolute;left:0;top:0;width:26px;height:26px;display:grid;place-items:center;border-radius:9px;background:#f0efff;color:#6558d3;font-weight:bold;font-size:12px}.howto-list b,.howto-list span{display:block}.howto-list b{font-size:12px}.howto-list span{font-size:10px;line-height:1.6;color:#89869d;margin-top:2px}.howto-warning{display:flex;align-items:center;gap:8px;background:#fff8ed;color:#9f7945;font-size:10px;padding:10px 12px;border-radius:10px;margin:17px 0}.howto-warning span{width:17px;height:17px;display:grid;place-items:center;border-radius:50%;background:#f5d49c;color:white;font-weight:bold}.start-button{width:100%;display:flex;align-items:center;justify-content:center;gap:8px}.compact-dialog h2{font-size:18px;margin:0 0 6px}.compact-dialog p{font-size:12px;color:#8c899f}.dialog-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:18px}

.slot-button.clue{display:inline-grid;place-items:center;width:auto;min-width:34px;height:32px;padding:0 5px}
@media(max-width:760px){.app-shell{padding:0 16px}.site-header{height:70px}.home-screen{grid-template-columns:1fr;gap:17px;padding:30px 0 25px;max-width:500px}.hero-copy{text-align:center;padding:5px 0}.hero-copy h1{font-size:39px;margin:10px 0 9px}.hero-copy p{font-size:12px}.setup-card{padding:21px 18px}.home-note{margin-top:0}.game-screen{padding-top:2px}.hud{grid-template-columns:75px 1fr 94px;gap:9px;padding:12px 13px}.hud-stat strong{font-size:19px}.board-wrap{padding:9px 6px}.phoneme-table{border-spacing:2px}.phoneme-table th{font-size:8px;padding:6px 1px;letter-spacing:-.04em}.phoneme-table td{height:39px;padding:1px}.phoneme-table .group-cell{width:12%}.phoneme-table .type-cell{width:9%}.slot-button{height:33px;font-size:15px}.vowel-table .group-cell{width:20%}.vowel-table td{height:54px}.vowel-table .slot-button{height:45px}.question-card{padding:11px 11px 9px}.target-letter{font-size:59px}.ranking-panel{padding:14px}.result-card{padding:25px 19px}}
@media(max-width:380px){.identity-fields{grid-template-columns:1fr;gap:9px;margin:15px 0 20px}.identity-fields input{height:39px}.hero-copy h1{font-size:35px}.hud{grid-template-columns:65px 1fr 82px}.hud-stat strong{font-size:17px}.phoneme-table th{font-size:7px}.phoneme-table td{height:35px}.slot-button{height:30px;font-size:13px}.phoneme-table .group-cell{width:11%}.phoneme-table .type-cell{width:9%}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* Completion meter and stronger touch feedback */
.completion-card{display:grid;grid-template-columns:1fr auto;grid-template-areas:"heading count" "track track";align-items:center;gap:6px 12px;padding:10px 16px;margin:-3px 0 13px;border-radius:15px;box-shadow:0 8px 24px rgba(42,34,101,.055)}
.completion-heading{grid-area:heading;display:flex;align-items:baseline;gap:8px;color:#77758d;font-size:10px}
.completion-heading strong{color:#5a4dcc;font-size:15px}
.completion-count{grid-area:count;color:#9a98aa;font-size:9px;text-align:right}
.completion-track{grid-area:track;height:7px;border-radius:9px;background:#eeedf5;overflow:hidden}
.completion-track i{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#7d6cf0,#62c8ad);transition:width .25s ease}
.slot-button{height:40px;min-height:40px;border-color:#c9c2f6;border-bottom-width:5px;background:linear-gradient(180deg,#fff 0%,#eae7ff 100%);box-shadow:0 3px 0 #d8d2ff,0 5px 8px rgba(79,66,196,.10);font-size:19px;font-weight:bold;touch-action:manipulation;user-select:none;-webkit-user-select:none}
.slot-button::after{inset:5px;border-color:#c3bcf1}
.slot-button:hover{background:linear-gradient(180deg,#fdfcff 0%,#ddd8ff 100%);border-color:#9c90eb;box-shadow:0 4px 0 #c8c0fa,0 7px 12px rgba(79,66,196,.16)}
.slot-button:active,.slot-button.pressed{transform:translateY(4px) scale(.96);border-bottom-width:1px;background:#d8d2ff;box-shadow:inset 0 3px 6px rgba(55,43,145,.25);color:#40359f}
.slot-button.clue{height:32px;min-height:32px;border:1px solid #e9e8f0;border-bottom-width:1px;background:#f8f8fb;box-shadow:none}
.placed-letter{display:grid;place-items:center;min-height:36px;width:100%;border:1px solid #c8eade;border-radius:8px;background:linear-gradient(180deg,#effcf7,#dff5ec);color:#267d65;font-size:18px;font-weight:bold}
.placed-flash{animation:placed-in .42s cubic-bezier(.2,.8,.25,1)}
@keyframes placed-in{0%{transform:scale(.72);opacity:.35}65%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}
@media(max-width:760px){.completion-card{padding:9px 12px;margin:-3px 0 10px}.slot-button{height:40px;min-height:40px;font-size:17px}.vowel-table .slot-button{height:44px}.placed-letter{min-height:37px}}
@media(max-width:380px){.slot-button{height:38px;min-height:38px;font-size:15px}.vowel-table .slot-button{height:42px}}

/* Compact, full-screen touch layout for phones and tablets */
@media(max-width:760px){
body.playing{overflow:hidden}
body.playing .site-header,body.playing footer{display:none}
body.playing .app-shell{height:100svh;min-height:100svh;padding:env(safe-area-inset-top) 8px env(safe-area-inset-bottom)}
body.playing main{min-height:0;overflow:hidden}
body.playing .game-screen{position:relative;max-width:900px;width:100%;height:100%;min-height:0;display:flex;flex-direction:column;padding:0 0 2px}
.game-topline{flex:none;min-height:25px;margin:0 0 4px;gap:8px}
.back-button{padding:4px 2px}
.mode-pill{padding:4px 9px;font-size:10px}
.live-label{font-size:8px}
.hud{flex:none;grid-template-columns:1fr 1.5fr;padding:6px 11px;gap:10px;margin-bottom:5px;border-radius:13px}
.hud-stat span,.time-label span{font-size:9px}
.hud-stat strong{font-size:17px;margin-top:0}
.time-label strong{font-size:16px}
.time-track{height:6px;margin-top:4px}
.completion-card{flex:none;grid-template-areas:"heading count" "track track";gap:3px 8px;padding:5px 9px;margin:0 0 5px;border-radius:11px}
.completion-heading{font-size:9px}
.completion-heading strong{font-size:13px}
.completion-count{font-size:8px}
.completion-track{height:5px}
.question-card{flex:none;padding:4px 8px 5px;margin:0 0 5px;border-radius:13px}
.question-label{font-size:9px;gap:6px}
.target-letter{font-size:clamp(37px,10vw,47px);line-height:1;margin:2px 0}
.question-subline{font-size:8px}
.board-wrap{flex:1;min-height:0;padding:4px 3px 3px;display:flex;flex-direction:column}
.board-container{overflow:visible;flex:1;min-height:0}
.board-title{margin:0 1px 2px}
.board-title strong{font-size:10px}
.board-title span{font-size:8px}
.phoneme-table{border-spacing:1px}
.phoneme-table th{font-size:clamp(7px,2vw,9px);padding:2px 1px;line-height:1.05;letter-spacing:-.04em;border-radius:4px}
.phoneme-table td{height:22px;padding:0;border-radius:5px}
.phoneme-table .group-cell{width:12%}
.phoneme-table .type-cell{width:9%}
.slot-button{height:20px;min-height:20px;border-radius:5px;border-bottom-width:3px;font-size:0;padding:0}
.slot-button::after{inset:2px;border-radius:3px}
.slot-button:active,.slot-button.pressed{transform:translateY(2px) scale(.96);border-bottom-width:1px}
.slot-button.clue{height:18px;min-height:18px;min-width:0;padding:0 2px;font-size:10px;border-radius:4px}
.placed-letter{min-height:19px;height:19px;font-size:12px;border-radius:4px;padding:0}
.vowel-table th{padding:3px 1px}
.vowel-table td{height:33px}
.vowel-table .slot-button{height:30px;min-height:30px}
.vowel-table .slot-button.clue{height:28px;min-height:28px}
.game-hint{flex:none;font-size:8px;line-height:1.2;padding:3px 0 0}

}
.result-bonus{min-height:17px;margin:6px 0 0;color:#4e9b7e;font-size:11px;font-weight:bold}

#effects-layer{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:100}
.cell-float{position:fixed;z-index:2;transform:translate(-50%,-50%);white-space:nowrap;border-radius:999px;padding:5px 9px;background:#292651;color:#fff;font-size:12px;font-weight:bold;box-shadow:0 5px 18px #20203a35;animation:float-score 1s ease-out forwards}
.cell-float.wrong{background:#b94c58}
@keyframes float-score{0%{opacity:0;translate:0 8px;scale:.8}15%{opacity:1;translate:0 0;scale:1}100%{opacity:0;translate:0 -42px;scale:.94}}
.emoji-particle{position:fixed;left:var(--x);bottom:-50px;font-size:27px;animation:emoji-launch 1.25s cubic-bezier(.2,.72,.35,1) var(--delay) both}
.emoji-particle.wrong{font-size:23px;animation-duration:.8s}
@keyframes emoji-launch{0%{opacity:0;translate:0 0;rotate:-20deg;scale:.65}12%{opacity:1}100%{opacity:0;translate:var(--drift) -110vh;rotate:30deg;scale:1.15}}
.game-screen::after{content:"";position:fixed;inset:0;z-index:20;pointer-events:none;opacity:0}
.game-screen.feedback-correct::after{background:#53d5a329;animation:screen-flash .4s ease-out}
.game-screen.feedback-wrong::after{background:#f45d702b;animation:screen-flash .4s ease-out}
@keyframes screen-flash{0%{opacity:.9}100%{opacity:0}}
@media(max-width:760px) and (max-height:700px){
  .game-topline{min-height:22px;margin-bottom:2px}
  .hud{padding:4px 9px;margin-bottom:3px}
  .completion-card{padding:3px 8px;margin-bottom:3px}
  .question-card{padding:3px 7px 4px;margin-bottom:3px}
  .target-letter{font-size:38px}
  .phoneme-table td{height:19px}
  .slot-button{height:17px;min-height:17px}
  .slot-button.clue{height:16px;min-height:16px;font-size:9px}
  .placed-letter{height:16px;min-height:16px;font-size:11px}
  .vowel-table td{height:29px}
  .vowel-table .slot-button{height:26px;min-height:26px}
  .vowel-table .slot-button.clue{height:24px;min-height:24px}
  .game-hint{font-size:7px;padding-top:2px}
}

/* Navy Iron tier and clear result labels. */
.iron-choice{background:#1c2d55!important;border-color:#101d3c!important;color:#fff}
.iron-card{background:#29477e!important;border-color:#101d3c!important;color:#fff!important}
.iron-card strong{color:#fff!important}.iron-card small{color:#e0e8fa!important}
.mode-difficulty-tab.iron-tab.active,.mode-pill.iron-theme{background:#243d70!important;color:#fff!important;border-color:#101d3c!important}
.ranking-screen[data-difficulty="iron"] .ranking-panel{border-color:#243d70;box-shadow:7px 7px 0 #101d3c}
.result-mode{display:inline-block;padding:6px 12px;border:2px solid #101014;border-radius:8px;font-weight:900}
.result-mode.iron-theme{background:#243d70!important;color:#fff!important;border-color:#101d3c!important}
.result-mode.bronze-theme{background:#a85b1e!important;color:#fff!important;border-color:#101014!important}
.result-mode.silver-theme{background:#d7dde1!important;color:#101014!important;border-color:#101014!important}
.result-mode.gold-theme{background:#ffdf32!important;color:#101014!important;border-color:#101014!important}
.average-impact{margin:10px 0 0;padding:9px 10px;border:2px solid #101014;border-radius:8px;background:#e6f7ef;color:#101014;font-size:11px;font-weight:900;line-height:1.5}
.skip-ranking{width:100%;margin-top:9px}
@media(prefers-reduced-motion:reduce){.emoji-particle,.cell-float{animation-duration:.01ms!important}}

.result-rank{margin:8px 0 0;padding:8px 10px;border:2px solid #101014;border-radius:8px;background:#ffeb3b;color:#101014;font-size:13px;font-weight:900}
.howto-mode-line,.howto-first-line{align-items:center;text-align:left!important}
.howto-mode-line{grid-template-columns:1fr auto!important}
.howto-first-line{grid-template-columns:1fr auto!important}
.howto-mode-label{padding:4px 9px;border:2px solid #101014;border-radius:7px;font-size:12px!important}
.howto-mode-label.iron-theme{background:#243d70!important;color:#fff!important;border-color:#101d3c!important}
.howto-mode-label.bronze-theme{background:#a85b1e!important;color:#fff!important}
.howto-mode-label.silver-theme{background:#d7dde1!important;color:#101014!important}
.howto-mode-label.gold-theme{background:#ffdf32!important;color:#101014!important}
.howto-mode-label.platinum-theme{background:#65dfbd!important;color:#073d31!important;border-color:#08775f!important}
.howto-first-line>div{display:grid;gap:3px;min-width:0}
.howto-first-line small{font-size:10px;font-weight:700;overflow-wrap:anywhere}
.howto-first-line #howto-first{font-size:16px!important;white-space:nowrap}
@media(max-width:420px){.howto-mode-line{grid-template-columns:1fr!important;justify-items:center}.howto-first-line #howto-first{font-size:15px!important}}

/* High-contrast primary-color arcade theme */
:root{font-family:'Noto Sans KR',system-ui,sans-serif;color:#101014;background:#ffe600;--ink:#101014;--muted:#30303a;--purple:#304ffe;--purple-deep:#1a237e;--line:#101014;--panel:#fff;--coral:#ff1744;--mint:#00c853;--shadow:7px 7px 0 #101014}
body{font-weight:700;background-color:#ffe600;background-image:linear-gradient(#1010140a 1px,transparent 1px),linear-gradient(90deg,#1010140a 1px,transparent 1px);background-size:28px 28px}
button,input{font-weight:700}
.panel{background:#fff;border:3px solid #101014;border-radius:16px;box-shadow:7px 7px 0 #101014}
.site-header{font-weight:700}
.brand{color:#101014}
.brand-mark{background:#ff1744;border:3px solid #101014;border-radius:12px;box-shadow:3px 3px 0 #101014}
.brand strong{font-weight:900}
.brand small{color:#30303a;font-weight:700}
.teacher-link{color:#101014;background:#00e5ff;border:2px solid #101014;border-radius:8px;box-shadow:3px 3px 0 #101014;font-weight:900}
.teacher-link:hover{color:#fff;background:#304ffe;border-color:#101014}
.eyebrow{color:#d50000;font-weight:900}
.hero-copy h1{color:#101014;font-weight:900}
.hero-copy h1 span{color:#304ffe;text-shadow:1px 1px #fff}
.hero-copy p{color:#25252e;font-weight:700}
.setup-card{background:#fff}
.section-title h2,.howto-list b,.score-rules h3{font-weight:900}
.step-number{background:#00e5ff;color:#101014;border:2px solid #101014;border-radius:8px;font-weight:900}
.section-title p{color:#30303a;font-weight:700}
.identity-fields label{color:#101014;font-weight:900}
.identity-fields input{background:#fff;border:2px solid #101014;border-radius:8px;color:#101014;font-weight:700}
.identity-fields input:focus{outline:3px solid #304ffe}
.mode-card{border:3px solid #101014;border-radius:12px;background:#fff;box-shadow:4px 4px 0 #101014;color:#101014;font-weight:900}
.mode-card:hover{border-color:#101014;box-shadow:6px 6px 0 #101014;transform:translate(-2px,-2px)}
.mode-card:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #101014}
.mode-icon{background:#304ffe;color:#fff;border:2px solid #101014;border-radius:9px;font-family:'Noto Sans KR',sans-serif}
.vowel-card .mode-icon{background:#ff1744;color:#fff}
.mode-copy strong{font-weight:900}
.mode-copy small{color:#30303a;font-weight:700}
.mode-arrow{color:#d50000;font-weight:900}
.text-button{color:#1a237e;font-weight:900}
.home-note{color:#101014;font-weight:900}
.game-topline,.back-button,.mode-pill,.live-label,.hud,.completion-card,.question-card,.board-wrap,.game-hint{font-weight:800}
.back-button{color:#101014;font-weight:900}
.back-button:hover{color:#d50000}
.mode-pill{background:#ff1744;color:#fff;border:2px solid #101014;border-radius:8px;font-weight:900}
.live-label{color:#101014;font-weight:900}
.live-label i,.pulse-dot{background:#00c853;box-shadow:0 0 0 3px #101014}
.hud{background:#00e5ff;border-radius:12px}
.hud-stat span,.time-label span{color:#101014;font-weight:900}
.hud-stat strong,.time-label strong{color:#101014;font-weight:900}
.time-label strong small,.hud-stat small{color:#30303a;font-weight:900}
.time-track{background:#fff;border:2px solid #101014}
.time-track i{background:#00c853}
.time-track i.warning{background:#ff1744}
.completion-card{background:#fff}
.completion-heading{color:#101014;font-weight:900}
.completion-heading strong{color:#d50000;font-weight:900}
.completion-count{color:#30303a;font-weight:900}
.completion-track{background:#d9d9d9;border:2px solid #101014}
.completion-track i{background:#304ffe}
.question-card{background:#ffeb3b;border-radius:12px}
.question-label,.question-subline{color:#101014;font-weight:900}
.target-letter{font-family:'Noto Sans KR',sans-serif;font-weight:700;color:#d50000;text-shadow:2px 2px 0 #101014}
.question-subline #feedback.correct{color:#007a32;font-weight:900}
.question-subline #feedback.wrong{color:#d50000;font-weight:900}
.board-wrap{background:#fff}
.board-title strong{color:#101014;font-weight:900}
.board-title span{color:#30303a;font-weight:700}
.phoneme-table{color:#101014;font-weight:900}
.phoneme-table th{background:#00e5ff;border:2px solid #101014;color:#101014;font-weight:900}
.phoneme-table .axis-cell{background:#101014;color:#fff}
.phoneme-table .group-cell{background:#ff1744;color:#fff}
.phoneme-table .type-cell{background:#ffeb3b;color:#101014}
.phoneme-table td{background:#fff;border:2px solid #101014}
.phoneme-table .void-cell{background:#d9d9d9;border:2px solid #101014}
.slot-button{font-family:'Noto Sans KR',sans-serif;font-weight:600;background:#304ffe;color:#fff;border:2px solid #101014;border-bottom-width:5px;border-radius:7px;box-shadow:0 3px 0 #101014}
.slot-button::after{border-color:#fff}
.slot-button:hover{background:#00e5ff;color:#101014;border-color:#101014;box-shadow:0 4px 0 #101014}
.slot-button:active,.slot-button.pressed{background:#ff1744;color:#fff;box-shadow:inset 0 3px 0 #101014}
.slot-button.clue{font-family:'Noto Sans KR',sans-serif;font-weight:600;background:#ffeb3b;color:#101014;border:2px solid #101014;box-shadow:2px 2px 0 #101014}
.placed-letter{font-family:'Noto Sans KR',sans-serif;font-weight:600;background:#00c853;color:#101014;border:2px solid #101014}
.game-hint{color:#101014;font-weight:800}
.game-hint span{color:#d50000}
.ranking-panel,.result-card,.completed-board{background:#fff}
.ranking-tab{background:#fff;color:#101014;border:2px solid #101014;font-weight:900}
.ranking-tab.active{background:#304ffe;color:#fff;border-color:#101014}
.ranking-updated,.rank-name small,.empty-ranking{color:#30303a;font-weight:700}
.rank-row{border-color:#101014}
.rank-number{background:#ffeb3b;color:#101014;border:2px solid #101014}
.rank-row:nth-child(1) .rank-number{background:#ff1744;color:#fff}
.rank-row:nth-child(2) .rank-number{background:#00e5ff;color:#101014}
.rank-row:nth-child(3) .rank-number{background:#ff9100;color:#101014}
.rank-name,.rank-score{color:#101014;font-weight:900}
.result-kicker{color:#d50000;font-weight:900}
.result-emblem{background:#ffeb3b;color:#101014;border:2px solid #101014}
.result-card h1,.completed-board h2{color:#101014;font-weight:900}
.result-mode,.result-stats span,.final-score span{color:#30303a;font-weight:800}
.final-score{background:#00e5ff;border:3px solid #101014;border-radius:10px}
.final-score strong{color:#101014;font-weight:900}
.result-stats strong{color:#101014;font-weight:900}
.result-bonus{color:#007a32;font-weight:900}
.primary-button,.secondary-button,.danger-button{border:3px solid #101014;border-radius:9px;box-shadow:4px 4px 0 #101014;font-weight:900}
.primary-button{background:#304ffe;color:#fff}
.primary-button:hover{filter:none;background:#1a237e;transform:translate(-1px,-1px);box-shadow:5px 5px 0 #101014}
.secondary-button{background:#00e5ff;color:#101014}
.danger-button{background:#ff1744;color:#fff}
.dialog-card{background:#fff;border:3px solid #101014;border-radius:14px;box-shadow:8px 8px 0 #101014;color:#101014;max-height:calc(100dvh - 24px);overflow-y:auto}
.dialog-card::backdrop{background:#101014cc;backdrop-filter:none}
.dialog-card h2{font-weight:900}
.howto-list{gap:9px}
.howto-list li::before{background:#ffeb3b;color:#101014;border:2px solid #101014}
.howto-list b{font-size:13px}
.howto-list span{color:#30303a;font-weight:700}
.howto-warning{background:#ff1744;color:#fff;border:2px solid #101014;border-radius:8px;font-weight:900}
.howto-warning span{background:#ffeb3b;color:#101014}
.score-rules{padding:10px 12px;margin:12px 0;background:#00e5ff;border:3px solid #101014;border-radius:10px;box-shadow:4px 4px 0 #101014}
.score-rules h3{margin:0 0 6px;font-size:14px}
.score-rules ul{margin:0;padding-left:17px;display:grid;gap:4px}
.score-rules li,.score-rules strong{font-size:10px;color:#101014;font-weight:800}
.score-rules strong{font-weight:900}
.start-button{background:#ff1744}
.completed-board{max-width:720px;margin:18px auto;padding:14px}
.result-screen.has-completed-board{max-width:900px}
.completed-board h2{margin:0 0 10px;font-size:17px}
#completed-board-container{width:100%;overflow-x:auto}
#completed-board-container .board-container{overflow-x:auto}
#completed-board-container .phoneme-table{min-width:470px}
.no-phoneme-mark{display:grid;place-items:center;min-height:36px;font-size:14px;font-weight:900;color:#101014}
.no-phoneme-note{margin:8px 0 0;color:#30303a;font-size:10px;font-weight:800}
@media(max-width:760px){.completed-board{margin:14px 7px;padding:11px}.completed-board .board-title span{font-size:8px}.completed-board .phoneme-table{min-width:430px}.result-card{border-radius:13px}.score-rules li,.score-rules strong{font-size:9px}}

/* Noto Sans KR is requested at page load so play begins with the same font. */
body,button,input{font-family:'Noto Sans KR',system-ui,sans-serif}
.font-preload-sample{position:fixed;left:-10000px;top:0;white-space:nowrap;visibility:hidden;font-family:'Noto Sans KR',sans-serif;font-weight:700;font-size:16px}
.phoneme-table{font-family:'Noto Sans KR',sans-serif;font-weight:500}
.phoneme-table th{border-width:1px;font-weight:600}
.phoneme-table .axis-cell,.phoneme-table .group-cell,.phoneme-table .type-cell{font-weight:600}
.phoneme-table td{border-width:1px}
.slot-button{font-family:'Noto Sans KR',sans-serif;font-weight:600;border-width:1px;border-bottom-width:2px;box-shadow:0 1px 0 #101014}
.slot-button::after{display:none}
.slot-button:hover{box-shadow:0 2px 0 #101014}
.slot-button:active,.slot-button.pressed{transform:translateY(1px);border-bottom-width:1px;box-shadow:inset 0 1px 2px #10101455}
.clue-letter,.placed-letter{display:grid;place-items:center;width:100%;min-height:1em;padding:0;border:0;border-radius:0;background:transparent;color:#101014;font-family:'Noto Sans KR',sans-serif;font-size:15px;line-height:1.1;font-weight:600}
.phoneme-table td.filled-cell{background:#00c853!important;color:#101014}
.filled-cell.correct-fill{animation:cell-green-in .22s ease-out}
@keyframes cell-green-in{from{filter:brightness(1.18)}to{filter:brightness(1)}}
.placed-letter{height:auto;animation:letter-fill .2s ease-out}
@keyframes letter-fill{from{transform:scale(.92);opacity:.7}to{transform:scale(1);opacity:1}}
.slot-button.clue{border:0;box-shadow:none;background:transparent}
.slot-button.clue::after{display:none}
button:focus-visible,input:focus-visible{outline:3px solid #304ffe;outline-offset:2px}
@media(max-width:760px){.clue-letter,.placed-letter{min-height:1em;height:auto;font-size:12px}.phoneme-table .filled-cell{height:22px}}

.difficulty-select{margin-top:20px;padding-top:16px;border-top:2px solid #101014}
.difficulty-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px}
.difficulty-heading .section-title{margin:0}
.difficulty-heading .section-title h2{margin:0}
.change-category{padding:6px 0;color:#304ffe;font-size:11px;white-space:nowrap}
.difficulty-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.difficulty-choice{min-width:0;padding:9px;border:3px solid #101014;border-radius:11px;box-shadow:4px 4px 0 #101014}
.bronze-choice{background:#b87333}
.silver-choice{background:#c5cbd0}
.difficulty-card{width:100%;min-height:72px;display:flex;align-items:center;gap:9px;padding:9px;border:2px solid #101014;border-radius:8px;text-align:left;color:#101014}
.bronze-card{background:#f4c27a}
.silver-card{background:#f4f6f7}
.difficulty-card:hover{filter:brightness(1.06);transform:translateY(-1px)}
.difficulty-card:active{transform:translateY(1px)}
.difficulty-card>span:not(.mode-arrow){flex:1;min-width:0}
.difficulty-card strong,.difficulty-card small{display:block}
.difficulty-card strong{font-size:16px;font-weight:900}
.difficulty-card small{margin-top:3px;font-size:9px;line-height:1.35;font-weight:700}
.difficulty-medal{font-size:24px;line-height:1}
.mini-ranking{margin-top:8px;padding:7px 8px;background:#fff;border:2px solid #101014;border-radius:7px}
.mini-ranking h3{margin:0 0 4px;color:#101014;font-size:10px;font-weight:900}
.mini-ranking ol{display:grid;gap:3px;margin:0;padding:0;list-style:none}
.mini-ranking li{display:grid;grid-template-columns:17px minmax(0,1fr) auto auto;align-items:center;gap:4px;color:#101014;font-size:9px;font-weight:700}
.mini-ranking li>b{color:#304ffe;font-weight:900}
.mini-ranking li>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mini-ranking li>small{color:#555;font-size:8px}
.mini-ranking li>strong{font-size:9px;font-weight:900}
.mini-ranking .mini-ranking-empty{grid-template-columns:1fr;color:#555;font-size:9px}
.target-instruction{margin-top:-9px;color:#d50000;font-size:11px;font-weight:800;text-align:center}
.ranking-tabs-all{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
.ranking-tabs-all .ranking-tab{min-width:0;padding:8px 5px;font-size:10px}
@media(max-width:760px){.difficulty-cards{grid-template-columns:1fr;gap:9px}.difficulty-choice{padding:7px}.difficulty-card{min-height:61px}.mini-ranking{padding:6px 8px}.ranking-tabs-all{grid-template-columns:repeat(2,minmax(0,1fr))}}

footer{display:flex;flex-direction:column;gap:4px}
.mode-pill.bronze-theme{background:#a85b1e;color:#fff;border-color:#101014;box-shadow:2px 2px 0 #101014}
.mode-pill.silver-theme{background:#d7dde1;color:#101014;border-color:#101014;box-shadow:2px 2px 0 #101014}
.ranking-panel{border-width:4px;transition:border-color .18s,box-shadow .18s}
.ranking-screen[data-difficulty="bronze"] .ranking-panel{border-color:#a85b1e;box-shadow:7px 7px 0 #7a3f15}
.ranking-screen[data-difficulty="silver"] .ranking-panel{border-color:#89949b;box-shadow:7px 7px 0 #59666f}
.ranking-tabs-all .ranking-tab[data-ranking-mode$="-bronze"].active,.teacher-toolbar .ranking-tab[data-mode$="-bronze"].active{background:#a85b1e;color:#fff;border-color:#101014}
.ranking-tabs-all .ranking-tab[data-ranking-mode$="-silver"].active,.teacher-toolbar .ranking-tab[data-mode$="-silver"].active{background:#d7dde1;color:#101014;border-color:#101014}
.score-guide-button{display:block;width:100%;margin:13px 0 3px;padding:10px 12px;border:3px solid #101014;border-radius:9px;background:#ffeb3b;color:#101014;font-weight:900;box-shadow:4px 4px 0 #101014}
.score-guide-button:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 #101014}
.ranking-score-dialog{width:min(470px,calc(100vw - 24px))}
.ranking-score-highlight{margin:8px 0 11px;padding:12px;border:3px solid #101014;border-radius:9px;background:#ffeb3b;text-align:center;font-size:16px;font-weight:900}
.ranking-score-list{display:grid;gap:8px;margin:0 0 15px;padding:0;list-style:none}
.ranking-score-list li{display:grid;gap:3px;padding:9px 11px;border:2px solid #101014;border-radius:8px;background:#fff}
.ranking-score-list li:first-child{background:#00e5ff}
.ranking-score-list strong{font-size:13px;font-weight:900}
.ranking-score-list span{font-size:11px;line-height:1.45;font-weight:700}
.ranking-score-dialog>.primary-button{width:100%;min-height:40px}
.phoneme-table .voice-group-cell{width:8%;padding:2px 1px;background:#304ffe;color:#fff;font-size:9px;line-height:1.2;font-weight:900;overflow-wrap:anywhere}
.phoneme-table .group-cell{width:11%}
.phoneme-table .type-cell{width:9%}
@media(max-width:760px){
  .phoneme-table .voice-group-cell{width:8%;font-size:7px;line-height:1.05;letter-spacing:-.07em}
  .phoneme-table .group-cell{width:10%}
  .phoneme-table .type-cell{width:8%}
  .score-guide-button{margin-top:9px;padding:8px 10px;font-size:11px}
  .ranking-score-highlight{font-size:14px}
  .ranking-score-list span{font-size:10px}
}

/* Gold axis stage and gold tier */
.mode-pill.gold-theme{background:#ffdf32;color:#101014;border-color:#101014;box-shadow:2px 2px 0 #101014}
.gold-choice{background:#e8bd16}
.gold-card{background:#ffdf32}
.difficulty-cards{grid-template-columns:1fr}
.difficulty-choice{display:grid;grid-template-columns:minmax(155px,.95fr) minmax(150px,1.05fr);align-items:stretch;gap:8px}
.mini-ranking{margin-top:0}
.ranking-screen[data-difficulty="gold"] .ranking-panel{border-color:#d6a900;box-shadow:7px 7px 0 #9a7600}
.ranking-tabs-all{grid-template-columns:repeat(3,minmax(0,1fr))}
.ranking-tabs-all .ranking-tab[data-ranking-mode$="-gold"].active,.teacher-toolbar .ranking-tab[data-mode$="-gold"].active{background:#ffdf32;color:#101014;border-color:#101014}
.target-letter.axis-target{font-size:clamp(20px,5vw,31px);line-height:1.2;font-weight:900;white-space:nowrap;text-shadow:none;margin:5px 0}
.target-instruction{margin:0 0 3px;color:#304ffe;font-size:10px;font-weight:800;text-align:center}
.phoneme-table .axis-target-cell{background:#00e5ff;color:#101014;font-weight:800;border:2px solid #101014}
.phoneme-table .voice-group-cell.axis-target-cell{background:#304ffe;color:#fff}
.axis-button{width:100%;height:100%;min-height:26px;padding:2px;border:2px solid #101014;border-bottom-width:4px;border-radius:6px;background:#00e5ff;color:#101014;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.axis-button:hover{background:#00b8d4}
.axis-button:active,.axis-button.pressed{transform:translateY(2px);border-bottom-width:2px;box-shadow:inset 0 2px 3px #10101455}
.phoneme-table .axis-filled-cell{background:#ff9100!important;color:#101014!important;border:2px solid #101014;font-weight:900}
.phoneme-table .axis-correct-fill{animation:axis-fill-in .25s ease-out}
@keyframes axis-fill-in{from{filter:brightness(1.3);transform:scale(.96)}to{filter:brightness(1);transform:scale(1)}}
.axis-answer{display:grid;place-items:center;min-height:1em;padding:0 1px;font-size:inherit;line-height:1.1;font-weight:800;overflow-wrap:anywhere}
.phoneme-table .phoneme-locked{background:#eee;border:1px solid #aaa;position:relative}
.phoneme-table .phoneme-locked::after{content:"🔒";font-size:11px;opacity:.55}
@media(max-width:760px){
  .difficulty-choice{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px;padding:6px}
  .difficulty-card{min-height:64px;padding:6px}
  .difficulty-card strong{font-size:14px}
  .difficulty-card small{font-size:8px}
  .mini-ranking{padding:5px 6px}
  .mini-ranking li{grid-template-columns:12px minmax(0,1fr) auto auto;gap:2px;font-size:8px}
  .mini-ranking li>small{font-size:7px}
  .mini-ranking li>strong{font-size:8px}
  .ranking-tabs-all{grid-template-columns:repeat(2,minmax(0,1fr))}
  .phoneme-table .axis-target-cell{font-size:7px;line-height:1.05;padding:3px 1px}
  .axis-button{min-height:20px;border-bottom-width:3px}
  .phoneme-table .phoneme-locked::after{font-size:8px}
  .phoneme-table .voice-group-cell{font-size:7px}
}

/* Flat in-game panels with strong outlines and clearer meters */
.identity-note{margin:0 0 18px;padding:8px 10px;border:2px solid #101014;border-radius:8px;background:#ffeb3b;color:#101014;font-size:10px;font-weight:800}
.mode-average{margin:0 0 4px;color:#101014;font-size:8px;font-weight:900}
.howto-mode-stats{display:flex;justify-content:space-between;gap:8px;margin:0 0 11px;padding:10px;border:3px solid #101014;border-radius:9px;background:#00e5ff;color:#101014;font-size:11px;font-weight:900}
.howto-mode-stats strong{font-weight:900}
.rank-identity-dialog{width:min(430px,calc(100vw - 24px))}
.rank-identity-dialog>p{margin:6px 0 12px;color:#30303a;font-size:12px;line-height:1.55;font-weight:700}
.rank-score-message{padding:9px 11px;border:3px solid #101014;border-radius:8px;background:#ffeb3b;color:#101014!important;font-weight:900!important;text-align:center}
.rank-identity-dialog label{display:block;margin:10px 0;color:#101014;font-size:11px;font-weight:900}
.rank-identity-dialog input{display:block;width:100%;height:42px;margin-top:5px;padding:0 10px;border:2px solid #101014;border-radius:8px;background:#fff;color:#101014}
.rank-identity-error{min-height:18px;margin:5px 0 10px!important;color:#d50000!important;font-size:10px!important;font-weight:900!important}
.rank-identity-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.rank-identity-actions button{min-height:42px;font-size:11px}
.game-screen .panel{box-shadow:none}
.game-screen .mode-pill,.game-screen .slot-button,.game-screen .axis-button{box-shadow:none}
.game-screen .slot-button{border-bottom-width:1px}
.game-screen .slot-button:hover,.game-screen .slot-button:active,.game-screen .slot-button.pressed{box-shadow:none;transform:scale(.97)}
.game-screen .axis-button{border-bottom-width:2px}
.game-screen .axis-button:active,.game-screen .axis-button.pressed{box-shadow:none;transform:scale(.97)}
.game-screen .hud{grid-template-columns:1fr}
.game-screen .time-stat{width:100%}
.game-screen .time-track{height:14px;margin-top:7px;border:2px solid #101014}
.game-screen .completion-track{height:12px;border:2px solid #101014}
.score-display{display:flex;flex:none;align-items:center;justify-content:center;gap:10px;min-height:54px;margin-top:5px;padding:5px 12px;border-radius:11px;background:#00e5ff;color:#101014}
.score-display>span:first-child{font-size:12px;font-weight:900}
.score-display strong{font-size:clamp(23px,7vw,34px);line-height:1;font-weight:900;font-variant-numeric:tabular-nums}
.score-display #score-combo{min-width:72px;color:#d50000;font-size:11px;font-weight:900}
.score-pop{animation:score-pop .32s cubic-bezier(.2,1.7,.4,1)}
@keyframes score-pop{50%{transform:scale(1.25);color:#d50000}}
.confetti-particle{position:fixed;z-index:3;width:8px;height:13px;border:1px solid #101014;background:var(--confetti-color);animation:confetti-pop 1.35s cubic-bezier(.12,.7,.24,1) var(--confetti-delay) both;pointer-events:none}
@keyframes confetti-pop{0%{opacity:1;translate:0 0;rotate:0deg;scale:.6}15%{scale:1.25}100%{opacity:0;translate:var(--confetti-x) var(--confetti-y);rotate:var(--confetti-rotate);scale:.75}}
.game-screen.feedback-correct::after{background:radial-gradient(circle at 50% 45%,#ffeb3b77 0,transparent 48%),#00e5ff32;animation:screen-flash .65s ease-out}
.cell-float{box-shadow:none;border:2px solid #101014}
.cell-float.correct{background:#ffeb3b;color:#101014}
@media(max-width:760px){
  .game-screen .hud{grid-template-columns:1fr;padding:6px 10px}
  .game-screen .time-track{height:13px;margin-top:6px}
  .game-screen .completion-track{height:11px}
  .score-display{min-height:45px;margin-top:3px}
  .score-display>span:first-child{font-size:10px}
  .score-display #score-combo{min-width:62px;font-size:9px}
  .howto-mode-stats{font-size:10px;padding:8px}
  .rank-identity-actions{grid-template-columns:1fr}
}

/* Keep all screens flat while retaining the bold outlines. */
:root{--shadow:none}
*,*::before,*::after{box-shadow:none!important;text-shadow:none!important}
button:hover,.mode-card:hover,.difficulty-card:hover,.primary-button:hover,.score-guide-button:hover,.teacher-link:hover{transform:none!important}
.mode-card:active,.difficulty-card:active,.primary-button:active,.secondary-button:active,.danger-button:active,.score-guide-button:active{transform:scale(.985)!important}
.panel,.setup-card,.ranking-panel,.result-card,.completed-board,.dialog-card,.difficulty-choice,.mini-ranking,.score-rules,.score-guide-button,.teacher-link,.brand-mark,.mode-card,.difficulty-card,.primary-button,.secondary-button,.danger-button,.mode-pill{box-shadow:none!important}
.howto-mode-stats{display:grid;grid-template-columns:1fr;gap:10px;padding:0;border:0;background:transparent;color:#101014}
.howto-mode-stats>div{display:grid;gap:4px;min-width:0;padding:12px 10px;border:3px solid #101014;border-radius:9px;background:#00e5ff;text-align:center}
.howto-mode-stats>div:last-child{background:#ffeb3b}
.howto-mode-stats span{font-size:10px;font-weight:900}
.howto-mode-stats strong{font-size:clamp(18px,5vw,25px);line-height:1.2;font-weight:900;overflow-wrap:anywhere}
.score-rules-toggle{width:100%;min-height:38px;margin:0 0 10px;padding:6px 10px;border:2px solid #101014;border-radius:8px;background:#fff;color:#101014;font-size:11px;font-weight:900}
.score-rules{margin:0 0 12px}
.score-rules[hidden]{display:none!important}
.howto-list{gap:8px;margin-bottom:12px}
.howto-list span{font-size:11px}
.game-screen .slot-button,.game-screen .axis-button{box-shadow:none!important}
.game-screen .slot-button:hover,.game-screen .slot-button:active,.game-screen .slot-button.pressed,.game-screen .axis-button:active,.game-screen .axis-button.pressed{box-shadow:none!important}
@media(max-width:360px){.howto-mode-stats>div{padding:9px 6px}.howto-mode-stats strong{font-size:17px}}

/* Latest game clarity updates. */
.target-letter.axis-target{color:#d50000}
.question-card .question-subline{display:none}
.game-screen .score-display{background:#7c4dff;color:#fff;border-color:#101014}
.game-screen .score-display>span:first-child,.game-screen .score-display>strong{color:#fff}
.game-screen .score-display #score-combo{background:#ff1744;color:#fff}

/* Stronger game feedback and a readable combo meter. */
.game-screen.feedback-correct::after{background:rgba(0,200,83,.48)!important;animation:answer-flash .52s ease-out!important}
.game-screen.feedback-wrong::after{background:rgba(255,23,68,.5)!important;animation:answer-flash .52s ease-out!important}
@keyframes answer-flash{0%{opacity:0}12%{opacity:.95}30%{opacity:.35}48%{opacity:.8}100%{opacity:0}}
.game-screen.feedback-correct .question-card{animation:hit-confirm .3s cubic-bezier(.2,1.5,.4,1)}
.game-screen.feedback-wrong .question-card{animation:hit-shake .32s ease-out}
@keyframes hit-confirm{0%{transform:scale(1)}38%{transform:scale(1.035)}72%{transform:scale(.99)}100%{transform:scale(1)}}
@keyframes hit-shake{0%,100%{transform:translateX(0)}22%{transform:translateX(-7px)}46%{transform:translateX(6px)}70%{transform:translateX(-3px)}}
.score-display #score-combo{display:inline-flex;align-items:center;justify-content:center;min-width:112px;min-height:36px;padding:5px 10px;border:3px solid #101014;border-radius:9px;background:#ff1744;color:#fff;font-size:12px;font-weight:900;line-height:1.1;white-space:nowrap;transform-origin:center}
.score-display #score-combo.combo-pop{animation:combo-rise .42s cubic-bezier(.15,1.8,.3,1)}
.score-display #score-combo.combo-break{background:#101014;color:#ffeb3b;animation:combo-break .38s ease-out}
@keyframes combo-rise{0%{transform:scale(.65) translateY(8px) rotate(-5deg)}55%{transform:scale(1.25) translateY(-3px) rotate(2deg);background:#ffeb3b;color:#101014}100%{transform:scale(1) translateY(0) rotate(0)}}
@keyframes combo-break{0%{transform:scale(1.15)}40%{transform:scale(.8) rotate(-4deg)}100%{transform:scale(1) rotate(0)}}
.howto-score-hint{margin:0 0 10px;padding:8px 10px;border:2px solid #101014;border-radius:8px;background:#ffeb3b;color:#101014;font-size:11px;font-weight:900;text-align:center}
@media(max-width:760px){.score-display #score-combo{min-width:90px;min-height:31px;padding:4px 7px;font-size:10px}.howto-score-hint{font-size:10px}}
/* Iron mode and leaderboard refinements */
.iron-theme{background:#3c4148!important;color:#fff!important;border:2px solid #25292e}
.iron-choice{border-color:#5b6068!important}.iron-card{background:#3c4148!important;border-color:#25292e!important;color:#fff!important}.iron-card strong{color:#fff!important}.iron-card small{color:#e0e2e5!important}.iron-card .difficulty-medal{background:#555b64!important}
.iron-consonant-table td{height:52px;padding:0!important}.iron-consonant-table .slot-button{height:100%;min-height:46px;border-radius:5px}.iron-consonant-table .group-cell{width:19%}
.slot-button{height:100%;min-height:36px;border-radius:6px}
.vowel-table .slot-button{height:100%;min-height:52px}
.rank-row{grid-template-columns:34px minmax(0,1fr) 86px 86px}.rank-time{text-align:right;color:#68657e;font-size:11px;white-space:nowrap}
.ranking-tabs-all{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:14px}.ranking-tabs-all .ranking-tab{min-width:0;padding:9px 5px;font-size:11px}
#open-ranking{display:flex;justify-content:center;align-items:center;gap:10px;width:100%;margin-top:16px;padding:14px;border:2px solid #191919;border-radius:11px;background:#ffeb3b;color:#111;font-size:14px;font-weight:900}
#open-ranking span{font-size:18px}.teacher-settings .iron-order-label{display:block;margin-top:14px}.teacher-settings #iron-order{width:min(100%,520px);height:40px;margin:6px 0;padding:0 10px;border:2px solid #111;border-radius:7px;font-weight:800;letter-spacing:.15em}.teacher-settings small{display:block;color:#777;margin:4px 0}.teacher-settings #reset-status{font-weight:700;color:#267144}
@media(max-width:600px){.ranking-tabs-all{grid-template-columns:repeat(2,minmax(0,1fr))}.rank-row{grid-template-columns:28px minmax(0,1fr) 69px 65px;gap:6px;padding:10px 3px}.rank-time{font-size:10px}.iron-consonant-table .group-cell{width:18%}.iron-consonant-table td{height:42px}.iron-consonant-table .slot-button{min-height:38px}}
.ranking-column-labels{display:grid;grid-template-columns:34px minmax(0,1fr) 86px 86px;gap:10px;padding:0 8px 7px;color:#88869a;font-size:10px;font-weight:700}.ranking-column-labels span:nth-child(n+3){text-align:right}
@media(max-width:600px){.ranking-column-labels{grid-template-columns:28px minmax(0,1fr) 69px 65px;gap:6px;padding:0 3px 6px;font-size:9px}}
/* Compact, two-step mode picker shared by the student leaderboard and teacher records. */
.mode-picker{display:grid;gap:11px;margin:0 0 16px;padding:12px;border:2px solid #101014;border-radius:12px;background:#f4f2ff}
.mode-category-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.mode-category-tab,.mode-difficulty-tab{min-height:42px;border:2px solid #101014;border-radius:8px;background:#fff;color:#101014;font-weight:900}
.mode-category-tab.active{background:#304ffe;color:#fff}
.mode-difficulty-tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}
.mode-difficulty-tab{min-height:40px;padding:6px 3px;font-size:12px}
.mode-difficulty-tab.iron-tab.active{background:#3c4148;color:#fff;border-color:#25292e}
.mode-difficulty-tab.bronze-tab.active{background:#a85b1e;color:#fff}
.mode-difficulty-tab.silver-tab.active{background:#d7dde1;color:#101014}
.mode-difficulty-tab.gold-tab.active{background:#ffdf32;color:#101014}
.mode-difficulty-tab.platinum-tab.active{background:#65dfbd;color:#073d31;border-color:#08775f}
.platinum-choice{background:#8cebd0;border-color:#08775f}
.platinum-card{background:#c9f8eb;border-color:#08775f;color:#073d31}
.platinum-card strong,.platinum-card small{color:#073d31}
.mode-pill.platinum-theme,.result-mode.platinum-theme{background:#65dfbd!important;color:#073d31!important;border-color:#08775f!important}
.ranking-screen[data-difficulty="platinum"] .ranking-panel{border-color:#22b996;box-shadow:7px 7px 0 #08775f}
.platinum-consonant-table,.platinum-vowel-table{width:100%;table-layout:fixed}
.platinum-consonant-table thead th:first-child,.platinum-consonant-table .platinum-row-label{width:26%;font-size:clamp(7px,1.8vw,11px);line-height:1.25}
.platinum-consonant-table thead th:not(:first-child){width:14.8%;font-size:clamp(7px,1.8vw,11px);line-height:1.2}
.platinum-vowel-table thead th:first-child,.platinum-vowel-table .platinum-row-label{width:22%;font-size:clamp(8px,2vw,12px);line-height:1.25}
.platinum-vowel-table thead th:not(:first-child){font-size:clamp(7px,1.8vw,11px);line-height:1.2}
.platinum-consonant-table .slot-button,.platinum-vowel-table .slot-button{width:100%}
.student-ranking-mode{display:grid;gap:9px}
.ranking-panel .mode-picker{margin-bottom:12px}
.record-mode-picker{margin:0 0 13px}
.teacher-page{background:radial-gradient(ellipse at 8% 0%,#e4d8ff 0,transparent 36%),radial-gradient(ellipse at 100% 65%,#f2eaff 0,transparent 40%),#f3edff!important}
.teacher-page .teacher-link{background:#fff;border-color:#c5afe8;color:#422a68}
.teacher-page .brand-mark{font-size:22px}
.teacher-message-banner{grid-column:1/-1;justify-self:stretch;width:100%;overflow:hidden;margin:0 0 -18px;padding:8px 12px;border:2px solid #101014;border-radius:8px;background:#c6ff00;color:#101014}
.teacher-message-track{width:100%;overflow:hidden;white-space:nowrap;font-size:13px;font-weight:900}
.teacher-message-track span{display:inline-block;min-width:max-content;animation:teacher-message-flow 18s linear infinite}
@keyframes teacher-message-flow{from{transform:translateX(100vw)}to{transform:translateX(-105%)}}
.combo-float{position:fixed;z-index:5;transform:translate(-50%,-50%);color:#ff1744;font-size:clamp(34px,9vw,50px);font-weight:1000;line-height:1;white-space:nowrap;text-shadow:2px 2px 0 #fff,-2px -2px 0 #fff,2px -2px 0 #fff,-2px 2px 0 #fff,0 3px 8px #10101480;animation:combo-hit .72s cubic-bezier(.16,1.4,.35,1) forwards}
@keyframes combo-hit{0%{opacity:0;scale:.35;rotate:-9deg;translate:0 16px}30%{opacity:1;scale:1.2;rotate:3deg;translate:0 -4px}68%{opacity:1;scale:1;rotate:0;translate:0 -8px}100%{opacity:0;scale:.9;rotate:0;translate:0 -29px}}
@media(max-width:600px){.mode-picker{padding:9px;gap:8px}.mode-category-tab{min-height:46px;font-size:14px}.mode-difficulty-tabs{gap:5px}.mode-difficulty-tab{min-height:43px;font-size:11px}.teacher-message-banner{margin-top:2px}.teacher-message-track{font-size:12px}}
@media(prefers-reduced-motion:reduce){.teacher-message-track span,.combo-float{animation-duration:.01ms!important}}

/* Fit the full consonant chart during play without letting global button sizes stretch rows. */
body.playing .consonant-table td{height:31px;padding:0!important}
body.playing .consonant-table .filled-cell{height:31px}
body.playing .consonant-table .slot-button{height:27px;min-height:25px;border-radius:5px;border-bottom-width:2px}
@media(max-width:900px){
  body.playing .consonant-table{border-spacing:1px}
  body.playing .consonant-table th{padding:3px 1px;line-height:1.05}
  body.playing .consonant-table td{height:26px}
  body.playing .consonant-table .filled-cell{height:26px}
  body.playing .consonant-table .slot-button{height:22px;min-height:21px}
}
@media(max-width:760px){
  body.playing .consonant-table td{height:25px}
  body.playing .consonant-table .filled-cell{height:25px}
  body.playing .consonant-table .slot-button{height:22px;min-height:21px}
}
@media(max-width:760px) and (max-height:700px){
  body.playing .consonant-table td{height:23px}
  body.playing .consonant-table .filled-cell{height:23px}
  body.playing .consonant-table .slot-button{height:20px;min-height:19px}
}

/* Fit short phones, including older Safari without dvh support. */
@media (max-width: 760px) and (orientation: portrait) {
  body.playing .app-shell {
    height: var(--game-viewport-height, 100vh);
    min-height: var(--game-viewport-height, 100vh);
  }
  body.playing .consonant-table td,
  body.playing .consonant-table .filled-cell {
    height: clamp(16px, var(--chart-cell-height, calc((var(--game-viewport-height, 100vh) - 455px) / 11)), 29px);
  }
  body.playing .consonant-table .slot-button {
    height: clamp(14px, calc(var(--chart-cell-height, calc((var(--game-viewport-height, 100vh) - 455px) / 11)) - 3px), 25px);
    min-height: 0;
  }
  body.playing .board-container { overflow: hidden; }
}

/* Wide landscape displays use a side panel for game status and the chart. */
@media (orientation: landscape) and (min-aspect-ratio: 4/3) and (min-width: 761px) {
  body.playing { overflow: hidden; }
  body.playing .site-header,
  body.playing footer { display: none; }
  body.playing .app-shell {
    width: 100%; max-width: none; height: var(--game-viewport-height, 100vh); min-height: 0;
    padding: env(safe-area-inset-top) max(12px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(12px, env(safe-area-inset-left));
  }
  body.playing main { min-height: 0; overflow: hidden; }
  body.playing .game-screen {
    width: 100%; max-width: 1600px; height: 100%; min-height: 0; margin: 0 auto;
    display: grid; grid-template-columns: minmax(230px, .72fr) minmax(0, 1.28fr);
    grid-template-rows: auto auto auto minmax(0, 1fr) auto;
    grid-template-areas: "top top" "hud board" "completion board" "question board" "score board";
    align-content: stretch; align-items: stretch; gap: 8px 16px; padding: 8px 0;
  }
  body.playing .game-topline { grid-area: top; min-height: 30px; margin: 0; }
  body.playing .hud { grid-area: hud; display: block; align-self: stretch; margin: 0; padding: 10px 14px; }
  body.playing .completion-card { grid-area: completion; align-self: stretch; margin: 0; padding: 9px 12px; }
  body.playing .question-card { grid-area: question; align-self: stretch; display: flex; flex-direction: column; justify-content: center; margin: 0; padding: 10px 14px; }
  body.playing .target-letter { font-size: clamp(42px, 8vh, 76px); }
  body.playing .board-wrap { grid-area: board; display: flex; min-width: 0; min-height: 0; flex-direction: column; padding: 8px 10px; }
  body.playing .board-container { flex: 1; min-width: 0; min-height: 0; overflow: auto; }
  body.playing .board-title { flex: none; margin-bottom: 4px; }
  body.playing .consonant-table { height: 100%; border-spacing: 2px; }
  body.playing .consonant-table th { padding: 3px 2px; }
  body.playing .consonant-table td,
  body.playing .consonant-table .filled-cell { height: clamp(20px, calc((var(--game-viewport-height, 100vh) - 190px) / 12), 54px); }
  body.playing .consonant-table .slot-button { height: 92%; min-height: 18px; }
  body.playing .score-display { grid-area: score; align-self: stretch; min-height: 44px; margin: 0; }
}

/* Make percentile and saved leaderboard placement the visual result headline. */
.result-percent:not(.hidden),
.result-rank.ranked-result {
  display: grid; place-items: center; min-height: 66px; margin: 10px 0 4px;
  padding: 10px 12px; border: 3px solid #101014; border-radius: 10px;
  font-size: clamp(22px, 5vw, 31px); line-height: 1.2; font-weight: 1000;
}
.result-percent:not(.hidden) { background: #ffeb3b; color: #101014; }
.result-rank.ranked-result { background: #00e5ff; color: #101014; }
@media(max-width:600px){
  .result-percent:not(.hidden),.result-rank.ranked-result{min-height:60px;padding:9px;font-size:clamp(21px,6vw,27px)}
}
/* Keep the percentile caption quiet and let only the percentage carry emphasis. */
.result-percent:not(.hidden) {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; min-height: 0; margin: 9px 0 4px; padding: 8px 12px;
  border: 2px solid #101014; border-radius: 10px; background: #f0fff8;
}
.result-percent span { color: #535164; font-size: 11px; line-height: 1.35; font-weight: 700; }
.result-percent strong { color: #008f62; font-size: clamp(30px, 7vw, 40px); line-height: 1.05; font-weight: 1000; font-variant-numeric: tabular-nums; }
@media(max-width:600px){.result-percent:not(.hidden){min-height:0;padding:7px 10px}.result-percent span{font-size:10px}.result-percent strong{font-size:34px}}

/* Mode-specific surfaces for the selected mode and final-score card. */
#howto-mode-stats .howto-mode-line.iron-theme{background:#243d70!important;color:#fff!important}
#howto-mode-stats .howto-mode-line.bronze-theme{background:#a85b1e!important;color:#fff!important}
#howto-mode-stats .howto-mode-line.silver-theme{background:#d7dde1!important;color:#101014!important}
#howto-mode-stats .howto-mode-line.gold-theme{background:#ffdf32!important;color:#101014!important}
#howto-mode-stats .howto-mode-line.platinum-theme{background:#65dfbd!important;color:#073d31!important}
.howto-mode-line .howto-mode-label{background:#fff!important}
.howto-mode-line.iron-theme .howto-mode-label{color:#243d70!important;border-color:#fff!important}
.howto-mode-line.bronze-theme .howto-mode-label{color:#783c10!important;border-color:#fff!important}
.howto-mode-line.silver-theme .howto-mode-label{color:#20242a!important;border-color:#68747b!important}
.howto-mode-line.gold-theme .howto-mode-label{color:#574300!important;border-color:#101014!important}
.howto-mode-line.platinum-theme .howto-mode-label{color:#075743!important;border-color:#08775f!important}
.final-score.iron-theme{background:#243d70!important;border-color:#101d3c!important}
.final-score.iron-theme span,.final-score.iron-theme strong{color:#fff!important}
.final-score.bronze-theme{background:#a85b1e!important;border-color:#743c12!important}
.final-score.bronze-theme span,.final-score.bronze-theme strong{color:#fff!important}
.final-score.silver-theme{background:#d7dde1!important;border-color:#77838a!important}
.final-score.silver-theme span,.final-score.silver-theme strong{color:#101014!important}
.final-score.gold-theme{background:#ffdf32!important;border-color:#9b7800!important}
.final-score.gold-theme span,.final-score.gold-theme strong{color:#101014!important}
.final-score.platinum-theme{background:#65dfbd!important;border-color:#08775f!important}
.final-score.platinum-theme span,.final-score.platinum-theme strong{color:#073d31!important}
.ranking-policy-note{text-align:right;margin:-4px 2px 9px;color:#777486;font-size:10px;font-weight:700}
.result-percent:not(.hidden){flex-direction:row;justify-content:space-between;gap:12px;text-align:left}
.result-percent-copy{display:grid;gap:2px}
.optional-identity-button{flex:none;min-height:32px;padding:0 10px;border:2px solid #08775f;border-radius:7px;background:#fff;color:#075743;font-size:10px;font-weight:900}
.optional-identity-button:disabled{opacity:.7;cursor:default}

/* Keep the version easy to spot while preserving the compact footer. */
footer .app-version{align-self:center;padding:3px 8px;border:1px solid #101014;border-radius:999px;background:#00e5ff;color:#101014;font-variant-numeric:tabular-nums;font-weight:900;letter-spacing:.08em}

/* Mosquito mode: the complete chart drifts inside its white viewport. */
.mosquito-theme{background:#ed3f87!important;color:#fff!important;border:2px solid #9f164d!important}
.mosquito-choice{background:#ffb4d0;border-color:#9f164d}
.mosquito-card{background:#ed3f87;border-color:#9f164d;color:#fff}
.mosquito-card strong,.mosquito-card small{color:#fff}
.mosquito-card .difficulty-medal{background:#ff82b0;color:#57102b}
.mode-difficulty-tab.mosquito-tab.active{background:#ed3f87;color:#fff;border-color:#9f164d}
.mode-pill.mosquito-theme,.result-mode.mosquito-theme{background:#ed3f87!important;color:#fff!important;border-color:#9f164d!important}
.ranking-screen[data-difficulty="mosquito"] .ranking-panel{border-color:#ed3f87;box-shadow:7px 7px 0 #9f164d}
#howto-mode-stats .howto-mode-line.mosquito-theme{background:#ed3f87!important;color:#fff!important}
.howto-mode-line.mosquito-theme .howto-mode-label{color:#9f164d!important;border-color:#9f164d!important}
.final-score.mosquito-theme{background:#ed3f87!important;border-color:#9f164d!important}
.final-score.mosquito-theme span,.final-score.mosquito-theme strong{color:#fff!important}
.mosquito-board{position:relative;overflow:hidden!important;}
.mosquito-board .mosquito-motion{position:absolute;top:0;left:0;width:100%;will-change:transform;transform-origin:center center;}
.mode-difficulty-tabs{grid-template-columns:repeat(3,minmax(0,1fr))}
.app-version{align-self:center;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;color:inherit!important;font-variant-numeric:tabular-nums;font-weight:400!important;letter-spacing:inherit!important}

/* Make platinum consonant charts use the same live height fitting as other consonant charts. */
body.playing .platinum-consonant-table{border-spacing:1px}
body.playing .platinum-consonant-table th{padding:2px 1px;line-height:1.03}
body.playing .platinum-consonant-table td{height:var(--chart-cell-height,20px);padding:0!important}
body.playing .platinum-consonant-table .slot-button{height:90%;min-height:0;padding:0 1px;line-height:1;font-size:clamp(8px,calc(var(--chart-cell-height,18px)*.76),16px)}
@media(max-width:760px){
  body.playing .platinum-consonant-table .platinum-row-label{font-size:clamp(6px,calc(var(--chart-cell-height,18px)*.48),9px);line-height:1.03;overflow-wrap:anywhere}
}

/* The exit control stays the same size but is easier to locate during play. */
.game-topline #leave-game{color:#fff;background:#d50000;border-radius:7px;box-shadow:inset 0 0 0 2px #101014;font-weight:900}
.game-topline #leave-game:hover{color:#101014;background:#ffeb3b}
.discard-leave-button{width:100%;min-height:52px;margin-top:10px;padding:10px 14px;border:3px solid #101014;border-radius:11px;background:#ff1744;color:#fff;font-size:14px;font-weight:900;box-shadow:4px 4px 0 #101014}
.discard-leave-button:active{transform:translate(2px,2px);box-shadow:2px 2px 0 #101014}
@media(max-width:420px){.result-percent:not(.hidden){gap:6px;padding:7px}.result-percent span{max-width:180px}.optional-identity-button{min-height:30px;padding:0 7px;font-size:9px}}