:root { --ink:#332317; --orange:#f46b2b; --yellow:#ffd75b; --cream:#fff8e7; --green:#50a96d; }
* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; background:#f3ead8; color:var(--ink); font-family:"Yu Gothic","Hiragino Kaku Gothic ProN",system-ui,sans-serif; }
button,input { font:inherit; }
button { cursor:pointer; -webkit-tap-highlight-color:transparent; }
.app { width:min(100%, 620px); min-height:100svh; margin:auto; background:radial-gradient(circle at 10% 12%,#fff 0 4%,transparent 4.5%),linear-gradient(160deg,#fffaf0,#ffeab3); box-shadow:0 0 50px #8c765733; overflow:hidden; position:relative; }
.topbar { height:76px; padding:10px 16px; display:flex; align-items:center; justify-content:space-between; background:#fffdf7dd; border-bottom:2px solid #f4d37c; position:relative; z-index:10; }
.brand { text-align:center; line-height:1; transform:rotate(-1deg); }
.brand span { display:block; font-size:13px; color:var(--orange); font-weight:900; letter-spacing:.18em; }
.brand strong { font-size:24px; letter-spacing:.05em; }
.icon-button { width:46px; height:46px; border:0; border-radius:50%; background:#fff0bd; color:#8b531e; font-size:25px; font-weight:900; box-shadow:0 4px 0 #e0bd5c; }
.screen { display:none; min-height:calc(100svh - 76px); padding:34px 22px 28px; text-align:center; position:relative; }
.screen.active { display:flex; flex-direction:column; align-items:center; }
.start-screen { justify-content:center; }
.hero-sticker { background:var(--orange); color:white; font-weight:900; font-size:22px; padding:10px 25px; border-radius:999px; transform:rotate(-3deg); box-shadow:0 5px 0 #b83c13; }
h1 { font-size:clamp(30px,8vw,48px); line-height:1.35; margin:28px 0 14px; }
h1 em { color:var(--orange); font-style:normal; text-decoration:underline wavy var(--yellow) 5px; text-underline-offset:8px; }
.start-screen p { max-width:440px; font-weight:700; line-height:1.8; color:#725640; }
.primary-button,.secondary-button { width:min(100%,420px); min-height:62px; border:0; border-radius:20px; font-size:20px; font-weight:900; margin-top:18px; transition:transform .12s; }
.primary-button { color:white; background:linear-gradient(#ff8a45,var(--orange)); box-shadow:0 7px 0 #bd4216,0 12px 22px #bd421640; }
.secondary-button { color:#70450c; background:#fff5ce; border:2px solid #e8c261; box-shadow:0 5px 0 #d9ae45; }
.primary-button:active,.secondary-button:active,.icon-button:active { transform:translateY(4px); box-shadow:none; }
.game-screen { padding:14px 12px 24px; }
.status-row { width:100%; display:grid; grid-template-columns:1fr 1fr 1fr; gap:6px; align-items:center; margin-bottom:12px; }
.status-row>div { min-height:57px; padding:7px; border-radius:14px; background:#fffaf0; border:1px solid #edd49c; display:flex; flex-direction:column; justify-content:center; }
.status-row small { font-size:11px; font-weight:800; color:#8f6845; }
.status-row strong { font-size:21px; font-variant-numeric:tabular-nums; }
.found-status span { color:var(--green); font-weight:1000; font-size:25px; }
.miss-status strong { color:#e65353; letter-spacing:1px; font-size:16px; }
.picture-frame { width:100%; position:relative; border-radius:20px; overflow:hidden; background:#ddd; box-shadow:0 8px 24px #5e401e55; border:4px solid white; touch-action:manipulation; }
.picture-frame img { display:block; width:100%; height:auto; user-select:none; }
.marker-layer { position:absolute; inset:0; pointer-events:none; }
.memory-badge { position:absolute; left:50%; top:18px; transform:translateX(-50%) rotate(-2deg); white-space:nowrap; background:#fff9dc; color:#9c541e; border:3px solid var(--yellow); border-radius:999px; padding:8px 18px; font-weight:900; box-shadow:0 4px 10px #4326; }
.answer-marker { position:absolute; width:18%; aspect-ratio:1; transform:translate(-50%,-50%) scale(0); border:8px solid #ff3b30; border-radius:50%; box-shadow:0 0 0 5px #fff8,0 5px 16px #58180d66; animation:pop .48s cubic-bezier(.2,1.8,.4,1) forwards; }
.wrong-marker { position:absolute; transform:translate(-50%,-50%) scale(0); color:#e11919; font-size:64px; font-weight:1000; text-shadow:0 3px white,-3px 0 white,3px 0 white,0 -3px white; animation:wrong .7s ease-out forwards; }
@keyframes pop { 60%{transform:translate(-50%,-50%) scale(1.25)} 100%{transform:translate(-50%,-50%) scale(1)} }
@keyframes wrong { 25%{transform:translate(-50%,-50%) scale(1.25) rotate(-10deg)} 100%{transform:translate(-50%,-50%) scale(.8);opacity:0} }
.ready-button { margin-top:18px; }
.game-hint { font-size:13px; font-weight:800; color:#8a6c51; margin:17px 0 0; }
.clear-screen { justify-content:center; background:radial-gradient(circle,#fff 0,#fff6d8 60%,#ffd667); overflow:hidden; }
.clear-badge { font-size:70px; animation:bounce 1s infinite alternate ease-in-out; }
@keyframes bounce { to { transform:translateY(-10px) rotate(8deg); } }
.eyebrow { color:var(--orange); font-weight:1000; letter-spacing:.2em; margin:12px 0 0; }
.clear-screen h2 { font-size:clamp(48px,13vw,76px); color:var(--orange); margin:0; text-shadow:0 5px white,0 9px #f0ba39; transform:rotate(-2deg); }
.clear-copy { font-size:20px; line-height:1.5; font-weight:900; }
.result-card { width:min(100%,360px); padding:15px 20px; background:white; border:3px solid #ffd25c; border-radius:22px; box-shadow:0 8px 0 #e5b943; }
.result-card small { display:block; font-weight:800; color:#946b3c; }
.result-card strong { display:block; font-size:44px; font-variant-numeric:tabular-nums; }
.result-card span { display:none; color:#e63827; font-weight:1000; letter-spacing:.12em; }
.result-card span.show { display:block; }
.name-field { width:min(100%,360px); text-align:left; font-size:12px; font-weight:800; color:#7c5c3d; margin-top:18px; }
.name-field input { width:100%; margin-top:5px; padding:12px 15px; border:2px solid #e8c970; border-radius:13px; background:white; font-weight:800; color:var(--ink); }
.confetti { position:absolute; inset:0; pointer-events:none; }
.confetti i { position:absolute; top:-20px; width:10px; height:18px; animation:fall 2.8s linear infinite; }
@keyframes fall { to { transform:translateY(110svh) rotate(720deg); } }
.ranking-dialog { width:min(90%,480px); border:0; border-radius:28px; padding:28px; color:var(--ink); box-shadow:0 20px 60px #35200b77; }
.ranking-dialog::backdrop { background:#281b0b99; backdrop-filter:blur(3px); }
.ranking-dialog h2 { margin:0; font-size:32px; }
.ranking-dialog>p { color:#83664c; font-weight:700; }
.ranking-dialog ol { padding:0; margin:20px 0; list-style:none; counter-reset:rank; }
.ranking-dialog li { counter-increment:rank; display:grid; grid-template-columns:38px 1fr auto; gap:10px; padding:12px 8px; border-bottom:1px dashed #dbc89f; font-weight:800; text-align:left; }
.ranking-dialog li::before { content:counter(rank); width:28px; height:28px; display:grid; place-items:center; border-radius:50%; background:#ffe083; }
.dialog-close { position:absolute; top:12px; right:14px; border:0; background:transparent; font-size:30px; }
.text-button { border:0; background:transparent; color:#a05f4c; text-decoration:underline; }
@media (min-width:700px) { .game-screen { padding-left:34px; padding-right:34px; } }
@media (prefers-reduced-motion:reduce) { * { animation-duration:.01ms!important; animation-iteration-count:1!important; } }

.start-screen { padding-top:22px; }
.cover-stage { width:min(100%,520px); height:220px; position:relative; margin:-8px auto 4px; overflow:hidden; border-radius:28px; background:linear-gradient(145deg,#14345d,#337bb0 55%,#f2bc4d); box-shadow:0 12px 0 #bc792b,0 18px 35px #5a321f55; border:4px solid #ffe8a4; }
.cover-glow { position:absolute; inset:-60%; background:conic-gradient(from 20deg,transparent,#fff7 10deg,transparent 22deg); animation:cover-spin 16s linear infinite; }
@keyframes cover-spin { to { transform:rotate(360deg); } }
.cover-character,.cover-mascot { position:absolute; margin:0; overflow:hidden; filter:drop-shadow(0 6px 5px #112c); }
.cover-character { width:42%; height:116%; bottom:-20%; border-radius:45% 45% 10% 10%; }
.cover-character img,.cover-mascot img { width:100%; height:100%; object-fit:cover; }
.cover-left { left:-6%; transform:rotate(-7deg); }
.cover-center { left:29%; z-index:3; transform:scale(1.12); }
.cover-right { right:-6%; transform:rotate(7deg); }
.cover-left img { object-position:17% 38%; }.cover-center img { object-position:20% 55%; }.cover-right img { object-position:20% 44%; }
.cover-mascot { width:76px; height:76px; bottom:4px; z-index:5; border:3px solid white; border-radius:50%; background:white; }
.cover-mascot img { object-position:74% 37%; transform:scale(1.6); }
.mascot-left { left:8px; }.mascot-right { right:8px; }
.cover-stage .hero-sticker { position:absolute; top:10px; left:50%; z-index:7; transform:translateX(-50%) rotate(-3deg); }
.cover-kicker { color:#18497b!important; letter-spacing:.12em; margin:13px 0 -12px!important; font-weight:1000!important; }
.start-screen h1 { margin-top:18px; }
.review-button { width:min(100%,420px); min-height:54px; margin-top:16px; border:2px solid #2d6fa2; border-radius:18px; background:linear-gradient(#effaff,#cfeeff); color:#164e7b; font-weight:1000; font-size:18px; box-shadow:0 5px 0 #83b8d7; }
.review-button.used-up { color:#91877d; background:#eee9df; border-color:#c8bfb0; box-shadow:none; cursor:not-allowed; }
.review-dialog { width:min(94%,620px); max-height:94svh; border:0; padding:18px; border-radius:25px; background:#fff9e8; box-shadow:0 20px 70px #211a1477; text-align:center; }
.review-dialog::backdrop { background:#182c3fbb; backdrop-filter:blur(4px); }
.review-heading { display:flex; align-items:center; justify-content:space-between; font-size:22px; font-weight:1000; color:#184e78; }
.review-heading strong { font-size:14px; color:white; background:#e56a31; padding:7px 12px; border-radius:999px; }
.review-dialog>p { margin:5px 0 12px; color:#7f6a52; font-weight:800; font-size:13px; }
.review-tabs { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:10px; }
.review-tabs button { padding:11px; border:2px solid #bdd8e9; background:white; color:#547185; font-weight:900; border-radius:12px; }
.review-tabs button.active { background:#246f9f; border-color:#246f9f; color:white; }
.review-image-wrap { max-height:62svh; overflow:auto; border-radius:15px; background:#ddd; }
.review-image-wrap img { display:block; width:100%; height:auto; }
.review-dialog .primary-button { min-height:52px; margin-top:13px; }
.clear-friends { display:flex; justify-content:center; gap:8px; height:80px; }
.clear-friends img { width:80px; height:80px; border-radius:50%; object-fit:cover; object-position:20% 45%; border:3px solid white; box-shadow:0 4px 12px #5d341b55; }
@media (max-width:420px) { .cover-stage { height:180px; }.cover-mascot{width:60px;height:60px}.start-screen h1{font-size:29px}.start-screen{padding-left:16px;padding-right:16px} }

.room-screen { justify-content:flex-start; padding:24px 18px 34px; background:radial-gradient(circle at 50% 0,#fff 0,#fff5d3 48%,#e6f1f6 100%); }
.room-heading { width:100%; padding:21px 16px 18px; border-radius:25px; background:linear-gradient(135deg,#153e68,#2b78a3); color:white; box-shadow:0 8px 0 #0d2c4b,0 14px 26px #1d426944; position:relative; overflow:hidden; }
.room-heading::after { content:"✦  ✦  ✦"; position:absolute; right:14px; top:10px; color:#ffd873; letter-spacing:8px; transform:rotate(8deg); }
.room-eyebrow { font-size:11px; font-weight:1000; color:#ffd76c; letter-spacing:.2em; }
.room-heading h2 { margin:2px 0; font-size:36px; letter-spacing:.06em; }
.room-heading p { margin:5px 0 0; color:#eaf8ff; font-size:14px; font-weight:700; line-height:1.6; }
.question-grid { display:grid; width:100%; gap:16px; margin-top:25px; }
.question-card { width:100%; min-height:144px; padding:0; display:grid; grid-template-columns:126px 1fr 34px; align-items:center; overflow:hidden; border:3px solid white; border-radius:23px; background:white; color:var(--ink); text-align:left; box-shadow:0 7px 0 #d1a54d,0 12px 22px #684e2633; transition:transform .15s; }
.question-card:active { transform:translateY(5px); box-shadow:0 2px 0 #d1a54d; }
.question-thumb { align-self:stretch; overflow:hidden; background:#eee; position:relative; }
.question-thumb::after { content:"PLAY"; position:absolute; left:8px; bottom:8px; padding:4px 8px; border-radius:99px; background:#ef642b; color:white; font-size:10px; font-weight:1000; }
.question-thumb img { width:100%; height:100%; object-fit:cover; object-position:center 45%; }
.question-info { padding:13px 12px; display:flex; min-width:0; flex-direction:column; }
.question-info small { width:max-content; padding:4px 10px; border-radius:99px; background:#fff0b7; color:#9b5b16; font-weight:1000; }
.question-info strong { margin-top:7px; font-size:20px; line-height:1.25; }
.question-info em { margin-top:7px; color:#8a715a; font-size:11px; font-style:normal; font-weight:700; line-height:1.45; }
.play-arrow { width:28px; height:28px; display:grid; place-items:center; border-radius:50%; background:#2c78a3; color:white; font-size:11px; }
.coming-card { width:100%; min-height:100px; margin-top:18px; display:grid; grid-template-columns:60px 1fr; grid-template-rows:1fr 1fr; align-items:center; padding:16px; border:3px dashed #c9b99b; border-radius:23px; background:#fff9e7aa; color:#8d806d; text-align:left; }
.coming-card>span { grid-row:1/3; width:46px; height:46px; display:grid; place-items:center; border-radius:50%; background:#e8dfcb; font-size:30px; }
.coming-card strong { align-self:end; }.coming-card small { align-self:start; margin-top:4px; }
.room-screen>.secondary-button { margin-top:24px; }
.question-name { width:100%; margin:0 0 9px; color:#164e78; font-weight:1000; font-size:15px; letter-spacing:.04em; }
@media (max-width:420px) { .question-card{grid-template-columns:104px 1fr 28px;min-height:126px}.question-info strong{font-size:17px}.room-heading h2{font-size:31px} }

/* Refined title screen */
.app { background:#f4efe5; }
.topbar { height:68px; background:#112c48; border:0; color:white; box-shadow:0 2px 14px #091b2d44; }
.brand span { color:#f4ba52; }.brand strong { font-size:21px; }.icon-button { width:42px; height:42px; background:#203f5c; color:#f8cf79; box-shadow:none; border:1px solid #41627e; }
.start-screen { min-height:calc(100svh - 68px); justify-content:flex-start; padding:18px 18px 34px; background:linear-gradient(180deg,#f8f3e9 0%,#fffaf0 55%,#eaf1f3 100%); }
.cover-stage { width:min(100%,560px); height:auto; aspect-ratio:16/9; margin:0 auto 19px; border-radius:22px; background:#122d47; border:0; box-shadow:0 14px 32px #1b2b3840; overflow:hidden; position:relative; }
.cover-hero-image { width:100%; height:100%; display:block; object-fit:cover; }
.cover-shine { position:absolute; inset:0; background:linear-gradient(125deg,transparent 25%,#fff3 40%,transparent 55%); transform:translateX(-120%); animation:hero-shine 7s ease-in-out infinite; }
@keyframes hero-shine { 0%,68%{transform:translateX(-120%)} 85%,100%{transform:translateX(120%)} }
.cover-kicker { margin:2px 0 2px!important; color:#b56c22!important; font-size:12px; letter-spacing:.22em; font-weight:900!important; }
.start-screen h1 { margin:4px 0 10px; font-family:"Yu Mincho","Hiragino Mincho ProN",serif; font-size:clamp(38px,10vw,58px); line-height:1.02; letter-spacing:.04em; color:#17344f; }
.start-screen h1 span { font-size:.52em; font-family:"Yu Gothic",sans-serif; letter-spacing:.24em; color:#6f7f87; }
.start-screen h1 em { display:inline-block; color:#e45f31; text-decoration:none; padding:0 8px 7px; border-bottom:5px solid #f1be55; }
.start-screen>p:not(.cover-kicker) { margin:6px 0 2px; color:#52616a; font-size:14px; line-height:1.75; font-weight:700; }
.start-screen .primary-button,.start-screen .secondary-button { border-radius:14px; }
.start-screen .primary-button { margin-top:17px; background:linear-gradient(135deg,#e95f31,#c94326); box-shadow:0 6px 0 #8e2d1b,0 11px 24px #b7402940; }
.start-screen .secondary-button { margin-top:14px; background:#fff; border:1px solid #c8d1d5; color:#37536a; box-shadow:0 4px 0 #aab9c0; }
.room-screen { background:linear-gradient(180deg,#f5f0e7,#eef3f3); }
.room-heading { background:linear-gradient(140deg,#102f4b,#255b78); box-shadow:0 7px 0 #092238,0 14px 28px #132d4138; }
.question-card { border:1px solid #dce2e2; border-radius:18px; box-shadow:0 5px 0 #c6b17d,0 10px 20px #3d35262b; }
@media (max-width:420px) { .start-screen{padding:14px 14px 28px}.cover-stage{border-radius:17px;margin-bottom:14px}.start-screen h1{font-size:38px}.start-screen>p:not(.cover-kicker){font-size:13px} }

/* Memory guidance always stays outside the puzzle image. */
.game-screen > .memory-badge { position:static; left:auto; top:auto; transform:none; width:100%; margin:0 0 10px; padding:9px 16px; border:1px solid #e4c46d; border-radius:12px; background:#fff7d8; color:#8e551f; box-shadow:none; text-align:center; }

/* Refined result screen */
.clear-screen { justify-content:flex-start; padding:18px 18px 36px; background:linear-gradient(180deg,#f3eee4,#fffaf0 58%,#eaf1f3); }
.result-hero { width:100%; position:relative; border-radius:22px; overflow:hidden; background:#173853; box-shadow:0 12px 30px #142d3e3d; }
.result-hero img { display:block; width:100%; aspect-ratio:3/2; object-fit:cover; }
.congrats-message { position:absolute; left:50%; bottom:14px; transform:translateX(-50%); min-width:72%; padding:10px 22px 12px; border-radius:18px; background:#fffdf5ed; border:2px solid #e2b956; color:#173b59; box-shadow:0 6px 18px #1d283948; backdrop-filter:blur(4px); }
.congrats-message::after { content:""; position:absolute; left:50%; bottom:-11px; width:18px; height:18px; background:#fffdf5; border-right:2px solid #e2b956; border-bottom:2px solid #e2b956; transform:translateX(-50%) rotate(45deg); }
.congrats-message span { display:block; color:#a96a25; font-size:11px; font-weight:900; letter-spacing:.16em; }
.congrats-message strong { display:block; font-family:"Yu Mincho","Hiragino Mincho ProN",serif; font-size:clamp(28px,8vw,44px); line-height:1.1; letter-spacing:.06em; }
.clear-screen .clear-copy { margin:20px 0 15px; color:#334c5c; font-size:16px; line-height:1.6; }
.clear-screen .result-card { border:1px solid #d5c69e; border-radius:18px; box-shadow:0 6px 0 #bd9e59; }
.clear-screen .result-card strong { color:#173b59; }
.clear-screen .primary-button { border-radius:14px; background:linear-gradient(135deg,#e95f31,#c94326); box-shadow:0 6px 0 #8e2d1b; }
.clear-screen .secondary-button { border-radius:14px; background:white; border:1px solid #c8d1d5; color:#37536a; box-shadow:0 4px 0 #aab9c0; }
.clear-screen .confetti { opacity:.8; z-index:2; }
.clear-screen > *:not(.confetti) { position:relative; z-index:3; }
@media (max-width:420px) { .clear-screen{padding:12px 12px 28px}.result-hero{border-radius:17px}.congrats-message{bottom:10px;padding:8px 14px 10px}.congrats-message strong{font-size:28px}.clear-screen .clear-copy{font-size:14px;margin-top:17px} }

/* How-to guide */
.cover-sub-actions { width:min(100%,420px); display:grid; grid-template-columns:1.2fr 1fr; gap:10px; margin-top:14px; }
.guide-button { min-height:54px; padding:10px 12px; border:1px solid #c8d1d5; border-radius:14px; background:#fff; color:#37536a; font-size:15px; font-weight:900; box-shadow:0 4px 0 #aab9c0; }
.guide-button:active,.room-guide-button:active { transform:translateY(3px); box-shadow:none; }
.room-guide-button { margin-top:14px; padding:8px 15px; border:1px solid #7da1b8; border-radius:999px; background:#ffffff17; color:#fff3ce; font-size:12px; font-weight:900; }
.guide-dialog { width:min(94%,580px); max-height:94svh; overflow:auto; padding:0 20px 24px; border:0; border-radius:26px; background:linear-gradient(180deg,#f7f1e6,#fffdf8); color:var(--ink); box-shadow:0 24px 80px #10223888; text-align:center; }
.guide-dialog::backdrop { background:#10263baa; backdrop-filter:blur(4px); }
.guide-dialog .dialog-close { z-index:2; width:38px; height:38px; display:grid; place-items:center; top:10px; right:10px; border-radius:50%; background:#ffffffdd; color:#173b59; box-shadow:0 3px 10px #173b5933; }
.guide-heading { margin:0 -20px 18px; padding:24px 50px 20px; border-radius:26px 26px 0 0; background:linear-gradient(140deg,#102f4b,#2b6b8d); color:white; }
.guide-heading>span { color:#f2c661; font-size:10px; font-weight:1000; letter-spacing:.22em; }
.guide-heading h2 { margin:2px 0 5px; font-family:"Yu Mincho","Hiragino Mincho ProN",serif; font-size:36px; letter-spacing:.08em; }
.guide-heading p { margin:0; color:#e9f5fb; font-size:13px; font-weight:700; line-height:1.6; }
.guide-preview { display:grid; grid-template-columns:1fr 30px 1fr; align-items:center; gap:7px; }
.guide-preview>b { color:#d29531; font-size:25px; }
.guide-preview figure { position:relative; margin:0; overflow:hidden; border:1px solid #d4c7a6; border-radius:16px; background:white; box-shadow:0 5px 14px #49361c1c; }
.guide-preview figure>span { position:absolute; z-index:2; top:7px; left:7px; width:28px; height:28px; display:grid; place-items:center; border-radius:50%; background:#e75f32; color:white; font-weight:1000; box-shadow:0 2px 7px #5b1e1466; }
.guide-preview img { display:block; width:100%; aspect-ratio:4/3; object-fit:cover; object-position:center 43%; }
.guide-preview figcaption { min-height:58px; padding:8px 5px 9px; color:#6d5a46; font-size:11px; font-weight:800; line-height:1.35; }
.guide-preview figcaption strong { color:#173f5d; font-size:14px; }
.guide-steps { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:15px; text-align:left; }
.guide-steps>div { min-height:92px; display:grid; grid-template-columns:35px 1fr; gap:8px; align-items:start; padding:12px 10px; border:1px solid #ded6c4; border-radius:14px; background:#fff; }
.guide-steps>div>span { font-size:24px; line-height:1; text-align:center; }
.guide-steps p { margin:0; color:#756654; font-size:11px; line-height:1.55; font-weight:700; }
.guide-steps strong { color:#214967; font-size:13px; }
.guide-note { margin:14px 0 0; padding:9px 12px; border-radius:10px; background:#fff1c7; color:#86601f; font-size:11px; font-weight:900; }
.guide-dialog .primary-button { min-height:54px; margin-top:14px; border-radius:14px; font-size:17px; }
@media (max-width:420px) { .guide-dialog{padding:0 12px 18px}.guide-heading{margin:0 -12px 14px;padding:19px 42px 16px}.guide-heading h2{font-size:31px}.guide-heading p{font-size:11px}.guide-preview{grid-template-columns:1fr 24px 1fr;gap:4px}.guide-preview>b{font-size:20px}.guide-preview figure{border-radius:12px}.guide-preview figcaption{min-height:52px;font-size:10px}.guide-preview figcaption strong{font-size:12px}.guide-steps{grid-template-columns:1fr}.guide-steps>div{min-height:auto}.cover-sub-actions{grid-template-columns:1fr 1fr}.guide-button{font-size:13px} }

/* Keep the complete puzzle and its controls inside one viewport. */
.game-screen.active { height:calc(100vh - 68px); height:calc(100svh - 68px); min-height:0; padding:6px 8px 8px; overflow:hidden; display:grid; grid-template-columns:1fr; grid-template-rows:auto auto auto minmax(0,1fr) auto auto; gap:5px; justify-items:center; align-items:center; }
.game-screen .question-name { grid-row:1; margin:0; font-size:13px; line-height:1.2; }
.game-screen .status-row { grid-row:2; margin:0; gap:5px; }
.game-screen .status-row>div { min-height:44px; padding:4px 5px; border-radius:10px; }
.game-screen .status-row small { font-size:9px; }
.game-screen .status-row strong { font-size:17px; }
.game-screen .found-status span { font-size:21px; }
.game-screen .miss-status strong { font-size:14px; }
.game-screen > .memory-badge { grid-row:3; margin:0; padding:6px 12px; font-size:13px; line-height:1.2; }
.game-screen > .picture-frame { grid-row:4; height:100%; width:auto; max-width:100%; min-height:0; aspect-ratio:1200/1821; border-width:2px; border-radius:12px; box-shadow:0 5px 14px #5e401e44; }
.game-screen > .picture-frame img { width:100%; height:100%; object-fit:fill; }
.game-screen > .ready-button,.game-screen > .review-button { grid-row:5; width:min(100%,360px); min-height:44px; margin:0; border-radius:13px; font-size:15px; }
.game-screen > .game-hint { grid-row:6; margin:0; font-size:11px; line-height:1.2; }
@media (max-height:620px) { .game-screen.active{gap:3px;padding-top:4px}.game-screen .question-name{font-size:11px}.game-screen .status-row>div{min-height:38px}.game-screen > .memory-badge{padding:4px 10px}.game-screen > .ready-button,.game-screen > .review-button{min-height:38px;font-size:13px}.game-screen > .game-hint{font-size:9px} }