/* training-games.css — the training yard mini-games (training-games.js): a full-screen modal <dialog class="tg">.
   The world (between the HUD and the control pad) is sized by training-games.js: --f figure size, --floor ground line,
   --hx/--kx/--dx where the gladiator, the drillmaster and the dummy stand (torso x), --ks/--kr the drillmaster's scale and
   how far back he stands, --sr/--sb/--tail the bubble, --cx/--cy the callouts, --ty the shield drill's telegraph. */
dialog.tg{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;border-radius:0;background:#1d1108;color:#fff3dc;overflow:hidden;box-shadow:none;--hud:calc(60px + env(safe-area-inset-top));--pad:calc(150px + env(safe-area-inset-bottom));font:16px/1.35 var(--font,'DM Sans',system-ui,sans-serif);text-align:left}
dialog.tg[data-game=block]{--pad:calc(112px + env(safe-area-inset-bottom))}
dialog.tg[data-game=dodge]{--pad:0px}
dialog.tg::backdrop{background:#120803}
dialog.tg[data-calm] *{animation:none!important;transition:none!important}
.tg-screen{position:absolute;inset:0;overflow:hidden;outline:none;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.tg-sr{position:absolute!important;width:1px;height:1px;margin:0;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.tg-bg{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:44% 74%;pointer-events:none}
.tg-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#170a03e0 0,#170a0359 calc(var(--hud) + 34px),#170a0300 42%,#170a0300 68%,#1409039e 100%)}

/* ---------- the world: the drillmaster, the dummy, the gladiator, missiles, particles, callouts ---------- */
.tg-world{position:absolute;left:0;right:0;top:var(--hud);bottom:var(--pad);pointer-events:none}
.tg-shake{position:absolute;inset:0}
.tg-actor{position:absolute;bottom:var(--floor,0px);width:var(--f,200px);height:var(--f,200px)}
.tg-hero{left:calc(var(--hx) - var(--f) * .46);z-index:3}
.tg-keeper{left:calc(var(--kx) - var(--f) * var(--ks) * .54);bottom:calc(var(--floor) + var(--kr));width:calc(var(--f) * var(--ks));height:calc(var(--f) * var(--ks));z-index:1}
dialog.tg[data-game=block] .tg-keeper{z-index:2}
.tg-dummy{left:calc(var(--dx) - var(--f) * .5);z-index:2}
.tg-breath,.tg-flip,.tg-flip .keeper-figure{position:absolute;inset:0}
.tg-breath{transform-origin:50% 97%}
html:not([data-motion=off]) .tg-breath{animation:tg-breathe 3.6s ease-in-out infinite}
html:not([data-motion=off]) .tg-keeper .tg-breath{animation-duration:3.1s}
@keyframes tg-breathe{50%{transform:scale(1.007,1.017)}}
.tg-flip{transform:scaleX(-1)}
dialog.tg .combat-rig{display:block;width:100%;height:100%;overflow:visible}
dialog.tg .combat-rig :is(.rig-body,.rig-head){animation:none}
.tg-shadow{position:absolute;left:24%;right:24%;bottom:-1.5%;height:7%;border-radius:50%;background:radial-gradient(closest-side,#1a0c04b3,#1a0c0400)}
.tg-hero.ouch::after{content:'';position:absolute;left:22%;right:22%;top:6%;bottom:4%;border-radius:40%;background:radial-gradient(closest-side,#ff3b1f70,#ff3b1f00);pointer-events:none}
/* Gerald the dummy: wobbles about the foot of his stake, rips as he takes damage, loses his top on a flawless run. */
.tg-dummy-svg{display:block;width:100%;height:100%;overflow:visible}
.tgd-body{transform-box:view-box;transform-origin:120px 232px}
.tgd-top{transform-box:view-box;transform-origin:120px 110px}
.tgd-stump,.tgd-daze,.tgd-d1,.tgd-d2,.tgd-d3{display:none}
.tg-dummy:is([data-dmg="1"],[data-dmg="2"],[data-dmg="3"]) .tgd-d1,.tg-dummy:is([data-dmg="2"],[data-dmg="3"]) .tgd-d2,.tg-dummy[data-dmg="3"] .tgd-d3{display:inline}
.tg-dummy.dazed .tgd-daze{display:inline}.tg-dummy.dazed .tgd-eyes{display:none}
.tg-dummy.flown .tgd-stump{display:inline}
/* Arrow dodge: missiles, arrows stuck in the gladiator. */
.tg-missiles{position:absolute;inset:0;z-index:4;pointer-events:none}
.tg-missile{position:absolute;left:0;top:0;will-change:transform;filter:drop-shadow(0 3px 2px #0006)}
.tg-missile svg{display:block;width:100%;height:100%;overflow:visible}
.tg-spin{transform-box:fill-box;transform-origin:center}
.tg-stuck{position:absolute;inset:0;pointer-events:none}
.tg-stuck-arrow{position:absolute;display:block;width:20%;height:5.7%}
.tg-stuck-arrow svg{display:block;width:100%;height:100%;overflow:visible}
.tg-stuck-arrow.high{left:52%;top:25%;transform:rotate(-12deg)}
.tg-stuck-arrow.low{left:44%;top:84%;transform:rotate(9deg)}
/* Shield drill: the swing the drillmaster telegraphs, dizzy stars after a bonk. */
.tg-tele{position:absolute;z-index:5;left:calc((var(--hx) + var(--kx)) / 2);top:var(--ty);transform:translate(-50%,-50%);width:clamp(54px,13vmin,84px);aspect-ratio:1;display:grid;place-items:center;border-radius:50%;color:#fff;background:radial-gradient(circle at 38% 32%,#ff8a6a,#e0452f 55%,#a8231a);border:3px solid var(--ss-ink,#2b1709);box-shadow:0 4px 0 var(--ss-ink,#2b1709),0 0 0 5px #fff3dc55,0 0 26px #ff4a2aaa}
.tg-tele[hidden]{display:none}
.tg-tele[data-dir=high]{top:calc(var(--ty) - var(--f) * .24)}
.tg-tele[data-dir=right]{top:calc(var(--ty) + var(--f) * .16)}
.tg-tele .icon{width:62%;height:62%;stroke-width:3}
.tg-dizzy{position:absolute;left:31%;top:-3%;width:40%;height:15%;pointer-events:none}
.tg-dizzy svg{display:block;width:100%;height:100%;overflow:visible}
html:not([data-motion=off]) .tg-dizzy svg{animation:tg-dizzy .7s linear infinite}
@keyframes tg-dizzy{from{transform:rotate(-8deg) translateX(-4%)}50%{transform:rotate(8deg) translateX(4%)}to{transform:rotate(-8deg) translateX(-4%)}}
.tg-fx{position:absolute;inset:0;width:100%;height:100%;z-index:6;pointer-events:none}

/* The drillmaster's bubble: parchment, ink outline, tail at his head (the arrival cutscene's look). */
.tg-say{position:absolute;z-index:7;top:6px;bottom:var(--sb,50%);right:var(--sr,8px);left:var(--sl,8px);display:flex;flex-direction:column;align-items:flex-end;pointer-events:none}
.tg-say[data-at=side]{top:var(--st,8px);bottom:auto;right:8px;align-items:flex-start}
.tg-say[data-at=side] .tg-bubble{margin-top:0;transform-origin:-4% 30%}
.tg-bubble{position:relative;flex-shrink:0;margin-top:auto;width:max-content;max-width:min(300px,100%);padding:11px 12px 8px;background:var(--ss-parch-bg,#f3e3bd);color:var(--ss-parch-ink,#3a220f);border:2.5px solid var(--ss-ink,#2b1709);border-radius:16px;box-shadow:0 3px 0 var(--ss-ink,#2b1709),0 8px 18px #0007;transform-origin:88% 118%}
.tg-bubble[hidden]{display:none}
.tg-bubble:before,.tg-bubble:after{content:'';position:absolute;top:100%;border-style:solid}
.tg-bubble:before{right:calc(var(--tail,30px) - 9px);border-width:14px 2px 0 11px;border-color:var(--ss-ink,#2b1709) transparent transparent transparent}
.tg-bubble:after{right:calc(var(--tail,30px) - 6px);margin-top:-1px;border-width:9px 1px 0 7px;border-color:#ecd7a8 transparent transparent transparent}
.tg-say[data-at=side] .tg-bubble:before{top:14px;right:100%;border-width:2px 14px 11px 0;border-color:transparent var(--ss-ink,#2b1709) transparent transparent}
.tg-say[data-at=side] .tg-bubble:after{top:17px;right:100%;margin:0 -1px 0 0;border-width:1px 9px 7px 0;border-color:transparent #efdcb0 transparent transparent}
.tg-tag{position:absolute;top:-12px;right:12px;max-width:calc(100% - 20px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:1px 8px 2px;border:2px solid var(--ss-ink,#2b1709);border-radius:9px;background:linear-gradient(#fff4,#0000 60%),#b3261e;color:#fff;text-shadow:var(--ss-outline-sm,0 1px 0 #2b1709);box-shadow:0 2px 0 var(--ss-ink,#2b1709);font:400 12px/1.25 var(--ss-font-display,'Lilita One',sans-serif);letter-spacing:.02em}
.tg-bubble p{margin:0;font:700 14px/1.3 var(--font,'DM Sans',sans-serif);color:var(--ss-parch-ink,#3a220f);overflow-wrap:anywhere}

/* Callouts: PERFECT! / GREAT! / WHIFF! with the points, over the action. */
.tg-pops{position:absolute;inset:0;z-index:8;pointer-events:none}
.tg-pop{position:absolute;left:var(--cx,50%);top:var(--cy,30%);transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;white-space:nowrap}
.tg-pop b{font:400 clamp(30px,9vmin,54px)/1 var(--ss-font-display,'Lilita One',sans-serif);letter-spacing:.02em;color:#fff3dc;text-shadow:var(--ss-outline,0 2px 0 #2b1709)}
.tg-pop small{margin-top:4px;font:400 clamp(15px,4.2vmin,21px)/1.1 var(--ss-font-display,'Lilita One',sans-serif);color:#fff3dc;text-shadow:var(--ss-outline-sm,0 1px 0 #2b1709)}
.tg-pop.q3 b,.tg-pop.round b{color:var(--ss-gold,#ffd24a)}
.tg-pop.q2 b{color:#ffb24a}
.tg-pop.q0 b{color:#ff7a5a}
.tg-pop.big b{font-size:clamp(30px,8.6vmin,62px);text-align:center;line-height:.95}
.tg-pop.big{left:50%;top:calc(var(--cy,30%) - 10px);width:min(94%,640px);white-space:normal}
.tg-pop.round{left:50%;top:38%}
.tg-pop.tiny b{font-size:clamp(20px,5.5vmin,28px)}
.tg-pop.tiny{top:calc(var(--cy,30%) + 40px)}

/* ---------- HUD: progress, points × streak multiplier, pause/quit ---------- */
.tg-hud{position:absolute;left:0;right:0;top:0;z-index:9;height:var(--hud);display:flex;align-items:center;gap:8px;padding:env(safe-area-inset-top) max(10px,env(safe-area-inset-right)) 0 max(10px,env(safe-area-inset-left));pointer-events:none}
.tg-hud .tg-x{pointer-events:auto}
.tg-meter{flex:1;min-width:0;display:flex;align-items:center;gap:8px}
.tg-pips{display:flex;flex-wrap:nowrap;gap:5px;margin:0;padding:7px 9px;list-style:none;background:#2b1709d9;border:2px solid var(--ss-ink,#2b1709);border-radius:12px;box-shadow:inset 0 1px 0 #ffd79a33,0 3px 0 #1a0b03a6}
.tg-pips li{flex-shrink:0;width:13px;height:13px;border-radius:50%;background:#5a3a22;border:2px solid #1a0b03;box-shadow:inset 0 2px 0 #ffffff1f}
.tg-pips.grouped{gap:4px}.tg-pips.grouped li{width:11px;height:11px}.tg-pips li.gap{margin-left:5px}
.tg-pips li.now{background:#8a5a2f;box-shadow:0 0 0 2px var(--ss-gold,#ffd24a)}
.tg-pips li[data-q="3"]{background:var(--ss-gold,#ffd24a);box-shadow:0 0 6px #ffd24a}
.tg-pips li[data-q="2"]{background:#ff9f3a}
.tg-pips li[data-q="1"]{background:#e8dcc0}
.tg-pips li[data-q="0"]{background:#c0392b}
.tg-time{flex:1;min-width:60px;height:16px;padding:2px;background:#2b1709d9;border:2px solid var(--ss-ink,#2b1709);border-radius:10px;overflow:hidden;box-shadow:0 3px 0 #1a0b03a6}
.tg-time i{display:block;height:100%;border-radius:6px;background:linear-gradient(#ffe08f,#f0b955 50%,#d18f3a);transform-origin:0 50%;will-change:transform}
.tg-meter .tg-tally{flex-shrink:0;font:400 18px/1 var(--ss-font-display,'Lilita One',sans-serif);color:#fff3dc;text-shadow:var(--ss-outline-sm,0 1px 0 #2b1709)}
.tg-points{flex-shrink:0;display:flex;align-items:center;gap:6px;padding:5px 7px 5px 10px;background:var(--ss-wood-bg,#3b2414);border:2px solid var(--ss-ink,#2b1709);border-radius:12px;box-shadow:var(--ss-panel-shadow,0 3px 0 #1a0b03)}
.tg-points b{min-width:2.4em;text-align:right;font:400 21px/1 var(--ss-font-display,'Lilita One',sans-serif);color:var(--ss-gold,#ffd24a);text-shadow:var(--ss-outline-sm,0 1px 0 #2b1709)}
.tg-points small{padding:3px 6px;border-radius:8px;background:#6b4424;border:1.5px solid #1a0b03;font:400 13px/1 var(--ss-font-display,'Lilita One',sans-serif);color:#fff3dc}
.tg-points.hot small{background:var(--ss-red,#c0392b);color:#fff;box-shadow:0 0 10px #ff6a3a}
dialog.tg .tg-x{flex-shrink:0;width:44px;height:44px;margin:0;padding:0;display:grid;place-items:center;border-radius:50%;background:linear-gradient(#8c5b31,#6b4424 55%,#5a361b);color:#fff0d2;border:2px solid var(--ss-ink,#2b1709);box-shadow:var(--ss-bevel,0 3px 0 #2b1709)}
.tg-x .icon{width:22px;height:22px;stroke-width:2.4}
dialog.tg:is([data-phase=intro],[data-phase=results]) :is(.tg-meter,.tg-points){visibility:hidden}

/* ---------- controls ---------- */
.tg-pad{position:absolute;left:0;right:0;bottom:0;z-index:9;height:var(--pad);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:10px max(14px,env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));background:var(--ss-wood-bg,#3b2414);border-top:3px solid var(--ss-ink,#2b1709);box-shadow:inset 0 3px 0 #ffd79a2e,0 -8px 18px #0006}
dialog.tg[data-game=dodge] .tg-pad{display:none}
dialog.tg .tg-btn{margin:0;border:3px solid var(--ss-ink,#2b1709);border-radius:14px;box-shadow:var(--ss-bevel,0 3px 0 #2b1709);font-family:var(--ss-font-display,'Lilita One',sans-serif);font-weight:400;letter-spacing:.02em;cursor:pointer;touch-action:manipulation}
dialog.tg .tg-btn .icon{flex-shrink:0}
dialog.tg .tg-btn.pressed,dialog.tg .tg-btn:active{transform:translateY(2px);box-shadow:var(--ss-bevel-press,0 1px 0 #2b1709)}
html[data-motion=off] dialog.tg .tg-btn:is(.pressed,:active),dialog.tg[data-calm] .tg-btn:is(.pressed,:active){transform:none}
dialog.tg .tg-btn:focus-visible{outline:3px solid var(--ss-gold,#ffd24a);outline-offset:3px}
/* Dummy smash: the power bar (red, orange OK, gold GREAT, white PERFECT) and STRIKE. */
.tg-bar{position:relative;flex-shrink:0;width:min(560px,100%);height:40px;border:3px solid var(--ss-ink,#2b1709);border-radius:12px;background:#7d1a12;box-shadow:0 3px 0 var(--ss-ink,#2b1709)}
.tg-track{position:absolute;inset:0;overflow:hidden;border-radius:9px;background:linear-gradient(#c0392b,#9e2a1d 55%,#7d1a12)}
.tg-track:after{content:'';position:absolute;inset:0;background:linear-gradient(#ffffff38,#fff0 45%,#0000 60%,#0003)}
.tg-z{position:absolute;top:0;bottom:0}
.tg-z.z-ok{background:#e0782c}
.tg-z.z-great{background:linear-gradient(#ffe9a8,#f6c466 50%,#dc9a42)}
.tg-z.z-perfect{background:#fffbe8;box-shadow:0 0 12px 2px #fff6c2}
.tg-bar.hot .tg-z.z-great{background:linear-gradient(#fff4c2,#ffd24a 50%,#f0a53a)}
.tg-needle{position:absolute;left:0;top:-10px;bottom:-10px;width:8px;margin-left:-4px;border-radius:4px;background:#fff;border:2px solid var(--ss-ink,#2b1709);box-shadow:0 0 0 1px #fff8,0 2px 6px #000a;will-change:transform}
.tg-needle:before{content:'';position:absolute;left:50%;top:-9px;margin-left:-8px;border:8px solid transparent;border-top:9px solid var(--ss-ink,#2b1709);border-bottom:0}
.tg-bar[data-q="3"] .tg-needle{background:var(--ss-gold,#ffd24a)}.tg-bar[data-q="0"] .tg-needle{background:#ff7a5a}
dialog.tg .tg-strike{flex-shrink:0;width:min(560px,100%);min-height:64px;display:flex;align-items:center;justify-content:center;gap:10px;padding:0 18px;font-size:30px;line-height:1;color:#fff;text-shadow:var(--ss-outline-sm,0 1px 0 #2b1709);background:linear-gradient(#ff8a5a,#e0452f 48%,#a8231a)}
.tg-strike .icon{width:32px;height:32px;stroke-width:2.3}
/* Shield drill: three shields, the ring closes on the one to block. */
dialog.tg[data-game=block] .tg-pad{flex-direction:row;gap:10px}
dialog.tg .tg-guard{position:relative;flex:1;min-width:0;max-width:200px;height:84px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:0;color:var(--ss-parch-ink,#3a220f);background:linear-gradient(#f5e6c2,#e3c78f 55%,#caa564);font-size:18px}
.tg-guard .icon{width:34px;height:34px;stroke-width:2.7}
dialog.tg .tg-guard.hot{background:linear-gradient(#fff4c2,#ffd24a 50%,#f0a53a);box-shadow:var(--ss-bevel,0 3px 0 #2b1709),0 0 0 3px #fff8,0 0 24px #ffd24acc}
.tg-ring{position:absolute;inset:-7px;border:4px solid #fff3b0;border-radius:20px;opacity:0;pointer-events:none;box-shadow:0 0 12px #ffd24a,inset 0 0 8px #ffd24a;will-change:transform}
.tg-guard.hot .tg-ring{opacity:1}
/* Arrow dodge: the screen is the control, top half leaps, bottom half ducks. */
.tg-zones{position:absolute;left:0;right:0;top:0;bottom:0;z-index:7;display:grid;grid-template-rows:1fr 1fr}
dialog.tg .tg-zone{position:relative;display:flex;align-items:flex-start;justify-content:flex-start;margin:0;padding:calc(var(--hud) + 6px) max(12px,env(safe-area-inset-left)) 8px;background:transparent;border:0;border-radius:0;box-shadow:none;color:#fff3dc;cursor:pointer;touch-action:none}
dialog.tg .tg-zone.z-up{border-bottom:2px dashed #fff3dc30}
dialog.tg .tg-zone.z-down{align-items:flex-end;padding:8px max(12px,env(safe-area-inset-left)) calc(12px + env(safe-area-inset-bottom))}
.tg-zone span{display:flex;align-items:center;gap:6px;padding:6px 12px 6px 8px;border:2px solid #2b1709b3;border-radius:12px;background:#2b1709a6;font:400 18px/1 var(--ss-font-display,'Lilita One',sans-serif);text-shadow:var(--ss-outline-sm,0 1px 0 #2b1709);box-shadow:0 3px 0 #1a0b0380}
.tg-zone .icon{width:22px;height:22px;stroke-width:2.6}
.tg-zone.z-down .icon{transform:rotate(180deg)}
dialog.tg .tg-zone.pressed span{background:#c98b3ccc;color:#fff}
dialog.tg .tg-zone:focus-visible{outline:3px solid var(--ss-gold,#ffd24a);outline-offset:-6px}
dialog.tg:not([data-phase=play]) .tg-zones{pointer-events:none}

/* ---------- countdown ---------- */
.tg-count{position:absolute;inset:0;z-index:10;display:grid;place-items:center;pointer-events:none;font:400 clamp(96px,30vmin,190px)/1 var(--ss-font-display,'Lilita One',sans-serif);color:var(--ss-gold,#ffd24a);text-shadow:var(--ss-outline,0 2px 0 #2b1709),0 0 40px #ffcf3a88}
.tg-count[hidden]{display:none}
.tg-count[data-go="1"]{color:#fff3dc}

/* ---------- cards: intro, pause, results (parchment over a dimmed yard) ---------- */
.tg-card{position:absolute;z-index:11;inset:calc(12px + env(safe-area-inset-top)) 12px calc(12px + env(safe-area-inset-bottom));margin:auto;width:min(440px,calc(100% - 24px));height:fit-content;max-height:calc(100% - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));overflow:auto;overscroll-behavior:contain;touch-action:pan-y;padding:16px 18px 16px;background:var(--ss-parch-bg,#f3e3bd);color:var(--ss-parch-ink,#3a220f);border:3px solid var(--ss-ink,#2b1709);border-radius:20px;box-shadow:inset 0 0 0 2px #fff8,0 5px 0 var(--ss-ink,#2b1709),0 18px 40px #000a;user-select:text;-webkit-user-select:text}
/* The yard dims behind a card (a plain layer: no giant shadows to composite). */
dialog.tg.carded .tg-screen:after{content:'';position:absolute;inset:0;z-index:10;background:#1a0b0370;pointer-events:none}
.tg-card[hidden]{display:none}
.tg-head{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.tg-medal{flex-shrink:0;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#ffe9a8,#f0b955 55%,#b87a2e);border:3px solid var(--ss-ink,#2b1709);box-shadow:0 3px 0 var(--ss-ink,#2b1709);color:var(--ss-parch-ink,#3a220f)}
.tg-medal .icon{width:28px;height:28px;stroke-width:2.2}
.tg-head small{display:block;font:700 11px/1.2 var(--font,'DM Sans',sans-serif);letter-spacing:.12em;text-transform:uppercase;color:#8a3d12}
dialog.tg .tg-card h3{margin:0;font:400 30px/1.05 var(--ss-font-display,'Lilita One',sans-serif);letter-spacing:.01em;color:var(--ss-parch-ink,#3a220f);text-shadow:none}
.tg-desc{margin:2px 0 10px;font:700 15px/1.35 var(--font,'DM Sans',sans-serif)}
.tg-how{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:7px}
.tg-how li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:8px;align-items:start;font:500 14px/1.35 var(--font,'DM Sans',sans-serif)}
.tg-how .icon{width:22px;height:22px;color:#8a3d12}
.tg-card kbd{display:inline-block;min-width:22px;margin-left:2px;padding:0 6px;border:2px solid var(--ss-ink,#2b1709);border-bottom-width:3px;border-radius:6px;background:#fff8e6;font:700 12px/1.45 var(--font,'DM Sans',sans-serif);text-align:center;white-space:nowrap}
.tg-quote{margin:0 0 10px;padding:7px 10px 8px 12px;border-left:4px solid #b3261e;border-radius:8px;background:#fff8e670}
.tg-quote b{display:block;font:400 13px/1.2 var(--ss-font-display,'Lilita One',sans-serif);letter-spacing:.03em;color:#b3261e}
.tg-quote p{margin:2px 0 0;font:italic 600 14.5px/1.35 var(--font,'DM Sans',sans-serif)}
.tg-note{display:flex;gap:7px;align-items:center;margin:0 0 12px;font:600 13px/1.35 var(--font,'DM Sans',sans-serif);color:#6e4a26}
.tg-note .icon{width:18px;height:18px}
.tg-actions{display:flex;gap:10px}
dialog.tg .tg-actions .tg-btn{flex:1;min-height:52px;display:flex;align-items:center;justify-content:center;gap:8px;padding:0 14px;font-size:21px;line-height:1}
.tg-actions .tg-btn .icon{width:22px;height:22px;stroke-width:2.4}
dialog.tg .tg-go{flex:1.4;color:var(--ss-parch-ink,#3a220f);background:linear-gradient(#ffe08f,#f0b955 48%,#d18f3a);text-shadow:0 1px 0 #fff4}
dialog.tg .tg-back{color:#fff0d2;background:linear-gradient(#8c5b31,#6b4424 55%,#5a361b);text-shadow:0 1px 0 var(--ss-ink,#2b1709)}
/* Results: stars, the verdict, score and tally, the reward (or practice), the drillmaster's verdict. */
.tg-stars{display:flex;justify-content:center;gap:12px;margin:0 0 2px}
.tg-stars i{font:normal 400 48px/1 var(--ss-font-display,'Lilita One',sans-serif);color:#6b4a2e;-webkit-text-stroke:2px var(--ss-ink,#2b1709);text-shadow:0 3px 0 var(--ss-ink,#2b1709)}
.tg-stars i:nth-child(2){transform:translateY(-8px) scale(1.12)}
.tg-stars i.on{color:var(--ss-gold,#ffd24a);text-shadow:0 3px 0 var(--ss-ink,#2b1709),0 0 18px #ffd24acc}
html:not([data-motion=off]) .tg-stars i.on{animation:tg-star .5s cubic-bezier(.2,1.6,.4,1) both;animation-delay:calc(.12s + var(--i) * .24s)}
@keyframes tg-star{from{transform:scale(0) rotate(-40deg);opacity:0}}
html:not([data-motion=off]) .tg-stars i.on:nth-child(2){animation-name:tg-star-mid}
@keyframes tg-star-mid{from{transform:translateY(-8px) scale(0) rotate(-40deg);opacity:0}to{transform:translateY(-8px) scale(1.12)}}
dialog.tg .tg-card .tg-verdict{text-align:center;font-size:38px;color:var(--ss-gold,#ffd24a);text-shadow:var(--ss-outline,0 2px 0 #2b1709)}
.tg-best{display:flex;align-items:center;justify-content:center;gap:6px;width:max-content;margin:6px auto 0;padding:3px 12px;border:2px solid var(--ss-ink,#2b1709);border-radius:10px;background:linear-gradient(#ff8a5a,#c0392b);color:#fff;font:400 15px/1.2 var(--ss-font-display,'Lilita One',sans-serif);text-shadow:var(--ss-outline-sm,0 1px 0 #2b1709);box-shadow:0 2px 0 var(--ss-ink,#2b1709)}
.tg-best .icon{width:17px;height:17px}
.tg-score{display:flex;align-items:baseline;justify-content:center;flex-wrap:wrap;gap:4px 10px;margin:6px 0 8px}
.tg-score b{font:400 36px/1 var(--ss-font-display,'Lilita One',sans-serif)}
.tg-score span{font:700 13px/1.3 var(--font,'DM Sans',sans-serif);color:#6e4a26}
.tg-tally{display:flex;justify-content:center;flex-wrap:wrap;gap:6px;list-style:none;margin:0 0 12px;padding:0}
.tg-tally li{padding:2px 9px;border:2px solid var(--ss-ink,#2b1709);border-radius:10px;background:#fff8e6;font:600 12.5px/1.4 var(--font,'DM Sans',sans-serif)}
.tg-tally li b{font:400 15px/1 var(--ss-font-display,'Lilita One',sans-serif)}
.tg-tally li[data-q="3"]{background:#ffe08f}.tg-tally li[data-q="2"]{background:#ffcf9a}.tg-tally li[data-q="0"]{background:#f6b8a8}
.tg-chips{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin:0 0 6px}
.tg-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:2px solid var(--ss-ink,#2b1709);border-radius:14px;background:var(--ss-wood-bg,#3b2414);color:#fff3dc;font:400 19px/1 var(--ss-font-display,'Lilita One',sans-serif);text-shadow:var(--ss-outline-sm,0 1px 0 #2b1709);box-shadow:0 3px 0 var(--ss-ink,#2b1709)}
.tg-chip .icon{width:20px;height:20px;stroke-width:2.2}
.tg-chip.gold .icon{color:var(--ss-gold,#ffd24a)}.tg-chip.xp .icon{color:#9fd3ff}
.tg-chip.up{background:linear-gradient(#8ed06a,#4f9d32)}
dialog.tg .tg-card .tg-chips+.tg-note{justify-content:center}
html:not([data-motion=off]) .tg-chip{animation:tg-chip .4s cubic-bezier(.2,1.5,.4,1) both;animation-delay:.8s}
html:not([data-motion=off]) .tg-chip+.tg-chip{animation-delay:.95s}
html:not([data-motion=off]) .tg-chip.up{animation-delay:1.1s}
@keyframes tg-chip{from{transform:translateY(10px) scale(.6);opacity:0}}

/* ---------- landscape phones: a slimmer HUD, the pad in one row, compact cards ---------- */
@media (max-height:520px) and (min-aspect-ratio:1/1){
 dialog.tg{--hud:calc(50px + env(safe-area-inset-top));--pad:calc(76px + env(safe-area-inset-bottom))}
 dialog.tg[data-game=block]{--pad:calc(72px + env(safe-area-inset-bottom))}
 dialog.tg[data-game=dodge]{--pad:0px}
 dialog.tg[data-game=smash] .tg-pad{flex-direction:row;gap:14px;padding-top:8px}
 .tg-bar{flex:1;width:auto;max-width:520px}
 dialog.tg .tg-strike{width:auto;min-width:200px;min-height:54px;font-size:26px}
 dialog.tg .tg-guard{height:56px;flex-direction:row;gap:8px;font-size:18px}
 .tg-guard .icon{width:28px;height:28px}
 .tg-card{width:min(600px,calc(100% - 24px));padding:12px 16px 12px}
 .tg-head{margin-bottom:4px}.tg-medal{width:42px;height:42px}.tg-medal .icon{width:24px;height:24px}
 dialog.tg .tg-card h3{font-size:26px}
 .tg-desc{margin-bottom:6px;font-size:14px}
 .tg-how{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:8px}
 .tg-how li{grid-template-columns:20px minmax(0,1fr);gap:6px;font-size:12.5px}
 .tg-how .icon{width:19px;height:19px}
 .tg-quote{margin-bottom:6px;padding:5px 10px}.tg-quote p{font-size:13.5px}
 .tg-note{margin-bottom:8px;font-size:12.5px}
 dialog.tg .tg-actions .tg-btn{min-height:46px;font-size:19px}
 .tg-stars i{font-size:38px}
 dialog.tg .tg-card .tg-verdict{font-size:30px}
 .tg-score{margin:2px 0 6px}.tg-score b{font-size:28px}
 .tg-tally{margin-bottom:8px}
 .tg-bubble{max-width:min(280px,100%);padding:9px 11px 6px}.tg-bubble p{font-size:13px}
}
/* ---------- short portrait phones ---------- */
@media (max-height:700px) and (max-aspect-ratio:1/1){
 dialog.tg{--hud:calc(56px + env(safe-area-inset-top));--pad:calc(136px + env(safe-area-inset-bottom))}
 dialog.tg[data-game=block]{--pad:calc(100px + env(safe-area-inset-bottom))}
 dialog.tg[data-game=dodge]{--pad:0px}
 dialog.tg .tg-strike{min-height:58px;font-size:27px}
 dialog.tg .tg-guard{height:74px}
 .tg-card{padding:13px 15px}
 dialog.tg .tg-card h3{font-size:27px}
 .tg-how li{font-size:13.5px}.tg-desc{font-size:14px}
 .tg-stars i{font-size:42px}
 .tg-bubble p{font-size:13px}
}
@media (max-width:360px){.tg-pips{padding:6px 7px;gap:4px}.tg-pips li{width:12px;height:12px}.tg-pips.grouped li{width:10px;height:10px}.tg-points b{font-size:19px;min-width:2em}}
/* ---------- desktop ---------- */
@media (min-width:900px) and (min-height:600px){
 dialog.tg{--hud:72px;--pad:170px}
 dialog.tg[data-game=block]{--pad:128px}
 dialog.tg[data-game=dodge]{--pad:0px}
 .tg-bar{height:46px}
 dialog.tg .tg-strike{min-height:72px;font-size:34px}
 dialog.tg .tg-guard{height:96px;font-size:20px}
 .tg-pips li{width:15px;height:15px}
 .tg-points b{font-size:25px}
 .tg-card{width:min(480px,calc(100% - 24px));padding:20px 22px 18px}
 .tg-bubble{max-width:min(340px,100%)}.tg-bubble p{font-size:16px}.tg-tag{font-size:14px}
}