body{color:#281f22;background:#f6f2ea url(pattern.svg) repeat}header{border-color:#ccbdb4}header b,.ey,header small,footer{color:#78495a}.panel{background:#fff8e7;border:2px solid #894758;border-radius:9px;box-shadow:0 5px #c0a79e}.top{background:#f2e6cf;color:#482937;border-bottom:1px solid #cbb198;padding:8px 16px}.body{padding:12px}.hero em{color:#af1935}.info{color:#453039}.bomb,.action{background:#ffda3a}.action{border:2px solid #7a3546}.track i{background:#e1cbbb}.track .on{background:#ad3149}
#prompt:not(:empty){display:flex;align-items:center;gap:9px;margin:6px 0;padding:8px 12px;background:linear-gradient(#fff485,#ffcf18);border:2px solid #d5a52d;border-radius:8px;font-size:clamp(16px,2.6vw,29px);line-height:1.4}#prompt:not(:empty):before{content:"Q";font:1000 1.7em/1 system-ui;color:#bf1030;text-shadow:1px 2px white}
.grid:not(:empty){grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;margin:9px 0;background:#894256;border:2px solid #894256}.tile,.brandcell{min-width:0;min-height:clamp(78px,12vh,120px);display:flex;align-items:center;justify-content:center;position:relative;border:0;border-radius:0;padding:12px 4px;font-size:clamp(14px,2.5vw,28px);font-weight:900;text-align:center;overflow-wrap:anywhere}.tile{color:#21191b;background:linear-gradient(125deg,#fffae5,#f0ebce);text-decoration:underline;text-decoration-color:#af4152;text-underline-offset:.2em}.tile small{display:none}.tile:enabled:hover{background:#fff0ac}.tile.safe{background:#cfe6b5}.tile.bad{background:#fac1bc}.tile.safe small,.tile.bad small{display:block;position:absolute;left:4px;top:3px;color:#643442}.brandcell{flex-direction:column;background:#efd2d1;color:#ad1939;text-shadow:1px 2px white}.brandcell small{font:bold 10px monospace;color:#74374f}.result{border-color:#b52e48}@media(max-width:600px){main,header,footer{width:96%}.body{padding:7px}.tile{font-size:clamp(14px,4vw,21px)}.grid:not(:empty){gap:1px}.brandcell{font-size:16px}}
[hidden]{display:none!important}.clock{position:relative;display:flex;align-items:center;width:min(65%,390px);height:42px;border:3px ridge #aaa49c;border-radius:8px;background:#211d1e;box-shadow:0 2px 3px #765d57}.clock i{position:absolute;z-index:2;left:-6px;border-radius:100%;border:2px solid #50484a;background:linear-gradient(#fff,#a89f9a);width:42px;height:42px;text-align:center;font:1000 30px/39px sans-serif;color:#ae1127}.meter{position:absolute;inset:3px 3px 3px 32px;background:repeating-linear-gradient(90deg,transparent 0 6px,#513d4680 6px 8px),linear-gradient(0deg,#0003,transparent 45%,#fff9 54%,transparent 80%),linear-gradient(90deg,#da452a,#ffc143 51%,#82c53c 78%,#3192d6);overflow:hidden}.meter div{background:#201a23db;position:absolute;right:0;inset-block:0;width:0}.clock span{margin-left:auto;position:relative;padding:0 7px;color:white;text-shadow:1px 1px 3px #161118,-1px -1px 2px #201b20}.clock b{font:900 28px monospace}.top{gap:6px}#levels{display:flex;gap:7px}#levels button,#home,#records{padding:10px;border:1px solid #966e66;border-radius:7px;font-weight:bold;background:#fff7db}#levels button{flex:1;background:#ffda49}#records{margin-top:14px}#list p{margin:0;padding:8px;border-bottom:1px solid #ded1c0;font-size:14px}.tile{flex-direction:column}.tile.pending{outline:4px solid #ea203b;outline-offset:-4px;z-index:1}.tile .note{color:#b91627;text-decoration:none;font-size:clamp(11px,1.45vw,17px);font-weight:850}.tile.dim{filter:brightness(.71)}.tile .cross{position:absolute;inset:0;display:grid;place-items:center;font:900 clamp(54px,8vw,92px)/1 sans-serif;color:#cd1239;text-shadow:0 1px white}.result:not(:empty){background:#ffedd0;padding:12px;margin:12px 0}.result h2{margin:0}#status{display:block;color:#803e35}
#levels button{color:#251f1d;border:2px solid #5e4d47;box-shadow:0 3px #66524c}#levels button:nth-child(1){background:#9ddba4}#levels button:nth-child(2){background:#ffdc62}#levels button:nth-child(3){background:#ff9993}#levels button:disabled{opacity:.55}.basis{color:#665954;font-size:13px;line-height:1.6}#home{margin:4px}#start{font-size:15px}
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(110px,40%);align-items:center;padding:12px clamp(6px,2vw,26px) 4px;gap:8px}.hero .bomb{width:clamp(116px,19vw,184px);height:auto;aspect-ratio:1.06;justify-self:center;margin:35px 0 8px;font-size:clamp(42px,7vw,72px);background:radial-gradient(ellipse at 24% 25%,#fff5b4 0 6%,transparent 7%),radial-gradient(circle at 32% 30%,#ffe77b,#ffce37 68%,#eaa82c);box-shadow:5px 6px 0 #bc8461}.hero .bomb:after{font-size:.65em;top:-1.12em;right:23%;color:#ea763e}@media(max-width:390px){.hero{grid-template-columns:minmax(0,1fr) 36%}.hero h2{font-size:clamp(22px,7vw,27px)}.hero .bomb{width:min(100%,116px)}}
body{min-height:0}
#viewport{position:fixed;inset:0;height:100vh;height:100dvh;padding:max(5px,env(safe-area-inset-top)) max(7px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(7px,env(safe-area-inset-left));display:flex;align-items:flex-start;justify-content:center}
#stage{width:min(960px,100%);min-width:0;transform-origin:top center}
#stage>*,#stage main{width:100%}
#stage header{padding:5px 3px}
#stage main{padding:5px 0}
#stage footer{padding:3px 0}
#stage h1{font-size:clamp(22px,min(4vw,5vh),38px);margin:0 0 5px}
#stage main>.ey,#stage footer{display:none}
.body>:empty{display:none}
.grid:not(:empty){margin:5px 0;grid-auto-rows:minmax(min-content,1fr)}
.tile,.brandcell{min-height:clamp(48px,10dvh,96px);padding:5px 3px}
.tile .note{line-height:1.15}
#stage .tile,#stage .brandcell{overflow-wrap:anywhere;line-height:1.2}
.result:not(:empty){padding:6px 10px;margin:5px 0}
.result p{margin:4px 0}
#home,#start{margin:3px 0;padding:8px}
@media(max-width:560px) and (orientation:portrait){
 #stage header{font-size:13px}
 .grid:not(:empty){grid-template-columns:repeat(3,minmax(0,1fr))}
 #stage .tile{font-size:clamp(14px,4.2vw,20px)}
 #prompt:not(:empty){font-size:clamp(15px,4vw,20px);line-height:1.25}
}
@media(max-height:540px) and (orientation:landscape){
 #stage header,#stage h1{display:none}
 #stage main{padding:0}
 .body{padding:5px 8px}.top{padding:3px 10px}
 .clock,.clock i{height:30px}.clock i{width:30px;line-height:26px;font-size:24px}.clock b{font-size:21px}
 #prompt:not(:empty){font-size:17px;padding:2px 7px;margin:3px 0}
 #stage .tile{font-size:clamp(13px,2vw,18px);padding:3px}.tile,.brandcell{min-height:38px}
 .hero .bomb{width:85px;margin-top:25px;font-size:34px}.hero{padding:0}.hero h2{font-size:25px;margin:2px}
 .info,.basis,#menu h3{margin:5px 0}
 #start,#home{padding:4px 9px}
}
.finale{position:fixed;inset:0;z-index:5;display:grid;place-items:center;overflow:hidden;pointer-events:none;background:#29172468;animation:finale-veil 1.6s both}
.finale-badge{position:relative;z-index:1;display:grid;justify-items:center;padding:14px 30px 18px;border:3px solid #683b2d;border-radius:20px;background:#fff0b8;box-shadow:0 5px #734438;color:#62301b;animation:finale-pop .4s cubic-bezier(.2,.85,.3,1.2) both}
.finale-badge b{font-size:clamp(26px,6vmin,56px);line-height:1.15;letter-spacing:.06em}
.finale-badge i{font:900 clamp(32px,9vmin,72px)/1.12 system-ui;color:#b9630b}
.finale.outcome-bomb .finale-badge{background:#ffd4c7;border-color:#7a1b36;color:#9e1d3c;animation:finale-shake .42s both}
.finale.outcome-bomb i{background:#ffcf42;border:3px solid #462936;color:#462936;border-radius:50%;font:900 clamp(20px,4vmin,32px)/1 monospace;padding:.4em .28em;margin:3px 0 6px;transform:rotate(-12deg)}
.finale.outcome-timeout .finale-badge{color:#31466c;background:#e5edf8;border-color:#48587b}.finale.outcome-timeout i{color:#344f7c}
.finale>span{position:absolute;top:50%;left:50%;background:var(--color);width:9px;height:15px;animation:scatter 1.28s ease-out both}
.finale.outcome-bomb>span{clip-path:polygon(50% 0,100% 100%,0 75%);width:20px;height:22px}
@keyframes scatter{from{transform:scale(.2)}to{transform:translate(var(--x),var(--y)) rotate(var(--rot));opacity:0}}
@keyframes finale-pop{from{transform:scale(.68)}to{transform:scale(1)}}
@keyframes finale-shake{0%{transform:scale(.8)}40%{transform:rotate(-5deg)}70%{transform:rotate(3deg)}100%{transform:none}}
@keyframes finale-veil{0%{opacity:0}12%,75%{opacity:1}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.finale,.finale .finale-badge{animation:none!important}.finale>span{display:none}}
dialog.finale[open]{position:fixed;inset:0;width:100%;max-width:none;height:100dvh;max-height:none;margin:0;padding:12px;border:0;box-sizing:border-box;pointer-events:auto;background:transparent;animation:none}
dialog.finale::backdrop{background:rgba(39,23,31,.66)}
dialog.finale .finale-badge{width:min(420px,100%);box-sizing:border-box;padding:clamp(10px,3vmin,25px);text-align:center;z-index:2}
.finale-badge p{margin:8px 0 12px;font-size:clamp(13px,2.8vmin,17px);color:#382732;line-height:1.45;overflow-wrap:anywhere}
.finale-badge .action{font-size:15px}
.room-brand{display:inline-flex;align-items:center;justify-content:center;gap:6px;color:#20263e;font:800 16px/1 system-ui,sans-serif;letter-spacing:-.035em;text-shadow:none}
.room-brand img{display:block;border-radius:22%;width:27px;height:27px}
.brandcell .room-brand{flex-direction:column;gap:2px;font-size:clamp(10px,1.2vw,14px)}
.brandcell .room-brand img{width:clamp(20px,3.5vmin,32px);height:auto}
.finale-badge .room-brand{margin-bottom:6px;font-size:13px}
.finale-badge .room-brand img{width:22px;height:22px}
@media(max-height:540px) and (orientation:landscape){#stage header{display:flex;padding:0 3px 2px}header .room-brand{font-size:12px}header .room-brand img{width:18px;height:18px}.brandcell .room-brand{flex-direction:row}.brandcell .room-brand img{width:16px}}