:root { --acc:#1F4E79; --acc2:#f5a623; --bg:#eaf3fb; --cloud:#ffffff; }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { margin:0; height:100%; }
body { font-family:-apple-system, "Hiragino Maru Gothic ProN", "Hiragino Sans", "Yu Gothic", sans-serif; font-size:20px; color:#222; background:var(--bg); overflow:hidden; -webkit-user-select:none; user-select:none; }
.screen { display:none; position:absolute; inset:0; overflow:auto; padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.screen.show { display:flex; flex-direction:column; }
.screen.dark { background:#000; }
.card { background:#fff; border-radius:18px; padding:20px; margin:auto; width:min(92vw, 640px); box-shadow:0 4px 18px rgba(0,0,0,.08); }
.center { text-align:center; }
h1 { font-size:40px; margin:6px 0 10px; color:var(--acc); }
h2 { font-size:28px; margin:6px 0 12px; color:var(--acc); }
.sub { font-size:18px; color:#555; margin:0; }
.meta { font-size:15px; color:#666; }
.badge { display:inline-block; background:#e3edf7; color:var(--acc); border-radius:999px; padding:3px 12px; font-size:15px; }
.badge.ok { background:#dff3e3; color:#1b5e20; } .badge.ng { background:#fde2e2; color:#b71c1c; }
button, .btnlike { font-size:22px; padding:14px 22px; border:0; border-radius:14px; background:var(--acc); color:#fff; margin:8px 6px; min-height:56px; min-width:56px; font-family:inherit; }
button.big { font-size:30px; padding:20px 30px; min-height:80px; width:90%; max-width:480px; background:var(--acc2); color:#222; font-weight:bold; box-shadow:0 4px 0 #c47f0e; }
button.big:active { transform:translateY(3px); box-shadow:none; }
button.sub, .btnlike { background:#5b7fa6; }
button.ghost { background:#e9eef4; color:#333; }
button.small { font-size:17px; padding:8px 14px; min-height:44px; }
.btnlike { display:inline-block; cursor:pointer; }
label.f { display:block; font-size:16px; color:#555; margin:10px 0 4px; }
input[type=text] { font-size:22px; padding:10px; border:2px solid #bbb; border-radius:10px; width:80%; max-width:360px; text-align:center; font-family:inherit; }
label.row { display:flex; align-items:center; gap:10px; font-size:18px; margin:10px 0; }
.rules { display:flex; justify-content:space-around; gap:10px; margin:14px 0 20px; }
.rule { flex:1; background:#f4f8fc; border-radius:14px; padding:12px 6px; font-size:19px; line-height:1.4; }
.rule .ico { display:block; font-size:56px; margin-bottom:6px; }

/* S3 */
#s3.show { display:grid; grid-template-rows:auto auto auto auto; gap:8px; padding:8px; }
.mapwrap { position:relative; width:100%; max-height:52vh; margin:0 auto; overflow:hidden; border-radius:14px; background:#cfe3f4; }
.mapwrap img { display:block; width:100%; height:auto; max-height:52vh; object-fit:contain; margin:0 auto; }
#clouds { position:absolute; inset:0; display:grid; }
.cloud { background:var(--cloud); opacity:.96; border:2px solid #d5e6f5; box-shadow:inset 0 0 30px #dfeefb; transition:opacity 1s ease; border-radius:8px; position:relative; }
.cloud::after { content:"☁"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:38px; color:#b8d2ea; }
.cloud.clear { opacity:0; pointer-events:none; }
.cloud.blink { animation:blink 1s infinite; }
@keyframes blink { 50% { opacity:.5; } }
.pulse { position:absolute; width:64px; height:64px; margin:-32px 0 0 -32px; border-radius:50%; border:5px solid var(--acc2); box-shadow:0 0 0 0 rgba(245,166,35,.7); animation:pulse 1.4s infinite; pointer-events:none; }
@keyframes pulse { 0% { transform:scale(.7); box-shadow:0 0 0 0 rgba(245,166,35,.7);} 100% { transform:scale(1.15); box-shadow:0 0 0 24px rgba(245,166,35,0);} }
.mark { position:absolute; margin:-14px 0 0 -14px; font-size:28px; pointer-events:none; }
.testband { position:absolute; top:0; left:0; right:0; background:#ffd54f; color:#222; text-align:center; font-size:16px; padding:3px; }
.hintcard { background:#fff; border-radius:14px; padding:10px 14px; }
.hinttop { display:flex; justify-content:space-between; align-items:center; }
.hint { font-size:26px; line-height:1.5; margin:8px 0; }
.pieces { display:grid; gap:3px; justify-content:center; margin:0 auto; background:#fff; padding:6px; border-radius:12px; }
.piece { width:64px; height:48px; border-radius:6px; background:#dbe6f1; display:flex; align-items:center; justify-content:center; font-size:20px; color:#7a8fa6; background-repeat:no-repeat; }
.piece.on { color:transparent; animation:snap .6s ease; }
@keyframes snap { 0% { transform:scale(1.6) rotate(8deg); opacity:.3;} 100% { transform:none; opacity:1;} }
.pieces.big { --pw:240px; --ph:180px; } .pieces.big .piece { width:var(--pw); height:var(--ph); }
/* 演出 */
.chest.closed { animation:shake .9s ease infinite; }
@keyframes shake { 0%,100% { transform:rotate(0);} 25% { transform:rotate(-8deg) scale(1.05);} 75% { transform:rotate(8deg) scale(1.05);} }
.sparkle { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.sparkle span { position:absolute; font-size:30px; animation:fly 1.6s ease-out forwards; }
@keyframes fly { 0% { transform:translate(0,0) scale(.3); opacity:1;} 100% { transform:translate(var(--dx), var(--dy)) scale(1.4); opacity:0;} }
.count { position:fixed; inset:0; background:rgba(31,78,121,.94); color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; z-index:20; }
.count .num { font-size:160px; font-weight:bold; animation:pop .9s ease; }
.count .msg { font-size:34px; }
.confetti { position:fixed; inset:0; pointer-events:none; overflow:hidden; z-index:15; }
.confetti i { position:absolute; top:-20px; width:12px; height:18px; animation:fall linear forwards; }
@keyframes fall { 0% { transform:translateY(0) rotate(0);} 100% { transform:translateY(110vh) rotate(720deg);} }
#s6 .card { position:relative; overflow:hidden; }
.treasurepic { width:min(80vw, 480px); border-radius:14px; border:6px solid var(--acc2); margin:8px auto; display:block; }
.actions { display:flex; flex-direction:column; align-items:center; gap:4px; }
.actions.row { flex-direction:row; flex-wrap:wrap; justify-content:center; padding:8px; background:#111; }
.actions.row button, .actions.row .btnlike { font-size:17px; padding:10px 14px; min-height:48px; margin:4px; }

/* S4 */
.camwrap { position:relative; flex:1; display:flex; align-items:center; justify-content:center; background:#000; overflow:hidden; }
#video { width:100%; height:100%; object-fit:cover; }
.frame { position:absolute; width:min(32vw, 32vh); height:min(32vw, 32vh); left:50%; top:50%; transform:translate(-50%,-50%); }
.corner { position:absolute; width:40px; height:40px; border:6px solid var(--acc2); }
.corner.tl { left:0; top:0; border-right:0; border-bottom:0; } .corner.tr { right:0; top:0; border-left:0; border-bottom:0; }
.corner.bl { left:0; bottom:0; border-right:0; border-top:0; } .corner.br { right:0; bottom:0; border-left:0; border-top:0; }
.camtip { position:absolute; bottom:12px; left:0; right:0; text-align:center; color:#fff; font-size:24px; text-shadow:0 2px 6px #000; margin:0; }

/* S5 */
.codebox { font-size:44px; letter-spacing:.3em; margin:10px 0; font-family:monospace; }
.keypad { display:grid; grid-template-columns:repeat(3, 90px); gap:10px; justify-content:center; }
.keypad button { margin:0; font-size:32px; min-height:70px; }

/* S6 / S8 */
.chest { font-size:120px; animation:pop .8s ease; }
@keyframes pop { 0% { transform:scale(.3) rotate(-10deg);} 60% { transform:scale(1.2);} 100% { transform:scale(1);} }
.award { background:linear-gradient(#fff9e6, #fff); border:6px double var(--acc2); }
.toast { position:fixed; left:50%; bottom:100px; transform:translateX(-50%); background:rgba(0,0,0,.85); color:#fff; padding:14px 22px; border-radius:14px; font-size:22px; max-width:90vw; text-align:center; z-index:9; }