/* Grandma's Birthday Party: phone + house board styles (TV page layout lives in tv.html) */
.timer{font-family:var(--head);font-size:22px;letter-spacing:1px;background:var(--ink);color:var(--accent);padding:2px 10px;display:inline-block}
.phase-h{font-family:var(--head);font-size:30px;letter-spacing:1px;color:var(--primary);margin:4px 0}
.rules{padding-left:0;list-style:none;margin:6px 0}.rules li{margin:6px 0}
.waitbox{text-align:center;padding:14px 6px}.waitbox .e{font-size:64px;line-height:1.1}
.rolebadge{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;border:3px solid;background:#fbf5e4;font-size:21px;vertical-align:middle;margin-right:6px}
.rolecard{border:3px solid var(--ink);background:#fbf5e4;padding:8px 10px;margin:8px 0;box-shadow:3px 3px 0 var(--ink);display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.3}
.rolecard .e{font-size:38px;line-height:1}.rolecard b{display:block;font-family:var(--head);font-weight:400;font-size:20px;letter-spacing:.5px;color:var(--primary)}
.here{border:3px dashed var(--ink);padding:6px 10px;margin:8px 0}
.here h3{font-family:var(--head);font-weight:400;font-size:22px;letter-spacing:.5px;margin:0 0 4px}
.kid{display:inline-flex;align-items:center;gap:6px;border:2px solid var(--ink);background:var(--paper);padding:2px 8px;margin:2px 4px 2px 0;font-size:15px}
.kid.zz{opacity:.6}
.pips{display:inline-flex;gap:3px;vertical-align:middle}.pips i{width:10px;height:10px;border-radius:50%;border:2px solid #1f1a15;background:#fbf5e4;display:block}.pips i.f{background:#3d7a35}
.acts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px 0}
.abtn{border:3px solid var(--ink);background:#fbf5e4;color:var(--ink);padding:8px 6px;text-align:left;cursor:pointer;font-family:var(--font);font-size:13px;line-height:1.2;min-height:70px;touch-action:manipulation;box-shadow:3px 3px 0 var(--ink);display:flex;gap:8px;align-items:flex-start}
.abtn .e{font-size:28px;line-height:1}.abtn b{display:block;font-family:var(--head);font-weight:400;font-size:19px;letter-spacing:.5px}
.abtn.special{background:#f4dc9c}.abtn.sel{background:var(--accent);box-shadow:0 0 0 3px var(--primary),3px 3px 0 var(--ink)}
.abtn[disabled]{opacity:.45;cursor:default}
.abtn .why{display:block;font-style:italic;opacity:.9}
.picks{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:6px 0 10px}
.pbtn{border:3px solid var(--ink);background:var(--paper);color:var(--ink);font-family:var(--head);font-size:19px;letter-spacing:.5px;padding:8px 4px;cursor:pointer;touch-action:manipulation;box-shadow:3px 3px 0 var(--ink);min-height:52px}
.pbtn small{display:block;font-family:var(--font);font-size:12px;opacity:.8}
.plan{list-style:none;padding:0;margin:8px 0;counter-reset:pl}.plan li{border-bottom:2px dashed rgba(31,26,21,.35);padding:5px 0;font-size:15px}
.plan li::before{counter-increment:pl;content:counter(pl) ". ";font-family:var(--head);color:var(--primary)}
.plan li.empty{opacity:.6}.plan li.empty::before{content:"· "}
.gobtn{font-size:34px!important;min-height:76px!important;margin-top:6px}
.row2{display:flex;gap:8px}.row2 .btn{flex:1}
.crystal{border:3px solid #6b3fa0;background:#ece4f7;padding:8px 10px;margin:8px 0;font-size:14px;line-height:1.35;box-shadow:3px 3px 0 #6b3fa0}
.crystal b{font-family:var(--head);font-weight:400;font-size:19px;letter-spacing:.5px;color:#6b3fa0}
.heckles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:8px 0}
.hbtn{font-size:36px;border:3px solid var(--ink);background:var(--paper);min-height:62px;cursor:pointer;box-shadow:3px 3px 0 var(--ink);touch-action:manipulation}
.hbtn[disabled]{opacity:.4;cursor:default}
.evlines{list-style:none;padding:0;margin:8px 0;font-size:15px}.evlines li{padding:4px 0;border-bottom:2px dashed rgba(31,26,21,.3)}
.diffs{display:flex;gap:8px;flex-wrap:wrap}
.meters{display:flex;gap:10px;flex-wrap:wrap;font-size:14px;margin:6px 0}.meters span{border:2px solid var(--ink);padding:2px 8px;background:var(--paper)}
/* mini house map on the phone */
.mini{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin:8px 0}
.mini div{border:2px solid var(--ink);background:#fbf5e4;min-height:58px;padding:2px 3px;font-size:13px;line-height:1.15;position:relative;overflow:hidden}
.mini div.me{box-shadow:0 0 0 3px var(--accent)}.mini div.adj{border-style:dashed}
.mini .rn{font-family:var(--head);font-size:13px;letter-spacing:.3px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini .nz{position:absolute;right:2px;top:1px;font-size:10px}
/* ---------- the house (TV) ---------- */
.house{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;padding:clamp(6px,.7vw,14px) clamp(8px,1vw,18px) 0}
.roof{height:clamp(34px,5.5vh,70px);background:#b3261e;clip-path:polygon(6% 100%,50% 0,94% 100%);display:flex;align-items:flex-end;justify-content:center;color:#f3e8cf;font-family:var(--head);font-size:clamp(14px,1.4vw,28px);letter-spacing:2px;padding-bottom:2px;flex:none}
.rooms{position:relative;flex:1;min-height:0;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:1fr 1fr;gap:0;border:5px solid var(--ink);background:var(--ink)}
.room{position:relative;background:#fbf5e4;border:3px solid var(--ink);min-height:0;overflow:hidden}
.room.r2{border-top-width:6px}
.room .rh{position:absolute;left:6px;top:3px;font-family:var(--head);font-size:clamp(14px,1.35vw,28px);letter-spacing:.5px;line-height:1;z-index:1}
.room .perk{position:absolute;left:6px;top:calc(clamp(14px,1.35vw,28px) + 6px);font-size:clamp(10px,.8vw,16px);opacity:.75;z-index:1}
.room .bg{position:absolute;right:4%;bottom:2%;font-size:clamp(40px,6vw,120px);opacity:.16;line-height:1;pointer-events:none}
.room .nz{position:absolute;right:6px;top:4px;font-size:clamp(12px,1vw,22px);z-index:1}
.room.loud{background:#f7dccf}.room.loud2{background:#f2c6b6}.room.loud3{background:#eaa895}
.room.cozy .bg{opacity:.22}
.room.shake{animation:roomshake .5s 2}
@keyframes roomshake{25%{transform:translate(-4px,1px) rotate(-.6deg)}50%{transform:translate(3px,-1px)}75%{transform:translate(-2px,1px) rotate(.4deg)}}
.room.flash{animation:roomflash .9s}
@keyframes roomflash{30%{background:#e2a72e}}
.room.mine{box-shadow:inset 0 0 0 5px var(--accent)}
.room.splat::after{content:"😵";position:absolute;left:50%;top:40%;font-size:clamp(30px,3.6vw,70px);animation:splat .8s ease-out forwards;transform:translate(-50%,-50%)}
@keyframes splat{0%{transform:translate(-50%,-50%) scale(.3);opacity:0}30%{opacity:1;transform:translate(-50%,-50%) scale(1.3)}100%{opacity:0;transform:translate(-50%,-90%) scale(1)}}
.link{position:absolute;z-index:2;font-size:clamp(12px,1vw,20px);background:#e2a72e;border:2px solid var(--ink);padding:0 5px;line-height:1.3;transform:translate(-50%,-50%);font-family:var(--head);letter-spacing:.5px;white-space:nowrap}
.tok{position:absolute;z-index:3;width:var(--tk);height:var(--tk);margin:calc(var(--tk)/-2) 0 0 calc(var(--tk)/-2);border-radius:50%;border:4px solid;background:#fbf5e4;display:flex;align-items:center;justify-content:center;font-size:calc(var(--tk)*.62);box-shadow:2px 3px 0 rgba(31,26,21,.8);transition:left .65s ease-in-out,top .65s ease-in-out;--tk:clamp(30px,3.3vw,64px)}
.tok.kid{border-radius:30% 30% 45% 45%;z-index:4;--tk:clamp(30px,3.1vw,60px)}
.tok.kid.run{transition:left .85s cubic-bezier(.5,-0.3,.5,1.3),top .85s cubic-bezier(.5,-0.3,.5,1.3)}
.tok .pp{position:absolute;bottom:-34%;left:50%;transform:translateX(-50%);display:flex;gap:2px}
.tok .pp i{width:calc(var(--tk)*.17);height:calc(var(--tk)*.17);border-radius:50%;border:2px solid #1f1a15;background:#fbf5e4;display:block}.tok .pp i.f{background:#3d7a35}
.tok .zz{position:absolute;right:-38%;top:-50%;font-size:60%;animation:zz 2s infinite}
@keyframes zz{50%{transform:translate(4px,-6px)}}
.tok.kid.asleep{filter:saturate(.45) brightness(.95);opacity:.85;border-style:dashed}
.tok.kid.asleep .pp{display:none}
.tok .nm{position:absolute;top:100%;left:50%;transform:translateX(-50%);font-family:var(--head);font-size:calc(var(--tk)*.3);white-space:nowrap;background:rgba(251,245,228,.9);color:#1f1a15;padding:0 3px;margin-top:2px;letter-spacing:.3px}
.tok.kid .nm{margin-top:calc(var(--tk)*.24)}
.tok.turn{box-shadow:0 0 0 5px var(--accent),2px 3px 0 rgba(31,26,21,.8);z-index:5}
.tok.hop{animation:hop .3s 2}
@keyframes hop{50%{transform:translateY(-30%)}}
.tok.wiggle{animation:wig .4s 3}
@keyframes wig{25%{transform:rotate(-14deg)}75%{transform:rotate(14deg)}}
.tok.kid.asleep.wiggle{animation:none}
.tok.bounce{animation:hop .25s 4}
.float{position:absolute;z-index:8;font-family:var(--head);font-size:clamp(16px,1.6vw,34px);color:#1f1a15;background:#e2a72e;border:2px solid #1f1a15;padding:0 6px;white-space:nowrap;pointer-events:none;animation:floatup 1.3s ease-out forwards;transform:translate(-50%,-50%)}
.float.bad{background:#b3261e;color:#f3e8cf}.float.zzz{background:#d9d2ec}
@keyframes floatup{0%{opacity:0;transform:translate(-50%,-20%) scale(.6)}20%{opacity:1;transform:translate(-50%,-60%) scale(1.15)}100%{opacity:0;transform:translate(-50%,-180%) scale(1)}}
/* status row: driveway, mess, chaos card */
.status{display:grid;grid-template-columns:1.5fr 1fr auto;gap:clamp(8px,1vw,16px);align-items:stretch;padding:clamp(6px,.7vw,12px) clamp(8px,1vw,18px);flex:none}
.drive{position:relative;border:3px solid var(--ink);background:#7a7a72;height:clamp(46px,6.2vh,80px);overflow:hidden}
.drive::before{content:"";position:absolute;left:0;right:0;top:50%;border-top:4px dashed #f3e8cf;opacity:.7}
.drive .home{position:absolute;right:4px;top:50%;transform:translateY(-50%);font-size:clamp(26px,3vw,58px);line-height:1}
.drive .car{position:absolute;top:50%;transform:translate(-50%,-50%) scaleX(-1);font-size:clamp(28px,3.2vw,62px);line-height:1;transition:left 1s ease-in-out;left:6%}
.drive .gm{position:absolute;top:50%;transform:translate(-20%,-85%);font-size:clamp(14px,1.3vw,26px);transition:left 1s ease-in-out;z-index:1}
.drive .lbl{position:absolute;left:0;top:0;bottom:0;width:28%;background:#1f1a15;color:#f3e8cf;font-family:var(--head);font-size:clamp(11px,.9vw,18px);letter-spacing:.5px;line-height:1.05;display:flex;flex-direction:column;justify-content:center;padding:0 8px;z-index:2}
.drive .lbl b{font-weight:400;font-size:170%;color:#e2a72e}
.drive.close{animation:closepulse 1s infinite}
@keyframes closepulse{50%{box-shadow:0 0 0 4px #b3261e}}
.meter{border:3px solid var(--ink);background:#fbf5e4;position:relative;height:clamp(46px,6.2vh,80px);overflow:hidden}
.meter .fill{position:absolute;left:0;top:0;bottom:0;background:repeating-linear-gradient(45deg,#b3261e 0 12px,#c9443a 12px 24px);transition:width .6s ease-out}
.meter .lbl{position:absolute;left:8px;top:50%;transform:translateY(-50%);font-family:var(--head);font-size:clamp(16px,1.5vw,30px);letter-spacing:.5px;z-index:1;color:#1f1a15;text-shadow:0 0 4px #fbf5e4,0 0 4px #fbf5e4}
.meter.bump{animation:tilepulse .5s 2}
@keyframes tilepulse{50%{transform:scale(1.04)}}
.chaos{border:3px solid var(--ink);background:#1f1a15;color:#f3e8cf;min-width:clamp(120px,12vw,240px);display:flex;align-items:center;gap:8px;padding:2px 10px;height:clamp(46px,6.2vh,80px);box-sizing:border-box}
.chaos .ce{font-size:clamp(24px,2.6vw,50px);line-height:1}.chaos .cn{font-family:var(--head);font-size:clamp(13px,1.2vw,24px);letter-spacing:.5px;line-height:1.05}
.chaos .cn small{display:block;font-family:var(--font);font-size:70%;opacity:.75;letter-spacing:0}
.chaos.flip{animation:flip .6s}
.chaos.off{text-decoration:line-through;opacity:.7}
@keyframes flip{0%{transform:rotateY(90deg)}100%{transform:none}}
@media (prefers-reduced-motion: reduce){.room.shake,.tok.hop,.tok.wiggle,.tok.bounce,.drive.close,.chaos.flip,.meter.bump{animation:none}.tok,.tok.kid.run{transition-duration:.25s}.float{animation-duration:.8s}}