/* V2 presentation; the original game state key and engine are unchanged. */
:root{--game-bg:#26a69a;--game-accent:#ef6c00;--game-ink:#fff;--accent-ink:#fff;background:#e9eeec;font-family:Arial,Tahoma,sans-serif}
body{min-height:100dvh;background:radial-gradient(ellipse at top,#edf3ef,#bfcac8);padding:18px;display:grid;place-items:center}
.phone{container-type:inline-size;background:var(--game-bg);color:var(--game-ink);width:100%;max-width:450px;height:calc(100dvh - 36px);max-height:940px;min-height:480px;overflow:hidden;border:9px solid #192123;border-radius:40px;box-shadow:0 28px 65px #172c3740,0 0 0 2px #697473;padding:18px 0 8px}
.phone:before{content:'';position:absolute;top:5px;left:50%;width:62px;height:5px;background:#060909;border-radius:8px;transform:translateX(-50%)}
.topbar{height:52px;background:transparent;box-shadow:none;padding:0 12px;gap:6px;align-items:center;color:var(--game-ink)}
.menu{width:32px;padding:6px;flex-shrink:0}.menu span{background:currentColor;width:20px;height:2px}.settings-button{background:transparent;padding:4px;width:32px;height:36px;font-size:25px;line-height:1;flex-shrink:0}.top-spacer{min-width:0}.level,.money{font-size:18px;min-height:36px;padding:5px 10px;border-radius:12px;background:#0002;box-shadow:none;color:var(--game-ink)}.money{gap:5px}.coin{width:24px;height:24px;font-size:19px;border-width:2px;color:#ffce55}
.play-area{height:calc(100% - 52px);display:grid;grid-template-rows:minmax(120px,1fr) auto;gap:12px;padding:8px 14px 12px;align-items:center;min-height:0}.space{display:none}.picture-wrap{margin:0;height:100%;min-height:0;display:flex;justify-content:center;align-items:center}.picture-wrap #puzzle{width:100%;height:100%;object-fit:contain;border-radius:5px}
.answer-panel{width:100%}.answer-line{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:8px}.letter-count{font-size:12px;opacity:.8;white-space:nowrap}.slots{gap:6px;min-height:48px;flex:1;max-width:100%;justify-content:center}.slot{background:#0002;border:1px solid #ffffff36;border-radius:10px;height:46px;min-width:0;width:42px;padding:0;color:var(--game-ink);font-size:25px}.helpers{padding:0 0 10px;gap:6px}.helpers button{height:38px;border:1px solid #ffffff38;border-radius:9px;background:transparent;box-shadow:none;color:var(--game-ink);font-size:17px}.letters{padding:0;gap:7px}.letter{height:clamp(40px,12cqw,56px);border-radius:10px;background:var(--game-accent);color:var(--accent-ink);box-shadow:0 3px 0 #0003;font-size:26px}
.success{min-height:192px;gap:9px}.solved-word{color:var(--game-accent);font-size:36px}.next{padding:13px 32px;border-radius:12px;background:var(--game-accent);color:var(--accent-ink)}.reward{background:#0003;color:var(--game-ink)}
.toast{bottom:14px;left:14px;right:14px;border-radius:10px;font-size:16px}.drawer{left:max(0px,calc((100vw - 450px)/2));border-radius:18px;background:var(--game-bg);color:var(--game-ink);max-height:95dvh;top:2.5dvh;width:min(85vw,360px)}.drawer-header{height:auto;min-height:110px}.stage-card{background:#ffffff1a}.stage-card div{color:var(--game-ink);opacity:.7}.stage-card.current div{color:var(--game-ink);opacity:1}.stage-card.current{outline-color:var(--game-accent)}.modal{border-radius:18px;background:var(--game-bg);color:var(--game-ink)}.modal h2,.modal p{color:inherit}.modal-actions button{background:var(--game-accent);color:var(--accent-ink)}.modal-actions .secondary{background:#0002;color:var(--game-ink)}.close{color:inherit}
/* Reference-inspired early mobile edition: slate surface, joined field, white keys. */
body[data-theme=classic] .phone{border-radius:30px}
body[data-theme=classic] .topbar{background:#0002}
body[data-theme=classic] .level{border:1px solid #ffffff55;border-radius:50%;font-size:14px}
body[data-theme=classic] .money{background:none;border-radius:0;font-size:15px}
body[data-theme=classic] .play-area{gap:8px;padding:6px 10px 12px}
body[data-theme=classic] .slots{border:2px solid #d1dce0;border-radius:8px;background:#162329;gap:0;min-height:40px;align-items:center}
body[data-theme=classic] .slot{border:0;border-radius:0;background:none;color:#fff;box-shadow:none;height:36px;font-size:22px;flex:1;max-width:38px}
body[data-theme=classic] .letter-count{background:#f7f7ed;color:#275e54;border-radius:3px;padding:5px;font-weight:bold;font-size:12px;white-space:normal;width:32px;text-align:center;opacity:1}
body[data-theme=classic] .answer-line{direction:ltr;gap:5px;margin-bottom:5px}
body[data-theme=classic] .helpers{padding-bottom:6px;gap:4px}
body[data-theme=classic] .helpers button{border-radius:3px;background:#f7f7ed;color:#275e54;border:1px solid #a8b5b7;height:32px;font-size:17px}
body[data-theme=classic] .letters{gap:4px}
body[data-theme=classic] .letter{background:#f7f7ed;color:#243239;border:1px solid #a8b5b7;border-radius:3px;box-shadow:0 2px 0 #18282c55;font-size:26px;height:clamp(38px,11cqw,50px)}
/* Keep V1's familiar palette available separately from the older reference. */
body[data-theme=original] .topbar{background:#0002}
body[data-theme=original] .level{background:#4caf50;color:white;border-radius:4px}
body[data-theme=original] .money{background:#e040fb;color:white;border-radius:4px}
body[data-theme=original] .slot{background:none;border:0;border-bottom:3px solid #795548;border-radius:0;color:var(--game-ink)}
body[data-theme=original] .friend{background:#9c27b0;color:#fff}body[data-theme=original] .solve{background:#2196f3;color:#fff}body[data-theme=original] .hint{background:#4caf50;color:#fff}
body[data-theme=original] .letter,body[data-theme=original] .helpers button{border-radius:4px}
body[data-theme=original] .solved-word{color:#df29bd}
/* Settings remain legible even with very light custom game colors. */
.settings-panel{width:420px;max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);padding:25px 22px 18px;overflow:auto;border-radius:22px;background:#f5f7f6;color:#203831;direction:rtl;overscroll-behavior:contain}
.settings-panel h2{margin:0 0 4px;font-size:26px}.settings-subtitle{margin:0 0 20px;color:#62746d;font-size:14px}.settings-panel fieldset{border:0;border-top:1px solid #dce4df;padding:14px 0 10px;margin:0}.settings-panel legend{font-weight:bold;font-size:15px;padding-left:10px}.theme-picker{display:flex;gap:7px}.theme-picker button{flex:1;background:#e7ede9;color:#3c5148;border:2px solid transparent;border-radius:12px;padding:10px 4px;font-size:15px}.theme-picker button span{display:block;font-size:10px;margin-top:5px}.theme-picker button[aria-pressed=true]{border-color:#277862;background:#d9ebe3;color:#144936}.select-label{display:block;font-size:13px;margin-bottom:8px}.settings-panel select{width:100%;border:1px solid #c4d1cb;border-radius:10px;padding:10px;font:inherit;background:white;color:#203831}.setting-note{font-size:11px;color:#60736a;line-height:1.7;margin:8px 0 0}.toggle-row{display:flex;justify-content:space-between;align-items:center;font-size:14px}.toggle-row input{width:22px;height:22px;accent-color:#277862}.volume-label{display:flex;justify-content:space-between;font-size:13px;margin-top:14px}.settings-panel input[type=range]{width:100%;accent-color:#277862;margin:12px 0;direction:ltr}.small-button{background:#e1e9e4;color:#355547;padding:8px 12px;border-radius:8px;font-size:12px}.small-button:disabled{opacity:.5}.color-controls{display:flex;gap:16px}.color-controls label{display:flex;flex:1;align-items:center;justify-content:space-between;font-size:13px}.color-controls input{padding:2px;width:40px;height:33px;border:1px solid #c4d1cb;border-radius:6px;background:#fff}.palettes{display:flex;gap:5px;margin-top:10px}.palettes button{flex:1;background:#e1e9e4;color:#355547;padding:7px 2px;font-size:12px;border-radius:7px}.settings-footer{display:flex;gap:8px;justify-content:space-between;margin-top:12px}#settings-done{background:#277862;color:#fff;border-radius:9px;padding:9px 24px}.settings-panel button:focus-visible,.settings-panel input:focus-visible,.settings-panel select:focus-visible{outline:3px solid #397cc1;outline-offset:2px}
@media(min-width:760px){
 body[data-display=full]{padding:0}
 body[data-display=full] .phone{max-width:none;width:100%;height:100dvh;max-height:none;border:0;border-radius:0;padding:0;box-shadow:none}
 body[data-display=full] .phone:before{display:none}
 body[data-display=full] .play-area{grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr);grid-template-rows:minmax(0,1fr);gap:clamp(20px,4vw,64px);padding:18px clamp(20px,4vw,60px) 28px;direction:ltr}
 body[data-display=full] .answer-panel,body[data-display=full] .success{direction:rtl;width:100%;max-width:620px;justify-self:center}
 body[data-display=full] .letter{height:clamp(52px,8vh,88px);font-size:32px}
 body[data-display=full] .helpers button{height:48px;font-size:20px}
 body[data-display=full] .slot{height:58px;width:56px;font-size:30px}
 body[data-display=full] .topbar{padding:0 28px;height:60px}
 body[data-display=full] .play-area{height:calc(100% - 60px)}
 body[data-display=full] .drawer{left:0}
}
@media(min-width:760px) and (min-aspect-ratio:4/3){
 body[data-display=auto]{padding:0}
 body[data-display=auto] .phone{max-width:none;height:100dvh;max-height:none;border:0;border-radius:0;padding:0}
 body[data-display=auto] .phone:before{display:none}
 body[data-display=auto] .play-area{grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr);grid-template-rows:minmax(0,1fr);direction:ltr;gap:4vw;padding:20px 4vw}
 body[data-display=auto] .answer-panel,body[data-display=auto] .success{direction:rtl;max-width:600px;width:100%;justify-self:center}
 body[data-display=auto] .letter{height:clamp(52px,8vh,88px);font-size:30px}
 body[data-display=auto] .drawer{left:0}
}
@media(max-width:759px){body{padding:0;background:var(--game-bg)}.phone,body[data-theme=classic] .phone{border:0;border-radius:0;width:100%;max-width:none;max-height:none;height:100dvh;min-height:440px;box-shadow:none;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}.phone:before{display:none}.topbar{height:48px;padding:0 10px}.play-area{height:calc(100% - 48px);max-width:620px;width:100%;margin:auto;padding:6px 10px 12px;gap:8px}.letter{height:clamp(42px,11vw,62px)}.drawer{left:0}.settings-button{font-size:24px}.level,.money{font-size:16px;padding:5px 8px}}
@media(max-height:600px) and (min-width:760px){.phone{min-height:420px}.letter{height:36px}.helpers button{height:30px}.slots{min-height:36px}.slot{height:34px}.play-area{gap:5px;padding-top:2px}.success{min-height:150px}}
@media(max-width:759px) and (orientation:landscape){.phone{min-height:320px}.play-area{grid-template-columns:1fr 1fr;grid-template-rows:minmax(0,1fr);direction:ltr;max-width:none;gap:12px}.answer-panel{direction:rtl}.letter{height:36px}.helpers button{height:30px}.slot{height:32px}.slots{min-height:34px}.answer-line{margin-bottom:4px}.success{min-height:150px}}
.stage-card.completed img{filter:none}
.stage-card.upcoming img{filter:blur(4px)}