/* Study Games — phone styles for every minigame (board + standalone). */
#sGame{padding:.6rem .8rem;touch-action:none}
.pad{position:relative;flex:1;border:1px solid var(--border);border-radius:16px;background:#10141c;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none}
/* cable */
.cab{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between}
.cab .row{display:flex;justify-content:space-evenly;align-items:flex-start;gap:.35rem;padding:0 .3rem}
.cab .row.bottom{align-items:flex-end;padding-bottom:.6rem}
.port{width:56px;height:34px;border-radius:0 0 28px 28px;border:5px solid #94a3b8;border-top:0;background:rgba(255,255,255,.04);z-index:2;touch-action:none}
.port.on{box-shadow:0 0 0 3px rgba(255,255,255,.35)}
.term{flex:1;min-width:0;min-height:56px;border-radius:12px;background:var(--surface);border:2px solid var(--border);display:flex;align-items:center;justify-content:center;text-align:center;padding:.35rem .3rem;font-weight:700;font-size:.85rem;line-height:1.15;z-index:2;word-break:break-word}
.term.on{border-color:var(--accent)}
.cab svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
/* cards */
.cards{position:absolute;inset:0;display:flex;justify-content:space-evenly;align-items:flex-end;padding:0 4% 6%}
.pcard{width:20%;aspect-ratio:5/7;border-radius:14px;display:grid;place-items:center;font:800 2.6rem 'Syne',sans-serif;color:#fff;box-shadow:0 8px 20px rgba(0,0,0,.45);border:3px solid rgba(255,255,255,.25);transition:transform .35s ease,opacity .35s;touch-action:none}
.pcard.gone{transform:translateY(-140%) rotate(-8deg);opacity:0}
/* weak point */
.cross::before,.cross::after{content:'';position:absolute;background:rgba(255,255,255,.08)}
.cross::before{left:50%;top:0;bottom:0;width:2px}.cross::after{top:50%;left:0;right:0;height:2px}
.ripple{position:absolute;width:60px;height:60px;margin:-30px 0 0 -30px;border-radius:50%;border:3px solid var(--accent);animation:rip .4s ease-out forwards;pointer-events:none}
@keyframes rip{from{transform:scale(.3);opacity:1}to{transform:scale(1.6);opacity:0}}
/* controller (Splash Zone) */
#stickZone{position:absolute;left:0;top:0;bottom:0;width:50%;border-right:2px dotted #2c3344}
.base{position:absolute;width:150px;height:150px;margin:-75px 0 0 -75px;border-radius:50%;border:3px solid rgba(232,234,240,.35);background:rgba(255,255,255,.04);pointer-events:none;opacity:.35}
.base.on{opacity:1}
.knob{position:absolute;left:50%;top:50%;width:66px;height:66px;margin:-33px 0 0 -33px;border-radius:50%;background:var(--me,#f6a62b)}
.ab{position:absolute;border-radius:50%;display:grid;place-items:center;font:800 2.6rem 'Syne',sans-serif;color:#12151c;box-shadow:0 7px 0 rgba(0,0,0,.35)}
.ab.down{transform:translateY(5px);box-shadow:0 2px 0 rgba(0,0,0,.35)}
#btnA{width:min(34vh,160px);height:min(34vh,160px);right:8%;top:12%;background:var(--accent)}
#btnB{width:min(26vh,120px);height:min(26vh,120px);right:36%;top:52%;background:var(--accent2)}
.splat{position:absolute;font-size:2.2rem;pointer-events:none;transform:translate(-50%,-50%)}
.verdict{font-family:'Syne',sans-serif;font-weight:800;font-size:3.2rem;line-height:1}
.verdict.ok{color:var(--good)} .verdict.no{color:var(--bad)}

/* Answer Shortly — high noon */
.duel{background:#f5e6c8;color:#3b2412;border:5px solid #8b5a2b;border-radius:8px;padding:1rem;display:flex;flex-direction:column;gap:.7rem;font-family:Georgia,'Times New Roman',serif;box-shadow:0 8px 18px rgba(0,0,0,.35)}
.duel .wanted{font:900 1.8rem/1 Georgia,serif;letter-spacing:.12em;text-align:center;border-bottom:3px double #8b5a2b;padding-bottom:.3rem}
.duel .dq{font-weight:700;font-size:1.15rem;line-height:1.3}
.duel input{background:#fffaf0;color:#3b2412;border:2px solid #8b5a2b;font-size:1.1rem}
.duel .btn-primary{background:#7f1d1d;border-color:#7f1d1d;color:#fff}
.duel .dmsg{font-style:italic;text-align:center;margin:0}
.duel .dmsg.miss{color:#b91c1c;font-weight:700}
/* Control Flow — bucket and spouts */
.holes{position:absolute;left:0;right:0;top:12px;display:flex;justify-content:space-evenly}
.hole{position:relative;width:20%;aspect-ratio:1;border-radius:14px 14px 50% 50%;background:#334155;border:4px solid #94a3b8;display:grid;place-items:center;font:800 1.6rem 'Syne',sans-serif;color:#e2e8f0;transition:transform .15s,border-color .15s}
.hole.over{border-color:#38bdf8;transform:scale(1.08)}
.hole.filled{border-color:#38bdf8;background:linear-gradient(180deg,#334155 40%,#0ea5e9)}
.bucket{position:absolute;line-height:0;transform:translate(-50%,-50%);touch-action:none;user-select:none;cursor:grab;filter:drop-shadow(0 6px 8px rgba(0,0,0,.4))}
.bucket.tip{transform:translate(-50%,-50%) rotate(-130deg);transition:transform .3s}

/* Knowhow Knockout */
.tf{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin-top:1rem}
.tf .btn{padding:1.6rem .5rem;font:800 1.5rem 'Syne',sans-serif;border:none;color:#fff}
.tfT{background:#16a34a}.tfF{background:#dc2626}
.tf .btn:disabled{opacity:.5}
/* Smartillery */
#gun{background:repeating-linear-gradient(0deg,#1f2a17 0 38px,#22301a 38px 40px),#1f2a17}
.aim{position:absolute;display:none;width:56px;height:56px;margin:-28px 0 0 -28px;border:3px solid #fde047;border-radius:50%;pointer-events:none}
.aim::before,.aim::after{content:'';position:absolute;background:#fde047}
.aim::before{left:50%;top:-12px;bottom:-12px;width:3px;margin-left:-1.5px}.aim::after{top:50%;left:-12px;right:-12px;height:3px;margin-top:-1.5px}
.aim.boom{border-color:#f97316;animation:boom2 .5s ease-out}
@keyframes boom2{50%{transform:scale(1.8)}}
/* Tower Defense */
/* Tower Defense: four colored slots hanging from the top edge, the answer under each */
.tdcols{position:absolute;inset:0;display:grid;grid-template-columns:repeat(4,1fr)}
.tdcol{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:0 4px 12px;border-right:1px dashed #2c3344;cursor:pointer}
.tdcol:last-child{border-right:0}
.tdslot{width:74%;max-width:120px;aspect-ratio:2/1;border:4px solid;border-top:0;border-radius:0 0 999px 999px;display:grid;place-items:center;position:relative}
.tdslot b{font:800 1.5rem 'Syne',sans-serif}
.tdtw{position:absolute;font-size:2.2rem;opacity:0;transform:translateY(-120%);transition:transform .35s cubic-bezier(.3,1.6,.5,1),opacity .2s;filter:drop-shadow(0 3px 4px rgba(0,0,0,.5))}
.tdcol.built .tdtw{opacity:1;transform:translateY(0)}
.tdcol.built .tdslot b{opacity:0}
.tdsel{font-weight:700;font-size:.95rem;text-align:center;line-height:1.2;color:#e8eaf0;overflow-wrap:anywhere;max-height:4.8em;overflow:hidden}
#tdPad.locked .tdcol:not(.built){opacity:.3}
#tdPad.locked .tdcol.built{background:rgba(255,255,255,.06)}
/* Raft Rush: joystick only — the stick zone is the whole pad */
#stickZone.full{width:100%;border-right:0}
.tower{position:absolute;display:none;font-size:2rem;transform:translate(-50%,-80%);pointer-events:none;filter:drop-shadow(0 3px 4px rgba(0,0,0,.5))}
/* Pot Luck */
.board{display:flex;justify-content:space-evenly;align-items:flex-end;padding-bottom:6%;background:repeating-linear-gradient(90deg,#b07a46 0 22px,#a36f3e 22px 44px)}
.ingr{width:20%;aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.75);display:grid;place-items:center;font-size:2.6rem;box-shadow:0 6px 12px rgba(0,0,0,.3);transition:transform .35s,opacity .35s;touch-action:none}
.ingr.gone{transform:translateY(-160%) rotate(200deg);opacity:0}

/* Control Flow: a pipe stub under each spout, like the big screen */
.hole .stub{position:absolute;left:50%;top:100%;width:16px;height:28px;margin-left:-8px;background:linear-gradient(90deg,#64748b,#cbd5e1,#64748b);border:2px solid #1f2937;border-top:0}
.hole.filled .stub{background:linear-gradient(90deg,#0284c7,#7dd3fc,#0284c7)}

.pshell{position:absolute;width:14px;height:30px;margin:-30px 0 0 -7px;border-radius:7px 7px 3px 3px;background:linear-gradient(90deg,#3f4a1f,#6b7c35,#3f4a1f);border:2px solid #1c2410;animation:pshell .65s cubic-bezier(.55,0,1,.6) forwards;pointer-events:none}
@keyframes pshell{from{transform:translateY(-100vh) scale(1.4)}to{transform:translateY(0) scale(1)}}

/* No zooming on game controls: quick double taps on A/B (or anything) must never zoom the phone */
html, body { touch-action: manipulation; }
.pad, .pad *, .tf button, .jbtn, #sGame button { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }

/* Fire Fighter & Grocery Run (motion) */
.mpad{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;padding:1rem}
.mpad .mhint{position:static;text-align:center;max-width:22rem;margin:0}
.mpad .mgo{font-size:1.15rem;padding:.8rem 1.4rem}
.cupwrap{position:relative;width:40%;max-width:180px;margin:1.5rem 0}
.cup{width:100%;display:block;transform-origin:50% 50%;transition:transform .12s}
.cup.pouring{filter:drop-shadow(0 0 14px rgba(56,189,248,.8))}
.tiltmeter{width:60%;height:10px;border-radius:999px;background:#1e293b;overflow:hidden}
.tiltmeter i{display:block;height:100%;width:0;background:linear-gradient(90deg,#38bdf8,#0ea5e9);transition:width .15s}
.holdpour{width:80%;max-width:320px;height:34%;min-height:120px;border-radius:18px;border:3px dashed #38bdf8;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem;color:#bae6fd;background:linear-gradient(180deg,rgba(56,189,248,.06),rgba(56,189,248,.28));touch-action:none}
.holdpour b{font:800 1.4rem 'Syne',sans-serif}.holdpour.down{border-style:solid;background:linear-gradient(180deg,rgba(56,189,248,.2),rgba(56,189,248,.55))}
.gtree{font-size:min(42vw,11rem);line-height:1;transform-origin:50% 100%;user-select:none}
.gtree.shake{animation:treeshake .35s}
.gtree.tappable{cursor:pointer;filter:drop-shadow(0 0 18px rgba(132,204,22,.5))}
@keyframes treeshake{20%{transform:rotate(-7deg)}45%{transform:rotate(6deg)}70%{transform:rotate(-4deg)}100%{transform:none}}
.gcount{font:800 1.3rem 'Syne',sans-serif;color:#bef264}
.gfruit{position:absolute;top:22%;font-size:2rem;pointer-events:none;animation:gfall 1s ease-in forwards}
@keyframes gfall{to{transform:translateY(55vh) rotate(260deg);opacity:0}}