/* Escape Room Calling – Richard Sim © */
@font-face{font-family:Fredoka;src:url(fonts/Fredoka.ttf);font-weight:300 700;font-display:block}
@font-face{font-family:Andika;src:url(fonts/Andika-Bold.ttf);font-weight:700}
:root{--yellow:#ffd23f;--ink:#1d2b3a;--g1:#0f4c3a;--g2:#1f7a5a;--g3:#2fb37f;--card:#fffdf6;--red:#ff5a5a;--blue:#3a7bff;--purple:#8a4dff}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden}
body{font-family:Fredoka,'Leelawadee UI',Tahoma,sans-serif;color:var(--ink);background:radial-gradient(circle at 20% 10%,#2fb37f,#1f7a5a 40%,#0f4c3a 100%);user-select:none;-webkit-user-select:none}
button{font-family:inherit;cursor:pointer;color:inherit}
input,select,textarea{font-family:inherit;font-size:16px}
.hide{display:none!important}
#download-book{position:fixed;top:10px;right:12px;z-index:150;background:var(--yellow);color:#222;font-weight:700;padding:9px 15px;border-radius:22px;text-decoration:none;box-shadow:0 3px 8px #0004;min-height:42px;display:flex;align-items:center;font-size:15px;white-space:nowrap;border:2px solid #fff8}
#download-book:hover{background:#ffc400}#download-book .short{display:none}
.scr{position:fixed;inset:0;display:none;flex-direction:column;overflow:auto}.scr.on{display:flex}
.foot{text-align:center;color:#ffffffcc;font-size:14px;padding:6px 0 8px;margin-top:auto;flex:none}
/* home */
.hwrap{max-width:980px;margin:0 auto;padding:46px 18px 10px;display:flex;flex-direction:column;align-items:center;gap:12px;width:100%}
.logo{margin:0;display:flex;flex-direction:column;align-items:center;line-height:.95;text-align:center}
.logo .l1{font-size:clamp(42px,8vw,86px);font-weight:700;color:#fff;letter-spacing:1px;text-shadow:0 5px 0 #0b3a2c,0 8px 18px #0006}
.logo .l2{font-size:clamp(34px,6vw,64px);font-weight:700;color:var(--yellow);text-shadow:0 4px 0 #9a6b00,0 8px 16px #0005;transform:rotate(-2deg)}
.tag{background:#fff;color:var(--g1);font-weight:600;border-radius:22px;padding:6px 16px;font-size:clamp(14px,2.2vw,19px);box-shadow:0 3px 0 #0003;text-align:center}
.hmid{display:flex;align-items:center;gap:14px;max-width:720px}
.max{flex:none}.max svg{width:100%;height:100%;display:block}
.max.mbig{width:150px;height:188px}.max.sm{width:62px;height:78px}
.max.bob{animation:bob 2.2s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-8px)}}
.bubble{background:#fff;border-radius:22px;padding:14px 18px;font-size:clamp(16px,2.2vw,20px);position:relative;box-shadow:0 4px 0 #0002}
.bubble:before{content:'';position:absolute;left:-14px;top:40%;border:9px solid transparent;border-right:14px solid #fff;border-left:0}
.menu{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;width:100%;max-width:900px}
.mbtn{display:flex;align-items:center;gap:12px;border:0;border-radius:22px;padding:16px 16px;text-align:left;font-size:21px;box-shadow:0 6px 0 #0004;transition:transform .1s;min-height:86px}
.mbtn:active{transform:translateY(4px);box-shadow:0 2px 0 #0004}
.mbtn .ic{font-size:40px}.mbtn small{display:block;font-size:14px;font-weight:400;opacity:.85}
.mbtn.c1{background:var(--yellow)}.mbtn.c2{background:#7ee0ff}.mbtn.c3{background:#ffb0d9}
.hlinks{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.hlinks button{background:#ffffff26;border:2px solid #fff6;color:#fff;border-radius:18px;padding:8px 14px;font-size:16px}
/* rooms */
.swrap{max-width:1200px;margin:0 auto;padding:12px 16px;width:100%}
.shead{display:flex;align-items:center;gap:12px;margin:4px 0 10px;padding-right:170px}
.shead h2{margin:0;color:#fff;font-size:32px;text-shadow:0 3px 0 #0004}
.back{width:48px;height:48px;border-radius:50%;border:0;background:#fff;font-size:20px;box-shadow:0 3px 0 #0003;flex:none}
.ltabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.ltab{border:0;border-radius:18px;padding:9px 16px;font-size:17px;font-weight:600;background:#ffffff33;color:#fff}
.ltab.on{background:#fff;color:var(--g1)}
.rgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.rcard{border:0;border-radius:20px;background:var(--card);padding:0;overflow:hidden;text-align:left;box-shadow:0 6px 0 #0003;display:flex;flex-direction:column;position:relative}
.rcard .rimg{height:120px;position:relative;overflow:hidden}
.rcard .rimg img{position:absolute;width:74px;left:50%;top:50%;transform:translate(-50%,-50%);filter:drop-shadow(0 4px 4px #0003)}
.rcard .rimg .d1{width:46px;left:18%;top:30%;opacity:.55}.rcard .rimg .d2{width:46px;left:82%;top:66%;opacity:.55}
.rcard .rb{padding:10px 14px 12px}.rcard h4{margin:0;font-size:21px}.rcard .lv{font-size:13px;font-weight:700;color:#fff;border-radius:10px;padding:2px 8px;display:inline-block;margin-bottom:4px}
.rcard .meta{font-size:14px;color:#56657a;margin-top:4px;display:flex;justify-content:space-between;gap:6px}
.rcard .stars{color:#f5b400;font-size:18px;letter-spacing:1px}
.rcard .cb{display:flex;gap:6px;margin-top:8px}.rcard .cb span{border:0;border-radius:12px;padding:5px 10px;font-size:14px;background:#eef3f7}
/* game */
#game{background:#123}
.gtop{display:flex;align-items:center;gap:8px;padding:8px 170px 6px 10px;background:#0b2f25;color:#fff;flex:none;min-height:64px}
.gbtn{min-width:44px;height:44px;border-radius:14px;border:0;background:#ffffff22;color:#fff;font-size:18px;font-weight:700;padding:0 8px}
.gbtn:hover{background:#ffffff38}
.rname{font-size:21px;font-weight:700;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rname small{font-size:13px;font-weight:600;background:#ffffff26;border-radius:10px;padding:2px 8px;margin-left:6px;vertical-align:middle}
.timer{display:flex;align-items:center;gap:6px;background:#fff;color:var(--g1);border-radius:18px;padding:2px 16px;font-size:36px;font-weight:700;font-variant-numeric:tabular-nums;box-shadow:0 3px 0 #0006;min-width:150px;justify-content:center;line-height:1.2}
.timer .tic{font-size:26px}
.timer.warn{background:#ffe066}.timer.danger{background:var(--red);color:#fff;animation:pulse 1s infinite}
.timer.paused{opacity:.6}.timer.up{background:#d9f7e7}
@keyframes pulse{50%{transform:scale(1.07)}}
.gctl{display:flex;gap:6px}
.teams{display:flex;gap:8px;padding:6px 10px;background:#0b2f25;flex:none;flex-wrap:wrap}
.tchip{display:flex;align-items:center;gap:8px;background:#ffffff1c;color:#fff;border-radius:14px;padding:4px 12px;font-size:18px;font-weight:600;border:3px solid transparent}
.tchip .dot{width:16px;height:16px;border-radius:50%}
.tchip b{font-size:22px}.tchip.on{border-color:var(--yellow);background:#ffffff33;animation:glow 1.4s infinite}
@keyframes glow{50%{box-shadow:0 0 14px #ffd23f}}
.gmain{flex:1;display:flex;gap:10px;padding:10px;min-height:0}
.stagewrap{flex:1;display:flex;align-items:center;justify-content:center;min-width:0;position:relative;container-type:size}
.stage{position:relative;aspect-ratio:16/10;width:min(100cqw,160cqh);border-radius:18px;overflow:hidden;box-shadow:0 8px 30px #0008;background:#ccc}
.stage .wall,.stage .floor{position:absolute;left:0;right:0}.stage .wall{top:0;height:66%}.stage .floor{bottom:0;height:34%}
.stage .floor:before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(90deg,#0000 0 12%,#0000001a 12% 12.4%)}
.stage .deco{position:absolute;opacity:.28;pointer-events:none}
.stage .deco img{width:100%}
.obj{position:absolute;transform:translate(-50%,-50%);cursor:pointer;border:0;background:none;padding:0;transition:transform .15s;filter:drop-shadow(0 4px 3px #0004)}
.obj img,.obj svg{width:100%;display:block;pointer-events:none}
.obj:hover{transform:translate(-50%,-50%) scale(1.08)}
.obj.wig{animation:wig .45s}
@keyframes wig{25%{transform:translate(-50%,-50%) rotate(-10deg)}75%{transform:translate(-50%,-50%) rotate(10deg)}}
.obj.glow{animation:glowo 1s infinite}
@keyframes glowo{50%{filter:drop-shadow(0 0 14px #fff) drop-shadow(0 0 8px #ffd23f)}}
.badge{position:absolute;top:-8%;right:-14%;min-width:2.2em;height:2.2em;border-radius:1.1em;background:var(--yellow);color:#222;font-weight:700;display:flex;align-items:center;justify-content:center;border:3px solid #fff;box-shadow:0 2px 6px #0006;font-size:clamp(10px,1.4cqw,20px);animation:pop 1.6s infinite;pointer-events:none;padding:0 .3em;white-space:nowrap}
.badge.done{background:#2ecc52;color:#fff;animation:none}
@keyframes pop{50%{transform:scale(1.15)}}
.plank{position:absolute;height:2.2%;background:linear-gradient(180deg,#b98552,#8a5a32);border-radius:4px;box-shadow:0 4px 6px #0003}
.ptimer{background:#0b2f25;color:#fff;border-radius:14px;padding:4px 12px;font-size:22px;font-weight:700;font-variant-numeric:tabular-nums}.ptimer.danger{background:var(--red);animation:pulse 1s infinite}
.badge i{font-style:normal}
.door{position:absolute;right:1.5%;bottom:6%;width:13%;cursor:pointer;border:0;background:none;padding:0}
.door svg{width:100%;display:block}
.door .dlock{position:absolute;left:50%;top:50%;width:46%;transform:translate(-50%,-30%)}
.door .dlock svg{filter:drop-shadow(0 3px 3px #0006)}
.door .dcount{position:absolute;left:50%;bottom:-2%;transform:translateX(-50%);background:#fff;border-radius:10px;padding:0 .5em;font-weight:700;font-size:clamp(10px,1.4cqw,20px);white-space:nowrap}
.door.ready .dlock{animation:pop 1s infinite}
.reveal{position:absolute;transform:translate(-50%,-50%);font-size:clamp(20px,4cqw,60px);pointer-events:none;animation:rev 1.6s forwards;z-index:5}
@keyframes rev{0%{opacity:0;transform:translate(-50%,-20%) scale(.4)}25%{opacity:1;transform:translate(-50%,-90%) scale(1.2)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-160%) scale(1)}}
.findbar{position:absolute;left:50%;top:10px;transform:translateX(-50%);width:min(92%,760px);background:#fffbe6;border:4px solid #c9a227;border-radius:18px;padding:10px 12px;display:flex;gap:10px;align-items:center;box-shadow:0 6px 18px #0007;z-index:20}
.fnote{flex:1;display:flex;gap:8px;align-items:center;font-size:clamp(16px,2vw,24px);font-weight:600;font-family:Andika,Fredoka,sans-serif}
.fic{font-size:28px}
.fbtns{display:flex;gap:6px}.fbtns button{border:0;border-radius:12px;background:#fff;box-shadow:0 2px 0 #0003;min-height:42px;padding:0 10px;font-size:16px;font-weight:600}
.side{width:330px;flex:none;display:flex;flex-direction:column;gap:10px;min-height:0;overflow:auto}
.maxtip{display:flex;gap:8px;align-items:center}
.tipbub{background:#fff;border-radius:16px;padding:8px 12px;font-size:16px;flex:1;min-height:52px;display:flex;align-items:center}
.plist{display:flex;flex-direction:column;gap:6px}
.pbtn{display:flex;align-items:center;gap:10px;border:0;border-radius:14px;padding:8px 12px;background:#fff;font-size:17px;font-weight:600;text-align:left;box-shadow:0 3px 0 #0003;min-height:48px}
.pbtn .n{width:32px;height:32px;border-radius:50%;background:var(--yellow);display:flex;align-items:center;justify-content:center;flex:none;font-weight:700}
.pbtn .st{margin-left:auto;font-size:20px}
.pbtn.done{background:#d9f7e7;color:#1f7a3d}.pbtn.done .n{background:#2ecc52;color:#fff}
.inv{background:#0b2f25;border-radius:16px;padding:8px 10px;color:#fff}
.invh{font-weight:700;font-size:16px;margin-bottom:6px}
.invs{display:flex;gap:6px;flex-wrap:wrap}
.slot{width:48px;height:58px;border-radius:12px;background:#ffffff1a;border:2px dashed #ffffff55;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:24px;font-weight:700;font-family:Andika,Fredoka,sans-serif;position:relative}
.slot small{font-size:11px;font-family:Fredoka;font-weight:600;opacity:.8}
.slot.got{background:var(--yellow);color:#222;border:2px solid #fff;animation:pop .6s 2}
.doorbtn{border:0;border-radius:16px;padding:12px;font-size:20px;font-weight:700;background:#8a5530;color:#fff;box-shadow:0 4px 0 #4a2a10;min-height:54px}
.doorbtn.ready{background:var(--yellow);color:#222;box-shadow:0 4px 0 #9a6b00;animation:pulse 1.2s infinite}
.gfoot{padding:2px 0 4px;font-size:12px;background:#0b2f25}
/* overlays */
.ovl{position:fixed;inset:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:200;padding:12px}
.pcard,.mcard{background:var(--card);border-radius:24px;width:min(860px,100%);max-height:100%;overflow:auto;box-shadow:0 10px 40px #0008;padding:16px 18px;position:relative}
.mcard{width:min(640px,100%);text-align:center;padding:22px}
.mcard h2{margin:6px 0 8px;font-size:30px;color:var(--g1)}.mcard p{font-size:18px;margin:8px 0}
.phead{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pnum{width:42px;height:42px;border-radius:50%;background:var(--yellow);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:22px;flex:none;border:3px solid #fff;box-shadow:0 2px 4px #0003}
.phead h3{margin:0;font-size:25px;flex:1}
.pteam{border-radius:12px;padding:3px 10px;color:#fff;font-weight:700}
.pact{display:flex;gap:6px}.pact button{border:0;border-radius:14px;background:#eef3f7;min-height:44px;padding:0 12px;font-size:17px;font-weight:600;box-shadow:0 2px 0 #0002}
.pact button small{font-size:12px;color:#c0392b}
.pprompt{font-size:19px;margin:10px 0 6px;color:#30475e}
.phint{background:#fff7d6;border:2px solid var(--yellow);border-radius:14px;padding:8px 12px;font-size:18px;margin:6px 0}
.pbody{display:flex;flex-direction:column;align-items:center;gap:12px;padding:8px 0}
.pfb{min-height:30px;text-align:center;font-size:20px;font-weight:700}
.pfb.ok{color:#1f9a4a}.pfb.no{color:#d35400}
.big{font-size:22px;border:0;border-radius:18px;padding:12px 24px;font-weight:700;box-shadow:0 5px 0 #0003;min-height:54px}
.go{background:#2ecc52;color:#fff}.alt{background:#eef3f7}.ylw{background:var(--yellow)}
.btnrow{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:12px}
/* puzzle bits */
.ppic{width:120px;height:120px;filter:drop-shadow(0 4px 4px #0003)}.ppic img{width:100%;height:100%}
.tiles{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.lt{width:62px;height:66px;border-radius:14px;border:0;background:linear-gradient(180deg,#5aa7ff,#2f78f0);color:#fff;font-family:Andika,Fredoka,sans-serif;font-size:36px;font-weight:700;box-shadow:0 5px 0 #1d4fb0;display:flex;align-items:center;justify-content:center;text-transform:lowercase}
.lt.used{opacity:.25;pointer-events:none}
.ans{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.as{width:62px;height:66px;border-radius:14px;border:3px dashed #9fb3c8;background:#fff;font-family:Andika,Fredoka,sans-serif;font-size:36px;font-weight:700;display:flex;align-items:center;justify-content:center;cursor:pointer}
.as.f{border-style:solid;border-color:#2f78f0;color:#1d4fb0}.as.lock{border-color:#2ecc52;color:#1f8f3d;background:#e9fbef}
.shake{animation:shake .45s}
@keyframes shake{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
.wheels{display:flex;gap:10px;background:linear-gradient(180deg,#ffe27a,#ffc400);padding:16px 18px;border-radius:24px;border:4px solid #c98f00;box-shadow:0 6px 0 #9a6b00}
.wh{display:flex;flex-direction:column;align-items:center;gap:4px}
.wh button{width:58px;height:36px;border:0;border-radius:10px;background:#fff8;font-size:18px}
.wh .wl{width:58px;height:70px;border-radius:12px;background:#fff;display:flex;align-items:center;justify-content:center;font-family:Andika,Fredoka,sans-serif;font-size:40px;font-weight:700;box-shadow:inset 0 4px 8px #0003;cursor:pointer}
.wh.lock .wl{background:#e9fbef;color:#1f8f3d}
.keypad{display:grid;grid-template-columns:repeat(5,64px);gap:8px;justify-content:center}
.kp{height:60px;border-radius:14px;border:0;background:#fff;font-size:28px;font-weight:700;box-shadow:0 4px 0 #0003;font-family:Andika,Fredoka,sans-serif}
.kp.c{color:#fff;text-shadow:0 2px 0 #0004;font-size:15px;font-family:Fredoka}
.kp.del{background:#ffd9d9;font-size:22px}
.kbd{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;max-width:640px}
.kbd .kp{width:50px;height:54px;font-size:24px;text-transform:lowercase}
.entry{display:flex;gap:8px;min-height:64px;justify-content:center;flex-wrap:wrap}
.entry .es{width:56px;height:62px;border-radius:12px;border:3px solid #9fb3c8;background:#fff;display:flex;align-items:center;justify-content:center;font-size:30px;font-weight:700;font-family:Andika,Fredoka,sans-serif}
.entry .es.col{border:3px solid #fff;box-shadow:0 0 0 2px #9fb3c8}
.entry .es.lock{border-color:#2ecc52}
.listenbtn{font-size:24px;border:0;border-radius:50px;padding:14px 26px;background:#7ee0ff;font-weight:700;box-shadow:0 5px 0 #2aa3c9}
.mgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px 30px;width:100%;max-width:640px}
.mcol{display:flex;flex-direction:column;gap:10px}
.mi{border:3px solid #dde6ef;background:#fff;border-radius:16px;min-height:64px;font-size:22px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:8px;padding:6px 10px;box-shadow:0 3px 0 #0002}
.mi img{width:52px;height:52px}.mi.txt{font-size:17px;font-weight:500;text-align:left}
.mi.sel{border-color:var(--blue);background:#e8f0ff}.mi.ok{border-color:#2ecc52;background:#e9fbef;pointer-events:none}
.mi .sp{font-size:16px;opacity:.7}
.qtxt{font-size:26px;font-weight:600;text-align:center;font-family:Andika,Fredoka,sans-serif;line-height:1.35;max-width:720px}
.qtxt .bl{display:inline-block;min-width:90px;border-bottom:4px solid var(--blue);color:var(--blue)}
.opts{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.opt{border:3px solid #dde6ef;background:#fff;border-radius:16px;font-size:24px;font-weight:600;padding:10px 20px;min-height:60px;min-width:110px;box-shadow:0 3px 0 #0002;display:flex;flex-direction:column;align-items:center;gap:4px;font-family:Andika,Fredoka,sans-serif}
.opt img{width:84px;height:84px}.opt.pic{font-size:18px;font-family:Fredoka;min-width:130px}
.opt.no{opacity:.35;pointer-events:none}.opt.ok{border-color:#2ecc52;background:#e9fbef}
.dots{display:flex;gap:6px}.dots i{width:14px;height:14px;border-radius:50%;background:#dde6ef}.dots i.on{background:#2ecc52}
.sline{min-height:68px;width:100%;max-width:760px;border:3px dashed #9fb3c8;border-radius:16px;padding:8px;display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center;background:#fff}
.chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;max-width:760px}
.chip{border:0;border-radius:14px;padding:10px 16px;font-size:24px;font-weight:600;background:#ffb0d9;box-shadow:0 4px 0 #c96a9e;font-family:Andika,Fredoka,sans-serif}
.chip.in{background:#7ee0ff;box-shadow:0 4px 0 #2aa3c9}.chip.lock{background:#a6ecbc;box-shadow:0 4px 0 #2ecc52;pointer-events:none}
.ckey{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;background:#fff7d6;border:3px solid #e6c34a;border-radius:18px;padding:10px;max-width:520px;width:100%}
.ck{display:flex;align-items:center;gap:6px;justify-content:center;background:#fff;border-radius:12px;padding:4px 6px;font-size:26px;font-weight:700;font-family:Andika,Fredoka,sans-serif}
.ck img{width:42px;height:42px}
.cmsg{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.cm{display:flex;flex-direction:column;align-items:center;gap:4px}
.cm img{width:54px;height:54px}
.cm .as{width:54px;height:58px;font-size:30px}.cm .as.cur{border-color:var(--blue);border-style:solid;background:#e8f0ff}
.xw{display:grid;gap:3px}
.xc{width:var(--xs);height:var(--xs);position:relative}
.xc.l{background:#fff;border:2px solid #34495e;border-radius:6px;display:flex;align-items:center;justify-content:center;font-family:Andika,Fredoka,sans-serif;font-weight:700;font-size:calc(var(--xs)*.58);cursor:pointer;text-transform:lowercase}
.xc.l.sel{background:#fff3b0}.xc.l.cur{background:#ffd23f}.xc.l.ok{background:#d9f7e7;color:#1f8f3d}.xc.l.bad{background:#ffd9d9}
.xc .xn{position:absolute;top:1px;left:3px;font-size:11px;font-family:Fredoka;font-weight:600;color:#667}
.xwrap{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap;justify-content:center}
.xclues{display:flex;flex-direction:column;gap:6px}
.xcl{display:flex;align-items:center;gap:8px;border:2px solid #dde6ef;background:#fff;border-radius:12px;padding:4px 10px;font-size:17px;font-weight:600}
.xcl img{width:44px;height:44px}.xcl.on{border-color:var(--blue);background:#e8f0ff}.xcl.ok{border-color:#2ecc52;background:#e9fbef}
.note{background:#fffbe6;border:4px solid #c9a227;border-radius:18px;padding:16px 20px;font-size:24px;font-family:Andika,Fredoka,sans-serif;max-width:640px;text-align:center}
/* final lock */
.lockbox{display:flex;flex-direction:column;align-items:center;gap:10px}
.lockbox .padsvg{width:96px}
.lslots{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.lslots .es{width:58px;height:66px;border-radius:12px;border:4px solid #c98f00;background:#fff;font-size:34px;font-weight:700;display:flex;align-items:center;justify-content:center;font-family:Andika,Fredoka,sans-serif}
.lnote{background:#fff7d6;border-radius:14px;padding:6px 12px;font-size:18px;font-weight:600}
.revnote{background:#ffe0f0;border:3px solid #ff7ad1;border-radius:14px;padding:6px 12px;font-size:19px;font-weight:700}
/* results */
.stars3{font-size:54px;color:#f5b400;letter-spacing:4px;text-shadow:0 3px 0 #b07d00}
.stars3 .off{color:#dde6ef;text-shadow:none}
.rtab{width:100%;border-collapse:collapse;margin:8px 0;font-size:18px}.rtab td,.rtab th{padding:6px 8px;border-bottom:2px solid #eef3f7}.rtab tr.win td{background:#fff7d6;font-weight:700}
.cnf{position:fixed;top:-20px;width:12px;height:18px;z-index:400;pointer-events:none;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(110vh) rotate(720deg)}}
.flykey{position:fixed;z-index:450;font-size:46px;pointer-events:none;transition:all .9s cubic-bezier(.5,-0.3,.5,1.2)}
.pausebox{background:var(--card);border-radius:24px;padding:24px 40px;text-align:center}
.pausebox h2{font-size:40px;margin:6px 0 14px;color:var(--g1)}
/* settings / forms */
.setg{display:grid;grid-template-columns:1fr;gap:10px;text-align:left;margin:10px 0}
.tog{display:flex;align-items:center;justify-content:space-between;background:#eef3f7;border-radius:14px;padding:8px 14px;font-size:18px;font-weight:600}
.tog input{width:28px;height:28px}
.choice{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:6px 0 12px}
.choice button{border:3px solid #dde6ef;background:#fff;border-radius:14px;padding:10px 14px;font-size:18px;font-weight:600;min-height:50px}
.choice button.on{border-color:var(--g3);background:#d9f7e7}
.tnames{display:flex;flex-direction:column;gap:8px;margin:6px 0}
.tnames div{display:flex;align-items:center;gap:8px}.tnames .dot{width:22px;height:22px;border-radius:50%}
.tnames input{flex:1;border:2px solid #dde6ef;border-radius:12px;padding:8px 10px;font-size:18px}
.lbl{font-weight:700;font-size:18px;margin:10px 0 2px;text-align:left}
.helpc{text-align:left;font-size:17px;line-height:1.45}.helpc h3{margin:12px 0 4px;color:var(--g2)}
/* maker */
.mk{background:var(--card);border-radius:22px;padding:16px;box-shadow:0 6px 0 #0003}
.mk h3{margin:10px 0 6px;color:var(--g2)}
.mk .row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:6px 0}
.mk label{font-weight:600}
.mk input[type=text],.mk select{border:2px solid #dde6ef;border-radius:10px;padding:7px 9px;min-width:0}
.mk input[type=text]{flex:1;min-width:140px}
.slotbox{border:2px solid #dde6ef;border-radius:16px;padding:10px 12px;margin:8px 0;background:#fff}
.slotbox .sh{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.slotbox .sh b{font-size:18px}
.mklist{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.mkitem{display:flex;gap:8px;align-items:center;background:#eef3f7;border-radius:14px;padding:8px 12px;flex-wrap:wrap}
.mkitem b{flex:1;font-size:18px}
.sbtn{border:0;border-radius:12px;padding:8px 12px;font-size:16px;font-weight:600;background:#fff;box-shadow:0 2px 0 #0002;min-height:40px}
.sbtn.g{background:#2ecc52;color:#fff}.sbtn.y{background:var(--yellow)}.sbtn.r{background:#ffd9d9}
.err{color:#c0392b;font-weight:600;min-height:22px}
#cert{display:none}
/* responsive */
@media (max-width:1100px){.side{width:280px}}
@media (max-width:860px),(orientation:portrait) and (max-width:1000px){
 .gmain{flex-direction:column;padding:6px;gap:6px;overflow:auto}
 .stagewrap{flex:none;container-type:inline-size}
 .stage{width:100%}
 .side{width:100%;overflow:visible}
 .plist{display:grid;grid-template-columns:1fr 1fr}
 .pbtn{font-size:15px;padding:6px 8px;gap:6px;min-height:44px}.pbtn .n{width:28px;height:28px}
 .maxtip .max.sm{width:46px;height:58px}.tipbub{font-size:14px;min-height:40px}
 .badge{font-size:10px;top:-22%;right:-30%;min-width:1.9em;height:1.9em;border-width:2px}.badge i{display:none}.door .dcount{font-size:11px}
 .findbar{position:static;transform:none;width:100%;margin-top:6px}
 .stagewrap{flex-direction:column}
}
@media (max-width:600px){
 #download-book .long{display:none}#download-book .short{display:inline}#download-book{padding:7px 12px;min-height:36px;font-size:14px;top:7px;right:8px}
 .menu{grid-template-columns:1fr}.mbtn{min-height:70px;padding:10px 14px}.hwrap{padding-top:52px}
 .max.mbig{width:96px;height:120px}.hmid{gap:8px}.bubble{font-size:15px;padding:10px 12px}
 .gtop{padding:6px 76px 6px 6px;flex-wrap:wrap;gap:6px}.rname{font-size:16px;flex-basis:calc(100% - 52px);order:1}.gtop #gHome{order:0}
 .timer{order:2;font-size:26px;min-width:118px;padding:2px 10px}.timer .tic{font-size:18px}.gctl{order:3;margin-left:auto}.gbtn{min-width:40px;height:40px;font-size:15px}
 .shead{padding-right:64px}.shead h2{font-size:24px}
 .pcard{padding:12px;border-radius:18px}.phead h3{font-size:19px}.pact button{min-height:40px;padding:0 9px;font-size:15px}.pprompt{font-size:16px}
 .lt,.as{width:46px;height:52px;font-size:28px}.wh button,.wh .wl{width:44px}.wh .wl{height:56px;font-size:30px}.wheels{gap:5px;padding:10px}
 .keypad{grid-template-columns:repeat(5,52px)}.kp{height:52px;font-size:24px}.kbd .kp{width:38px;height:46px;font-size:20px}.kbd{gap:4px}
 .qtxt{font-size:20px}.opt{font-size:19px;min-width:90px;padding:8px 12px}.opt img{width:60px;height:60px}.opt.pic{min-width:110px}
 .mi{font-size:18px;min-height:56px}.mi img{width:42px;height:42px}.mi.txt{font-size:14px}.mgrid{gap:8px 12px}
 .chip{font-size:19px;padding:8px 12px}.ck{font-size:20px}.ck img{width:32px;height:32px}.ckey{grid-template-columns:repeat(4,1fr);gap:5px;padding:6px}
 .cm img{width:40px;height:40px}.cm .as{width:42px;height:48px;font-size:24px}
 .lslots .es{width:44px;height:54px;font-size:26px}.entry .es{width:44px;height:52px}
 .tchip{font-size:14px;padding:3px 8px}.tchip b{font-size:16px}
 .rgrid{grid-template-columns:1fr 1fr;gap:10px}.rcard .rimg{height:84px}.rcard .rimg img{width:54px}.rcard h4{font-size:17px}.rcard .meta{font-size:12px;flex-direction:column}
 .note{font-size:19px}.stars3{font-size:42px}
}
@media (min-width:1600px){
 .pcard,.mcard,.hwrap,.swrap{zoom:1.32}
 .side{width:460px;gap:14px}.pbtn{font-size:23px;min-height:62px}.pbtn .n{width:40px;height:40px}.pbtn .st{font-size:26px}
 .slot{width:62px;height:74px;font-size:32px}.invh{font-size:20px}.doorbtn{font-size:26px;min-height:68px}
 .tipbub{font-size:21px}.max.sm{width:84px;height:105px}
 .gtop{min-height:84px;padding-right:240px}.rname{font-size:30px}.timer{font-size:52px;min-width:210px}.timer .tic{font-size:36px}.gbtn{min-width:56px;height:56px;font-size:24px}
 .tchip{font-size:24px}.tchip b{font-size:30px}#download-book{font-size:19px;min-height:52px}
 .findbar{zoom:1.3}
}
@media (max-width:600px){.xclues{display:grid;grid-template-columns:1fr 1fr;gap:5px;width:100%}.xcl{font-size:13px;padding:3px 6px;gap:4px}.xcl img{width:30px;height:30px}.xwrap{gap:8px}}
@media print{
 body{background:#fff;overflow:visible}body>*{display:none!important}#cert{display:block!important}
 @page{size:A4 landscape;margin:0}
}
.certp{width:297mm;height:209mm;padding:12mm;font-family:Fredoka,sans-serif;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.certp .in{border:4mm double #1f7a5a;border-radius:8mm;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:radial-gradient(circle at 50% 35%,#fff8d6,#fff 70%);position:relative}
.certp h1{font-size:54pt;margin:0;color:#1f7a5a;line-height:1}.certp .sub{font-size:18pt;margin:2mm 0}
.certp .nm{font-size:34pt;font-weight:700;border-bottom:.6mm solid #333;min-width:150mm;margin:5mm 0;padding-bottom:1mm;min-height:16mm}
.certp .rm{font-size:20pt}.certp .tm{font-size:26pt;font-weight:700;color:#c0392b;margin:2mm 0}.certp .st{font-size:36pt;color:#f5b400}
.certp .mx{width:42mm;height:52mm;position:absolute;left:12mm;bottom:10mm}.certp .ky{position:absolute;right:16mm;bottom:14mm;font-size:48pt}
.certp .ft{position:absolute;bottom:4mm;left:0;right:0;font-size:10pt;color:#667}