html,body{margin:0;height:100%;background:#08101f;color:#fff;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;overflow:hidden;touch-action:none}
#wrap{position:fixed;inset:0;display:grid;place-items:center;background:radial-gradient(circle at 50% 10%,#233a6b 0,#111c36 34%,#070b16 100%)}
canvas{width:min(100vw,66.7vh);height:min(150vw,100vh);max-width:720px;max-height:1080px;border-radius:28px;box-shadow:0 30px 80px #0009;background:#101b33}
#topbar{position:fixed;top:max(12px,env(safe-area-inset-top));left:50%;z-index:3;transform:translateX(-50%);width:min(92vw,620px);display:flex;justify-content:space-between;gap:10px;pointer-events:none}
#topbar div{min-width:72px;padding:8px 12px;border:1px solid #ffffff24;border-radius:18px;background:#08101fcc;box-shadow:0 10px 30px #0006;text-align:center}
#topbar span{display:block;font-size:10px;letter-spacing:.18em;color:#9fb7dd}
#topbar strong{display:block;font-size:22px;line-height:1.05}
#card{position:fixed;z-index:4;left:50%;top:50%;transform:translate(-50%,-50%);width:min(86vw,430px);padding:24px;border:1px solid #ffffff2b;border-radius:30px;background:linear-gradient(180deg,#17284ee8,#0c1327f0);box-shadow:0 30px 90px #000c;text-align:center}
body[data-phase=play] #card{display:none}.eyebrow{margin:0 0 8px;color:#ffd36b;letter-spacing:.22em;text-transform:uppercase;font-size:12px}
h1{font-size:clamp(32px,7.5vw,52px);line-height:.96;margin:0 0 14px}
.legend{display:grid;grid-template-columns:1fr;gap:8px;margin:0 auto 14px;max-width:330px;text-align:left}
.legend div{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid #ffffff24;border-radius:18px;background:#ffffff0c;color:#eef5ff;font-size:15px}
.mail-icon,.storm-icon{display:inline-grid;place-items:center;flex:0 0 auto;width:42px;height:30px;border-radius:8px;box-sizing:border-box;font-weight:900;line-height:1}
.mail-icon{background:#ffd36b;border:3px solid #8b5b13;position:relative;box-shadow:0 0 18px #ffd36b55}
.mail-icon:before{content:"";position:absolute;left:5px;right:5px;top:5px;height:12px;border-bottom:3px solid #8b5b13;transform:skewY(-24deg)}
.mail-icon:after{content:"";position:absolute;left:12px;right:12px;bottom:7px;height:5px;background:#fff4bf;border-radius:3px}
.storm-icon{background:#1a2030;border:3px solid #ff738d;color:#ff738d;font-size:23px;box-shadow:0 0 18px #ff738d3d}
#hint{color:#c6d6f6;font-size:16px;line-height:1.45;margin:0 0 18px}
button{appearance:none;border:0;border-radius:999px;background:#ffd36b;color:#1d1300;font-weight:900;font-size:18px;padding:14px 22px;box-shadow:0 10px 0 #b97824;cursor:pointer}
button:active{transform:translateY(5px);box-shadow:0 5px 0 #b97824}
#toast{position:fixed;z-index:3;bottom:max(18px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);padding:10px 16px;border-radius:999px;background:#f7fbff;color:#111827;font-weight:900;letter-spacing:.06em;box-shadow:0 14px 35px #0008;transition:opacity .2s}
body[data-phase=title] #toast,body[data-phase=over] #toast{opacity:.88}
@media (max-height:720px){#card{padding:18px}h1{font-size:34px}.legend div{padding:7px 10px}.mail-icon,.storm-icon{width:36px;height:26px}#hint{font-size:14px;margin-bottom:12px}button{padding:12px 18px}}