:root{font-family:"Yu Gothic","Hiragino Kaku Gothic ProN",sans-serif;color-scheme:light;--bg:#fff8ee;--ink:#493c36;--muted:#8f8178;--line:#d9c7b5;--panel:#fffdf8;--accent:#d36b4b;--shadow:#bc795917}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);transition:background .5s,color .5s}body[data-mode=dark]{color-scheme:dark;--bg:#181a22;--ink:#e9dcc7;--muted:#a59b8e;--line:#55515a;--panel:#252731;--accent:#c4a477;--shadow:#0003}button,input{font:inherit}button{color:inherit;cursor:pointer;touch-action:manipulation}button:disabled{opacity:.35;cursor:default}button:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:5px}header{height:76px;max-width:740px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:16px 24px}#mode{border:1px solid var(--line);border-radius:50%;width:42px;height:42px;background:var(--panel);font-size:25px}.volume{display:flex;gap:12px;align-items:center;font-size:12px;color:var(--muted)}input{width:90px;accent-color:var(--accent)}main{max-width:580px;margin:auto;text-align:center;padding:10px 20px 48px}h1{font:500 52px/1.2 Georgia,serif;letter-spacing:.03em;margin:0 0 12px}.question{font-size:16px;letter-spacing:.12em;margin:0 0 28px}.slots{display:flex;justify-content:center;gap:12px;min-height:56px}.slot{position:relative;display:grid;place-items:center;width:49px;height:54px;border:1px solid var(--line);border-radius:4px;font:34px Georgia,serif;background:var(--panel)}.slot.filled::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ink)}.slot.revealed::before{display:none}.slot.tail::after{content:"";position:absolute;left:25px;top:29px;width:18px;height:1.5px;transform:rotate(48deg);transform-origin:left center;background:var(--ink)}.slot.revealed.tail::after{display:none}.workbench{position:relative;width:min(100%,400px);height:340px;margin:12px auto 0}.vessel{position:absolute;left:50%;top:46px;width:155px;transform:translateX(-50%)}.vessel svg{width:100%;height:244px;overflow:visible}.vessel>span{font-size:13px;letter-spacing:.18em;color:var(--muted)}.glass{fill:var(--panel);stroke:var(--line);stroke-width:2}.metal{fill:var(--line);stroke:var(--ink);stroke-width:1.3}.handle,.mark{fill:none;stroke:var(--line);stroke-width:3}.shine{fill:none;stroke:#fff5;stroke-width:6;stroke-linecap:round}.switch{fill:var(--accent)}.liquid{fill:var(--accent);opacity:.6;transition:y .3s}.shaker{display:none}body[data-mode=dark] .shaker{display:block}body[data-mode=dark] .blender{display:none}.ingredient{position:absolute;width:47px;height:47px;border:0;background:transparent;padding:5px;transition:transform .15s}.ingredient::before{content:"";display:block;width:33px;height:33px;border-radius:50%;background:var(--color);box-shadow:inset 3px 3px 0 #ffffff45,0 5px 10px var(--shadow);transform:none}.ingredient:active{transform:scale(.88)}#status{height:28px;margin:0 0 12px;font-size:14px;color:var(--muted)}.actions{display:flex;gap:14px;justify-content:center}.actions button,dialog>button:not(.close){border:1px solid var(--line);background:var(--panel);border-radius:6px;min-height:46px;padding:10px 24px}.actions .primary{background:var(--accent);border-color:var(--accent);color:var(--bg);min-width:136px}.actions button:active:not(:disabled){transform:translateY(2px)}dialog{color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:10px;width:360px;max-width:calc(100% - 40px);text-align:center;padding:40px 24px}dialog::backdrop{background:#0008}dialog h2{font:40px Georgia,serif;letter-spacing:.14em;margin:10px 0 30px}.close{position:absolute;right:8px;top:8px;border:0;background:none;font-size:25px;width:36px;height:36px}.mixing{animation:shake .16s infinite alternate}@keyframes shake{from{transform:translateX(calc(-50% - 3px)) rotate(-3deg)}to{transform:translateX(calc(-50% + 3px)) rotate(3deg)}}@media(prefers-reduced-motion:reduce){*,*::before{animation:none!important;transition:none!important}}@media(max-width:380px){header{height:65px}.workbench{height:310px}.vessel{top:36px}h1{font-size:44px}}

/* 丸い解答枠。最後の丸の外側にRの下半分を添える。 */
.slots{gap:16px;min-height:76px}
.slot{width:50px;height:50px;border-radius:50%}
.slot.filled{background:var(--ingredient-color);border-color:var(--ingredient-color);color:#29252b}
.slot.filled::before{display:none}
.slot.tail::before{content:"";display:block;position:absolute;left:11px;top:calc(100% - 2px);width:1.5px;height:23px;background:var(--ink)}
.slot.tail::after{left:35px;top:calc(100% - 2px);width:27px;height:1.5px;transform:rotate(58deg)}
.slot.revealed.tail::before,.slot.revealed.tail::after{display:none}

[hidden]{display:none!important}
#order:empty{display:none}#order{margin:0 0 22px;letter-spacing:.08em}
.example-hint{display:flex;align-items:center;justify-content:center;gap:10px;margin:28px auto 0;padding:26px 16px;border:1px solid var(--line);border-radius:8px;max-width:360px}
.example-hint[data-mode=dark]{background:#181a22;color:#e9dcc7}.example-hint[data-mode=light]{background:#fff8ee;color:#493c36}
.hint-dot{width:30px;height:30px;border-radius:50%;flex:none}.hint-picture{font-size:32px;margin-left:12px}
#restart{display:block;margin:24px auto 0;background:none;border:0;color:var(--muted);font-size:12px;text-decoration:underline;text-underline-offset:4px}
.slots{gap:10px}.slot{flex:none;width:clamp(36px,10vw,50px);height:clamp(36px,10vw,50px)}

/* 色相を維持し、背景ごとに材料の明るさと質感を揃える。 */
body,.example-hint[data-mode=light]{--color-wash:#fff8ee;--color-strength:84%}
body[data-mode=dark],.example-hint[data-mode=dark]{--color-wash:#181a22;--color-strength:94%}
.ingredient::before,.hint-dot{background:color-mix(in srgb,var(--color) var(--color-strength),var(--color-wash))}
.ingredient:disabled{opacity:1}
body[data-mode=dark] .ingredient::before{box-shadow:inset 1px 2px 0 #ffffff30,0 3px 12px #0004}
.slot.filled{background:color-mix(in srgb,var(--ingredient-color) var(--color-strength),var(--color-wash));border-color:color-mix(in srgb,var(--ingredient-color) 78%,var(--panel))}
.ingredient::before{transition:box-shadow .12s,filter .12s}
.ingredient.sounding::before{filter:brightness(1.35);box-shadow:0 0 12px 4px var(--color),0 0 32px 8px color-mix(in srgb,var(--color) 60%,transparent),inset 0 0 8px #fff9}
.slot.glowing{box-shadow:0 0 10px 2px var(--ingredient-color),0 0 22px color-mix(in srgb,var(--ingredient-color) 65%,transparent);filter:brightness(1.18)}

/* コーヒー側は白から茶、黒の濃淡。 */
body[data-mode=light]{--accent:#805638}
body[data-mode=light] .liquid{fill:#69412c;opacity:.85}
body[data-mode=light] .ingredient::before{background:var(--color);border:1px solid #59463330;box-shadow:inset 2px 2px 0 #ffffff30,0 4px 9px #50341e16}
.slot.filled[data-material-mode=light]{background:var(--ingredient-color);border-color:#97816c}
.example-hint[data-mode=light] .hint-dot{background:var(--color);border:1px solid #59463330}

.hint-picture{font-family:Georgia,serif;font-size:28px;letter-spacing:.08em}

.hint-equals{font-size:20px;margin-left:4px}.hint-picture{margin-left:0}

.question.final-order{font-size:22px;font-weight:700;color:var(--accent);animation:order-arrive .65s ease-out}
@keyframes order-arrive{from{opacity:.2;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

/* ダーク側は通常時を暗くし、発光時との明暗差を出す。 */
body[data-mode=dark],.example-hint[data-mode=dark]{--color-strength:58%}
body[data-mode=dark] .ingredient::before{box-shadow:inset 1px 1px 0 #ffffff12,0 3px 10px #0004}
body .ingredient.sounding::before{background:var(--color);filter:brightness(1.45);box-shadow:0 0 12px 5px var(--color),0 0 34px 10px color-mix(in srgb,var(--color) 65%,transparent),inset 0 0 9px #fff9}
.slot.glowing{background:var(--ingredient-color);filter:brightness(1.35);box-shadow:0 0 12px 3px var(--ingredient-color),0 0 28px 5px color-mix(in srgb,var(--ingredient-color) 65%,transparent)}

#result h2{font-family:inherit;font-size:26px;font-weight:500;line-height:1.6;letter-spacing:.06em;margin:8px 0 18px}#result-message{line-height:1.8;margin:0 0 24px}#share{display:block;width:180px;margin:0 auto 18px;background:var(--ink);color:var(--bg);padding:14px 20px;text-decoration:none;border-radius:4px}.clear-links{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:26px;font-size:13px}.clear-links a{color:var(--muted);text-underline-offset:4px}

#mode.mode-toggle{position:relative;display:grid;grid-template-columns:1fr 1fr;align-items:center;width:144px;height:42px;padding:4px;border-radius:24px;font-size:13px;background:var(--panel);isolation:isolate}
#mode.mode-toggle::before{content:"";position:absolute;left:4px;top:4px;bottom:4px;width:calc(50% - 4px);border-radius:20px;background:var(--ink);transition:transform .25s ease;z-index:-1}
#mode.mode-toggle[aria-checked=true]::before{transform:translateX(100%)}
.mode-toggle span{line-height:1;color:var(--muted)}
.mode-toggle[aria-checked=false] .mode-light,.mode-toggle[aria-checked=true] .mode-dark{color:var(--bg);font-weight:700}
#sound-notice{width:420px;padding:36px 22px 26px}#sound-notice-text{font-size:16px;line-height:1.9;margin:0 0 24px}

#reopen-result{display:block;margin:24px auto 0;padding:8px 16px;background:none;border:0;color:var(--ink);font:inherit;font-size:14px;text-decoration:underline;text-underline-offset:5px;min-height:44px}