*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#eee6d8;color:#473c55;font-family:system-ui,-apple-system,sans-serif}body{background:radial-gradient(ellipse at 20% 20%,#fff5d9,transparent 60%),#e4dfe9}main{width:min(960px,100% - 24px);margin:auto}header{height:74px;display:flex;align-items:center;justify-content:space-between;gap:8px}strong{font-size:24px;letter-spacing:3px;text-align:center}small{display:block;font-size:9px;letter-spacing:2px;margin-top:5px}a{color:#655777;text-decoration:none;font-size:12px}button{font:600 13px system-ui;border:1px solid #b5a5ba;border-radius:12px;background:#faf4e9;color:#554463;min-height:44px;padding:8px 14px;cursor:pointer;box-shadow:0 3px #c9bdcc}button:active{transform:translateY(2px);box-shadow:none}button:disabled{opacity:.4;cursor:default}.bar{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px;font-size:13px}.scene{position:relative;aspect-ratio:2;border:7px solid #695a78;border-radius:18px;overflow:hidden;background:#ddd5e3;box-shadow:0 8px 0 #c4b6c8}canvas{display:block;width:100%;height:100%;outline:none;touch-action:none}#overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:12px;background:#fbf1e8f5}#overlay[hidden]{display:none}h1{font-size:clamp(22px,4vw,40px);line-height:1.2;margin:10px 0}em{display:block;font-style:normal;color:#877390}p{font-size:13px;line-height:1.65;margin:5px 0;max-width:440px}#guide{font-size:11px;color:#7d6f87}#primary{background:#6d587f;color:#fff;margin:10px 0 6px;min-width:180px}#restart{margin-bottom:5px}#notice{height:30px;text-align:center;max-width:none;padding-top:7px;font-size:12px}nav{display:flex;justify-content:center;gap:10px;margin:8px 0}nav button{min-width:54px;touch-action:none}footer{text-align:center;font-size:10px;color:#8a7d91;margin:12px 0}[hidden]{display:none!important}@media(max-width:600px) and (orientation:portrait){header{height:62px}strong{font-size:20px}header small{font-size:6px}header button{padding:5px 8px}.bar{font-size:11px;margin-bottom:6px}.scene{width:100%;aspect-ratio:auto;height:calc(100svh - 223px);max-height:380px;min-height:280px}.scene canvas{object-fit:contain}h1{font-size:25px}#overlay{padding:12px}#copy{font-size:12px}nav{gap:5px}nav button{font-size:11px;padding:5px;min-width:44px}#switch{flex:1}footer{font-size:9px;margin:6px 0}#notice{font-size:10px}}@media(max-height:500px) and (orientation:landscape){main{display:grid;grid-template-columns:190px 1fr;gap:5px 10px;max-width:100%;height:100svh}header{height:auto;flex-wrap:wrap;grid-column:1;justify-content:space-around}header strong{order:-1;width:100%;font-size:19px}.bar{grid-column:1;flex-wrap:wrap;font-size:11px;margin:0}.scene{grid-column:2;grid-row:1/6;align-self:center;max-height:calc(100svh - 18px);height:calc(100svh - 18px);aspect-ratio:auto}.scene canvas{object-fit:contain}#notice{grid-column:1;height:auto;font-size:10px}nav{grid-column:1;flex-wrap:wrap;gap:6px;margin:0}nav button{font-size:11px;padding:5px;min-width:52px}footer{grid-column:1;font-size:9px;margin:0}h1{font-size:25px}#copy{font-size:12px}#guide{font-size:10px}}