:root{--ink:#16110c;--paper:#f3e6c8;--amber:#f0a83a;--red:#c8261d;--sepia:#5a3a1e}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#120b06;font-family:'Patrick Hand',cursive;color:var(--ink);user-select:none}
#scene-container{position:fixed;inset:0}
.hidden{display:none!important}
#tint{position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle,transparent 30%,rgba(160,0,0,.75));opacity:0;transition:opacity .4s}
#tint.on{opacity:1;animation:beat .8s infinite}
@keyframes beat{50%{opacity:.6}}
#hud{position:fixed;top:10px;left:50%;transform:translateX(-50%);display:flex;gap:8px}
.hud-box{background:var(--paper);border:2.5px solid var(--ink);border-radius:12px 6px 14px 5px;padding:4px 12px;font-size:18px;box-shadow:3px 3px 0 var(--ink)}
.hud-box b{font-family:'Permanent Marker';color:var(--red);font-size:22px}
#plates{position:fixed;top:60px;left:10px;display:flex;flex-direction:column;gap:6px}
.plate{background:var(--paper);border:2px solid var(--ink);border-radius:8px 14px 6px 12px;padding:3px 10px;font-size:15px;min-width:120px;transition:.3s}
.plate.turn{background:var(--amber);transform:translateX(6px)}
.plate.dead{opacity:.4;text-decoration:line-through;border-style:dashed}
.dots{display:flex;gap:3px;margin-top:2px}.dot{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--ink)}.dot.used{background:var(--ink)}
#log{position:fixed;top:60px;right:10px;width:200px;font-size:14px;color:var(--paper);text-shadow:1px 1px 2px #000;text-align:right}
#log div{opacity:.9}
#handArea{position:fixed;bottom:24px;left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:10px}
#hand{display:flex;justify-content:center;height:120px;align-items:flex-end}
.card{width:70px;height:100px;background:var(--paper) repeating-linear-gradient(transparent 0 15px,#9bb8d6 15px 16px);border:2.5px solid var(--ink);border-radius:8px 5px 9px 4px;margin:0 -6px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:'Permanent Marker';font-size:30px;cursor:pointer;transition:transform .15s;box-shadow:2px 3px 0 rgba(0,0,0,.5)}
.card small{font-size:20px}
.card.sel{transform:translateY(-22px) rotate(-3deg)!important;background-color:#ffd889}
.card.disabled{filter:grayscale(.6) brightness(.8);cursor:default}
#actions{display:flex;gap:10px}
.btn{font-family:'Permanent Marker';font-size:18px;padding:10px 18px;background:var(--paper);color:var(--ink);border:3px solid var(--ink);border-radius:14px 6px 12px 8px;box-shadow:4px 4px 0 var(--ink);cursor:pointer;margin:4px}
.btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
.btn:disabled{opacity:.4;cursor:default}
.btn.liar{background:var(--red);color:#fff;font-size:24px}
.btn.liar:not(:disabled){animation:shake 1.4s infinite}
@keyframes shake{0%,80%,100%{transform:rotate(0)}85%{transform:rotate(-4deg)}90%{transform:rotate(4deg)}95%{transform:rotate(-2deg)}}
.btn.ghost{background:transparent}
#bubbles{position:fixed;inset:0;pointer-events:none}
.bubble{position:absolute;transform:translate(-50%,-100%);background:#fff;border:2.5px solid var(--ink);border-radius:16px 10px 18px 8px;padding:5px 10px;font-size:16px;max-width:190px;text-align:center;animation:pop .25s}
@keyframes pop{from{transform:translate(-50%,-100%) scale(.3)}}
#reveal{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(0,0,0,.45);pointer-events:none}
#revealCards{display:flex;gap:14px}
#revealCards .card{margin:0;transform:rotateY(180deg);background:#2b1a0e;color:transparent;transition:transform .4s,background .4s,color .4s}
#revealCards .card.flip{transform:none;background-color:var(--paper);color:var(--ink)}
#stamp{font-family:'Permanent Marker';font-size:64px;margin-top:20px;transform:rotate(-12deg) scale(3);opacity:0;transition:.3s cubic-bezier(.2,2,.5,1);border:6px solid;padding:0 20px;border-radius:12px}
#stamp.on{opacity:1;transform:rotate(-12deg) scale(1)}
#bigText{position:fixed;top:40%;left:50%;transform:translate(-50%,-50%);font-family:'Permanent Marker';font-size:72px;color:var(--paper);text-shadow:4px 4px 0 var(--ink);pointer-events:none;text-align:center;animation:pop .3s}
#bigText.bang{color:#111;background:radial-gradient(circle,var(--red) 40%,transparent 70%);padding:60px 80px;text-shadow:3px 3px 0 #fff}
.screen{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle,rgba(40,20,5,.5),rgba(10,5,0,.92));padding:16px}
.paper{background:var(--paper) repeating-linear-gradient(transparent 0 27px,#9bb8d6 27px 28px);border:3px solid var(--ink);border-radius:20px 8px 24px 10px;padding:24px 28px;max-width:440px;width:100%;text-align:center;box-shadow:8px 8px 0 var(--ink);transform:rotate(-1deg)}
h1{font-family:'Permanent Marker';font-size:44px;margin:0 0 6px;line-height:1}
h1 span{color:var(--red);font-size:38px}
h2{font-family:'Permanent Marker';font-size:36px;margin:0 0 10px}
.tag{font-size:19px;margin:0 0 14px}
ol{text-align:left;font-size:18px;padding-left:22px}
.opt{display:block;font-size:18px;margin:6px}
select{font-family:inherit;font-size:16px}
.stats{margin-top:10px;font-size:17px}
#remix{position:fixed;bottom:4px;right:8px;color:var(--paper);font-size:13px;opacity:.7;z-index:50}
@media (max-width:600px){
 .card{width:56px;height:82px;font-size:24px}
 #hand{height:100px}
 #log{display:none}
 .hud-box{font-size:14px;padding:3px 8px}
 #plates{top:auto;bottom:220px;font-size:12px}
 .plate{min-width:96px;font-size:13px}
 #stamp{font-size:44px}#bigText{font-size:48px}
}