/* soccer.css: "동네 축구 한마당" (retro-soccer.js). Every rule lives under .tt-soccer-.
   The stage is a size container: the layout follows the size of the game itself, in the page, pinned over it or on the whole screen.
   Things pinned to the picture (pops, the shot gauge) are moved by the script with a transform. */
.tt-soccer-lead { margin: 0 0 .8rem; }
.tt-soccer-help { margin: .7rem 0 0; font-size: .86rem; color: #5b5568; }
.tt-soccer-stage {
  --ink: #1f1a2b; --paper: #fffaf0; --sun: #ffd23f; --coral: #ff5a4a; --mint: #2fc36b; --sky: #58b6ff; --blue: #3d7bff;
  --home: #ffd23f; --away: #ff7a2f;
  position: relative; container: tt-soccer / size; width: min(100%, 64rem); aspect-ratio: 9 / 17; max-height: 88vh; overflow: hidden;
  border-radius: 18px; background: #a9d8ff; color: var(--ink); line-height: 1.3; font-weight: 700;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
}
@media (min-width: 720px) { .tt-soccer-stage { aspect-ratio: 16 / 10; } }
@media (orientation: landscape) and (max-height: 520px) { .tt-soccer-stage { aspect-ratio: auto; height: 88vh; } }
.tt-soccer-stage:not([data-phase="title"]) { touch-action: none; }
.tt-soccer-stage.tt-soccer-fill { position: fixed; inset: 0; z-index: 9999; width: auto; height: auto; max-height: none; aspect-ratio: auto; border-radius: 0; }
.tt-soccer-stage:fullscreen { width: 100vw; height: 100vh; max-height: none; aspect-ratio: auto; border-radius: 0; }
.tt-soccer-stage:-webkit-full-screen { width: 100vw; height: 100vh; max-height: none; aspect-ratio: auto; border-radius: 0; }
html.tt-soccer-lock, html.tt-soccer-lock body { overflow: hidden; overscroll-behavior: none; }
.tt-soccer-stage .tt-soccer-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border-radius: 0; outline: none; touch-action: none; }
.tt-soccer-stage p, .tt-soccer-stage h3 { margin: 0; padding: 0; }
.tt-soccer-stage i, .tt-soccer-stage small { font-style: normal; font-family: inherit; }
.tt-soccer-stage button { margin: 0; font: inherit; font-weight: 800; color: var(--ink); cursor: pointer; touch-action: manipulation; }
.tt-soccer-stage button:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.tt-soccer-stage .tt-soccer-sorry { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; text-align: center; background: #2c2440; color: #fff; }

/* A goal lights the edge of the screen: gold for ours, grey-red for theirs. */
.tt-soccer-stage::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; transition: box-shadow .25s ease-out; }
.tt-soccer-stage[data-flash="mine"]::after { box-shadow: inset 0 0 0 8px rgba(255, 210, 63, .95), inset 0 0 120px 30px rgba(255, 210, 63, .5); }
.tt-soccer-stage[data-flash="theirs"]::after { box-shadow: inset 0 0 0 6px rgba(200, 60, 60, .8), inset 0 0 90px 20px rgba(120, 30, 30, .35); }

/* The replay: black bars like the television, and the words in the corner. */
.tt-soccer-bars { position: absolute; inset: 0; pointer-events: none; }
.tt-soccer-bars::before, .tt-soccer-bars::after { content: ''; position: absolute; left: 0; right: 0; height: 0; background: #0d0a14; transition: height .25s ease-out; }
.tt-soccer-bars::before { top: 0; }
.tt-soccer-bars::after { bottom: 0; }
.tt-soccer-stage[data-replay="yes"] .tt-soccer-bars::before, .tt-soccer-stage[data-replay="yes"] .tt-soccer-bars::after { height: 9%; }
.tt-soccer-replay { position: absolute; right: max(12px, env(safe-area-inset-right)); top: calc(9% + 10px); display: grid; justify-items: end; gap: 2px; color: #fff; cursor: pointer; }
.tt-soccer-replay b { padding: 3px 12px; border-radius: 8px; background: var(--coral); font-size: 1rem; font-weight: 900; letter-spacing: .02em; animation: tt-soccer-blink 1s steps(2, jump-none) infinite; }
.tt-soccer-replay small { font-size: .74rem; text-shadow: 0 1px 2px rgba(0, 0, 0, .7); }
.tt-soccer-stage[data-replay="yes"] .tt-soccer-hud, .tt-soccer-stage[data-replay="yes"] .tt-soccer-pad, .tt-soccer-stage[data-replay="yes"] .tt-soccer-tools { visibility: hidden; }

/* The scoreboard at the top left, like on the television, and the call of the referee beside it. */
.tt-soccer-hud { position: absolute; left: 0; top: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; max-width: calc(100% - 150px); pointer-events: none;
  padding: max(8px, env(safe-area-inset-top)) 0 0 max(8px, env(safe-area-inset-left)); }
.tt-soccer-stage[data-phase="title"] .tt-soccer-hud, .tt-soccer-stage[data-phase="none"] .tt-soccer-hud { display: none; }
.tt-soccer-board { display: flex; align-items: stretch; height: 38px; border: 2.5px solid var(--ink); border-radius: 11px; overflow: hidden; background: var(--ink); box-shadow: 0 3px 0 rgba(31, 26, 43, .5); font-variant-numeric: tabular-nums; }
.tt-soccer-team { display: flex; align-items: center; gap: 6px; padding: 0 8px; background: var(--paper); font-size: .78rem; font-weight: 900; white-space: nowrap; }
.tt-soccer-team b { display: grid; place-items: center; min-width: 1.3em; font-size: 1.25rem; font-weight: 900; line-height: 1; }
.tt-soccer-home { border-left: 7px solid var(--home); }
.tt-soccer-away { border-right: 7px solid var(--away); }
.tt-soccer-team[data-n="0"] b { animation: tt-soccer-bump-a .6s ease-out; }
.tt-soccer-team[data-n="1"] b { animation: tt-soccer-bump-b .6s ease-out; }
.tt-soccer-clock { display: grid; place-items: center; align-content: center; min-width: 46px; padding: 0 6px; color: var(--sun); line-height: 1; }
.tt-soccer-clock small { font-size: .58rem; color: #cfc8dc; }
.tt-soccer-clock b { font-size: .98rem; font-weight: 900; }
.tt-soccer-call { height: 30px; display: flex; align-items: center; padding: 0 12px; border: 2.5px solid var(--ink); border-radius: 999px; background: var(--sun); box-shadow: 0 3px 0 var(--ink); font-size: .86rem; font-weight: 900; animation: tt-soccer-pop-in .18s ease-out; }
.tt-soccer-tools { position: absolute; right: 0; top: 0; display: flex; gap: 4px; padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) 0 0; }
.tt-soccer-stage .tt-soccer-tools button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 2.5px solid var(--ink); border-radius: 13px; background: var(--paper); box-shadow: 0 3px 0 var(--ink); font-size: .8rem; line-height: 1; }
.tt-soccer-stage .tt-soccer-tools button:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.tt-soccer-stage .tt-soccer-tools [data-sound][aria-pressed="false"] { background: #d9d3de; color: #8a8192; text-decoration: line-through; }
.tt-soccer-stage .tt-soccer-tools [data-sound] { font-size: 1.2rem; }
.tt-soccer-stage[data-phase="title"] .tt-soccer-tools [data-pause], .tt-soccer-stage[data-phase="none"] .tt-soccer-tools { display: none; }

/* Words that jump off the picture */
.tt-soccer-pops { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.tt-soccer-pop { position: absolute; left: 0; top: 0; translate: -50% -50%; will-change: transform; color: #fff; font-size: 1.15rem; font-weight: 900; white-space: nowrap; line-height: 1;
  text-shadow: -2px -2px 0 var(--ink), 2px -2px 0 var(--ink), -2px 2px 0 var(--ink), 2px 2px 0 var(--ink), 0 3px 0 var(--ink); }
.tt-soccer-pop[data-tone="big"] { color: var(--sun); font-size: 1.6rem; }
.tt-soccer-pop[data-tone="save"] { color: #9dffbd; font-size: 1.3rem; }
.tt-soccer-pop[data-tone="trip"] { color: #ffb4a8; }
.tt-soccer-pop[data-tone="mine"] { color: var(--sun); font-size: 1rem; }

/* The shot gauge over the shooter's head */
.tt-soccer-gauge { position: absolute; left: 0; top: 0; width: 76px; height: 13px; margin: -16px 0 0 -38px; border: 2.5px solid var(--ink); border-radius: 999px; background: rgba(255, 250, 240, .9); overflow: hidden; pointer-events: none; }
.tt-soccer-gauge i { position: absolute; inset: 0; transform-origin: left center; background: linear-gradient(90deg, #2fc36b 0%, #ffd23f 70%, #ff8a2b 86%, #e5484d 87%); }
.tt-soccer-gauge[data-hot="yes"] { animation: tt-soccer-jolt .1s linear infinite; }

/* The big word in the middle */
.tt-soccer-banner { position: absolute; left: 50%; top: 24%; translate: -50% -50%; width: max-content; pointer-events: none; color: var(--sun); font-size: clamp(2.6rem, 16cqmin, 6rem); font-weight: 900; line-height: 1; letter-spacing: -.02em;
  text-shadow: -4px -4px 0 var(--ink), 4px -4px 0 var(--ink), -4px 4px 0 var(--ink), 4px 4px 0 var(--ink), 0 4px 0 var(--ink), 0 -4px 0 var(--ink), 4px 0 0 var(--ink), -4px 0 0 var(--ink), 0 10px 0 var(--ink); }
.tt-soccer-banner[data-tone="theirs"] { color: #ffb4a8; font-size: clamp(2rem, 12cqmin, 4.4rem); }
.tt-soccer-banner[data-n="0"] { animation: tt-soccer-stamp-a .35s cubic-bezier(.2, 1.6, .4, 1); }
.tt-soccer-banner[data-n="1"] { animation: tt-soccer-stamp-b .35s cubic-bezier(.2, 1.6, .4, 1); }

/* The commentator, along the bottom (on a tall touch screen, under the scoreboard, out of the thumbs' way) */
.tt-soccer-caster { position: absolute; left: 50%; bottom: calc(12px + env(safe-area-inset-bottom)); translate: -50% 0; display: flex; align-items: center; gap: 8px; box-sizing: border-box; width: max-content; max-width: min(calc(100% - 24px), 36rem); min-height: 38px;
  padding: 4px 14px 4px 5px; border: 2.5px solid var(--ink); border-radius: 999px; background: rgba(255, 250, 240, .95); box-shadow: 0 3px 0 var(--ink); pointer-events: none; font-size: .9rem; line-height: 1.22; word-break: keep-all; }
.tt-soccer-caster b { flex: none; padding: 4px 9px; border-radius: 999px; background: var(--ink); color: var(--sun); font-size: .72rem; font-weight: 900; }
.tt-soccer-caster[data-who="coach"] b { background: var(--mint); color: #fff; }
.tt-soccer-caster[data-n="0"] { animation: tt-soccer-rise-a .2s ease-out; }
.tt-soccer-caster[data-n="1"] { animation: tt-soccer-rise-b .2s ease-out; }
.tt-soccer-stage[data-phase="title"] .tt-soccer-caster { display: none; }
.tt-soccer-stage[data-input="touch"]:not([data-phase="title"]) .tt-soccer-caster { bottom: auto; top: calc(max(8px, env(safe-area-inset-top)) + 52px); }
@container tt-soccer (min-aspect-ratio: 3 / 2) {
  .tt-soccer-stage[data-input="touch"]:not([data-phase="title"]) .tt-soccer-caster { top: auto; bottom: calc(10px + env(safe-area-inset-bottom)); max-width: calc(100% - 380px); }
}

/* Thumbs: a stick under the left thumb, four round buttons under the right */
.tt-soccer-pad { position: absolute; inset: 0; display: none; pointer-events: none; overflow: hidden; }
.tt-soccer-stage[data-input="touch"][data-phase="play"] .tt-soccer-pad { display: block; }
.tt-soccer-stick { position: absolute; left: 86px; top: calc(100% - 140px); width: 112px; height: 112px; margin: -56px 0 0 -56px; border: 3px solid rgba(255, 255, 255, .8); border-radius: 50%; background: rgba(31, 26, 43, .28); }
.tt-soccer-stick i { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border: 3px solid var(--ink); border-radius: 50%; background: rgba(255, 250, 240, .95); box-shadow: 0 3px 0 rgba(31, 26, 43, .5); }
.tt-soccer-stage:not([data-stick]) .tt-soccer-stick { left: 86px !important; top: calc(100% - 140px - env(safe-area-inset-bottom)) !important; opacity: .45; }
.tt-soccer-stage:not([data-stick]) .tt-soccer-stick i { transform: none !important; }
.tt-soccer-stage .tt-soccer-b { position: absolute; display: grid; place-items: center; align-content: center; gap: 1px; padding: 4px; border: 3px solid var(--ink); border-radius: 50%; pointer-events: auto; touch-action: none; line-height: 1.05; text-align: center; word-break: keep-all;
  box-shadow: 0 5px 0 var(--ink); font-weight: 900; }
.tt-soccer-stage .tt-soccer-b[data-down="yes"], .tt-soccer-stage .tt-soccer-b[aria-pressed="true"] { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); }
.tt-soccer-stage .tt-soccer-b small { font-size: .56rem; font-weight: 800; opacity: .8; }
.tt-soccer-stage .tt-soccer-shoot { right: max(16px, env(safe-area-inset-right)); bottom: calc(18px + env(safe-area-inset-bottom)); width: 96px; height: 96px; background: var(--coral); color: #fff; font-size: 1.35rem; text-shadow: 0 2px 0 rgba(31, 26, 43, .45); }
.tt-soccer-stage .tt-soccer-pass { right: calc(max(16px, env(safe-area-inset-right)) + 104px); bottom: calc(14px + env(safe-area-inset-bottom)); width: 80px; height: 80px; background: var(--sun); font-size: 1.05rem; }
.tt-soccer-stage .tt-soccer-through { right: calc(max(16px, env(safe-area-inset-right)) + 88px); bottom: calc(108px + env(safe-area-inset-bottom)); width: 64px; height: 64px; background: var(--sky); color: #fff; font-size: .9rem; text-shadow: 0 2px 0 rgba(31, 26, 43, .4); }
.tt-soccer-stage .tt-soccer-sprint { right: max(18px, env(safe-area-inset-right)); bottom: calc(126px + env(safe-area-inset-bottom)); width: 64px; height: 64px; background: rgba(255, 250, 240, .92); font-size: .82rem; }
.tt-soccer-stage .tt-soccer-sprint[aria-pressed="true"] { background: #8be3a8; }
.tt-soccer-stage[data-side="defend"] .tt-soccer-shoot { background: #8a5cf6; }
.tt-soccer-stage[data-side="defend"] .tt-soccer-pass { background: #ff9a3d; color: #fff; text-shadow: 0 2px 0 rgba(31, 26, 43, .4); }
.tt-soccer-stage[data-side="defend"] .tt-soccer-through { background: var(--mint); }

/* Cards */
.tt-soccer-card { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: grid; justify-items: center; gap: 10px; box-sizing: border-box; width: min(calc(100% - 24px), 25rem); max-height: calc(100% - 24px); overflow: auto;
  padding: 20px 18px 18px; border: 3px solid var(--ink); border-radius: 22px; background: var(--paper); box-shadow: 0 7px 0 var(--ink); text-align: center; animation: tt-soccer-pop-in .2s ease-out; }
.tt-soccer-card h3 { font-size: 1.7rem; font-weight: 900; line-height: 1.1; letter-spacing: -.02em; }
.tt-soccer-kicker { padding: 3px 12px; border-radius: 999px; background: var(--ink); color: var(--sun); font-size: .76rem; font-weight: 900; }
.tt-soccer-title { background: linear-gradient(180deg, #fffaf0 0%, #fff3cf 100%); }
.tt-soccer-title h3 { font-size: clamp(2rem, 11cqmin, 2.9rem); color: var(--ink); text-shadow: 0 3px 0 var(--sun); }
.tt-soccer-vs { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; font-size: .86rem; }
.tt-soccer-vs b { padding: 4px 10px; border: 2.5px solid var(--ink); border-radius: 10px; background: var(--paper); font-weight: 900; }
.tt-soccer-vs .tt-soccer-chip-home { border-left: 9px solid var(--home); }
.tt-soccer-vs .tt-soccer-chip-away { border-right: 9px solid var(--away); }
.tt-soccer-vs i { color: #7b7088; font-size: .8rem; }
.tt-soccer-levels { display: flex; gap: 6px; }
.tt-soccer-stage .tt-soccer-levels button { min-width: 66px; min-height: 44px; padding: 0 10px; border: 2.5px solid var(--ink); border-radius: 12px; background: #fff; box-shadow: 0 3px 0 var(--ink); font-size: .92rem; }
.tt-soccer-stage .tt-soccer-levels button[aria-pressed="true"] { background: var(--ink); color: var(--sun); }
.tt-soccer-stage .tt-soccer-go { min-width: 180px; min-height: 52px; padding: 0 22px; border: 3px solid var(--ink); border-radius: 16px; background: var(--coral); color: #fff; box-shadow: 0 5px 0 var(--ink); font-size: 1.25rem; font-weight: 900; text-shadow: 0 2px 0 rgba(31, 26, 43, .4); }
.tt-soccer-stage .tt-soccer-go:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--ink); }
.tt-soccer-keys { font-size: .74rem; color: #6b6178; line-height: 1.4; word-break: keep-all; }
.tt-soccer-fortouch { display: none; }
.tt-soccer-stage[data-input="touch"] .tt-soccer-fortouch { display: inline; }
.tt-soccer-stage[data-input="touch"] .tt-soccer-forkeys { display: none; }
.tt-soccer-score { display: flex; align-items: center; gap: 10px; font-size: 1.05rem; font-weight: 900; }
.tt-soccer-score b { font-size: 2.2rem; font-variant-numeric: tabular-nums; }
.tt-soccer-rule { font-size: .9rem; color: #4d4458; word-break: keep-all; }
.tt-soccer-badge { padding: 4px 14px; border-radius: 999px; background: var(--sun); border: 2.5px solid var(--ink); font-size: .9rem; font-weight: 900; }
.tt-soccer-final[data-result="lose"] .tt-soccer-badge { background: #e4dff0; }
.tt-soccer-final[data-result="win"] h3 { color: #d1281f; text-shadow: 0 3px 0 var(--sun); font-size: 2.3rem; }
.tt-soccer-points { font-size: .9rem; color: #4d4458; }
.tt-soccer-points b { font-size: 1.35rem; color: var(--ink); }
.tt-soccer-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.tt-soccer-stage .tt-soccer-row button:not(.tt-soccer-go) { min-height: 48px; padding: 0 16px; border: 2.5px solid var(--ink); border-radius: 14px; background: #fff; box-shadow: 0 4px 0 var(--ink); font-size: 1rem; }
.tt-soccer-stage[data-input][data-paused="yes"] .tt-soccer-pad, .tt-soccer-stage[data-input][data-break="goal"] .tt-soccer-pad { display: none; }
/* A short stage (a phone on its side): smaller cards. */
@container tt-soccer (max-height: 430px) {
  .tt-soccer-card { gap: 6px; padding: 12px 14px 12px; }
  .tt-soccer-title h3 { font-size: 1.7rem; }
  .tt-soccer-stage .tt-soccer-go { min-height: 46px; font-size: 1.1rem; }
  .tt-soccer-banner { top: 30%; }
}

@keyframes tt-soccer-pop-in { from { transform: scale(.88); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes tt-soccer-stamp-a { from { transform: scale(2.2) rotate(-6deg); opacity: 0; } to { transform: scale(1) rotate(0); opacity: 1; } }
@keyframes tt-soccer-stamp-b { from { transform: scale(2.2) rotate(6deg); opacity: 0; } to { transform: scale(1) rotate(0); opacity: 1; } }
@keyframes tt-soccer-rise-a { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes tt-soccer-rise-b { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes tt-soccer-bump-a { 0% { transform: scale(1); } 30% { transform: scale(1.8); color: #d1281f; } 100% { transform: scale(1); } }
@keyframes tt-soccer-bump-b { 0% { transform: scale(1); } 30% { transform: scale(1.8); color: #d1281f; } 100% { transform: scale(1); } }
@keyframes tt-soccer-blink { 50% { opacity: .55; } }
@keyframes tt-soccer-jolt { 0% { translate: 0 0; } 25% { translate: 1px -1px; } 50% { translate: -1px 1px; } 75% { translate: 1px 1px; } }
@media (prefers-reduced-motion: reduce) {
  .tt-soccer-banner, .tt-soccer-caster, .tt-soccer-card, .tt-soccer-gauge, .tt-soccer-replay b { animation: none !important; }
}