/* Turkey Tracks arcade makeover (Spider Hunter model): full-screen scene, big logo, dark card of big arcade buttons,
   song button in the corner, stat pills, a pick-a-game wall of cabinets, and every activity inside a cabinet frame.
   Font: Hug Me Tight (same file as Spider Hunter). Loaded last so it wins over index.html and tt.css. */
@font-face { font-family: "Hug Me Tight"; src: url("hugmetight.ttf") format("truetype"); font-display: swap; }
:root {
  --f-spook: "Hug Me Tight", "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;
  --f-display: "Hug Me Tight", "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;
  --f-body: "Hug Me Tight", "Trebuchet MS", Verdana, sans-serif;
  --night: #120a06; --cab: #22130a; --cab2: #2f1b0e; --amber: #ffb32c; --pill: #ffd84a; --cran: #e0324b; --leaf: #9be15d;
  --ink: #120a06; --deep: #120a06; --panel: #2a170c; --panel2: #3a2010; --line: rgba(255, 200, 120, .22);
}
html, body { background: var(--night); }
body { letter-spacing: .01em; word-spacing: normal; line-height: 1.45; }
h1, h2, h3, .eyebrow, .btn, .stat, .logo { font-family: var(--f-display); font-weight: 400; }
h2 { letter-spacing: .01em; }
.eyebrow { letter-spacing: .08em; color: var(--pill); }

/* every calm screen sits on an arcade scene */
body[data-screen="home"] { background: linear-gradient(rgba(10, 5, 2, .25), rgba(10, 5, 2, .55)), url("art/bg-arcade-home.webp") center / cover no-repeat fixed, var(--night); }
body[data-screen="menu"], body[data-screen="wheel"], body[data-screen="map"], body[data-screen="victory"] {
  background: linear-gradient(rgba(10, 5, 2, .45), rgba(10, 5, 2, .7)), url("art/bg-arcade-menu.webp") center / cover no-repeat fixed, var(--night); }
body.on-home { background: linear-gradient(rgba(10, 5, 2, .25), rgba(10, 5, 2, .55)), url("art/bg-arcade-home.webp") center / cover no-repeat fixed, var(--night); }
@supports (-webkit-touch-callout: none) { body[data-screen] { background-attachment: scroll !important; } }

/* top bar: a slim dark strip; hidden on the start screen so the scene fills the screen */
.hud { background: rgba(12, 6, 3, .9); border-bottom: 2px solid var(--line); }
body[data-screen="home"] .hud { background: transparent; border-bottom: 0; backdrop-filter: none; }
body[data-screen="home"] .hud .brand, body[data-screen="home"] .hud .stats { display: none; }
.logo { color: #fff; -webkit-text-stroke: .07em #14100c; paint-order: stroke fill; }
.logo b { color: var(--pill); }

/* arcade stat pills (Score, Lives, Time) */
.stat { flex-direction: column; align-items: flex-start; gap: 0; min-width: 84px; padding: 4px 12px 6px; border-radius: 12px; background: var(--cab); border: 2px solid var(--line); line-height: 1.1; }
.stat small { font-family: var(--f-body); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #d9b98f; }
.stat b { display: flex; align-items: center; gap: 6px; font-family: var(--f-display); font-weight: 400; font-size: clamp(18px, 1.6vw, 24px); color: #fff; font-variant-numeric: tabular-nums; }
.stat b svg { width: 20px; height: 20px; }
#stScore b { color: var(--pill); }
.stat.lives b { color: var(--cran); gap: 2px; }
.stat.hot { background: var(--cran); }
.stat.hot small, .stat.hot b { color: #fff; }

/* big arcade buttons */
.abtn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 64px; padding: 12px 26px; border: 0; border-radius: 16px;
  font: 400 clamp(20px, 2.4vw, 30px) var(--f-display); letter-spacing: .02em; color: #1b1206; background: var(--amber); cursor: pointer;
  box-shadow: 0 6px 0 #9c5d00, 0 12px 22px rgba(0, 0, 0, .45); transition: transform .08s, box-shadow .08s; }
.abtn:hover { transform: translateY(-2px); }
.abtn:active { transform: translateY(4px); box-shadow: 0 2px 0 #9c5d00, 0 6px 12px rgba(0, 0, 0, .4); }
.abtn.alt { background: var(--leaf); box-shadow: 0 6px 0 #4f8a2b, 0 12px 22px rgba(0, 0, 0, .45); }
.abtn.cran { background: var(--cran); color: #fff; box-shadow: 0 6px 0 #8f1424, 0 12px 22px rgba(0, 0, 0, .45); }
.abtn.ghost { background: transparent; color: #fff; border: 3px solid rgba(255, 255, 255, .8); box-shadow: none; }
.abtn svg { width: 1em; height: 1em; }
.abtn:disabled, .abtn.waiting { opacity: .65; cursor: default; transform: none; }
@media (prefers-reduced-motion: reduce) { .abtn { transition: none; } .abtn:hover { transform: none; } }

/* ---------- start screen ---------- */
.arcadehome { min-height: calc(100vh - 140px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(10px, 2vh, 22px); text-align: center; padding-block: 4px 30px; }
.ahlogo { margin: 0; line-height: 0; }
.ahlogo img { width: min(88vw, 700px, 64vh); height: auto; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .6)); animation: logobob 4s ease-in-out infinite; }
.ahlogo img.stand { display: none; }
.ahlogo .logotxt { display: none; }
.ahlogo img.stand + .logotxt { display: block; line-height: 1; font: 400 clamp(52px, 9vw, 120px) var(--f-display); color: #fff; -webkit-text-stroke: .06em #3a1d0b; paint-order: stroke fill; }
@keyframes logobob { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-6px) rotate(1deg); } }
.ahtag { margin: 0; max-width: 46ch; font-size: clamp(17px, 1.6vw, 22px); color: #fff; text-shadow: 0 2px 6px rgba(0, 0, 0, .9); }
.acard { width: min(680px, 100%); background: rgba(14, 7, 3, .9); border: 3px solid var(--amber); border-radius: 22px; padding: clamp(14px, 2.4vw, 26px); display: grid; gap: 12px; box-shadow: 0 18px 50px rgba(0, 0, 0, .6); text-align: left; }
.acard .fld { font-family: var(--f-display); font-size: clamp(17px, 1.5vw, 21px); color: var(--pill); }
.acard input, .acard #teamName, .acard #arenaCode { width: 100%; min-height: 56px; padding: 8px 16px; border-radius: 14px; border: 3px solid var(--line); background: #fff8ee; color: #2a1408; font: 400 clamp(18px, 1.8vw, 24px) var(--f-body); }
.acard input:focus { outline: 4px solid var(--amber); outline-offset: 2px; }
.abtns { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.abtns .abtn { width: 100%; }
@media (max-width: 520px) { .abtns { grid-template-columns: 1fr; } }
.apanel { display: grid; gap: 10px; border-top: 2px dashed var(--line); padding-top: 12px; }
.apanel[hidden] { display: none !important; }
.apanel .arenabox { display: grid; gap: 8px; }
.apanel .arenacode { max-width: 220px; text-transform: uppercase; letter-spacing: .3em; text-align: center; }
.acard .tiny { color: #e8cfa8; margin: 0; }
.acard .linkbtn { color: var(--pill); }
.ahchars { display: flex; align-items: flex-end; justify-content: center; gap: clamp(6px, 3vw, 40px); }
.ahchars img { height: clamp(90px, 16vh, 200px); width: auto; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .55)); animation: bob 4.6s ease-in-out infinite; }
.ahchars img:nth-child(2) { height: clamp(110px, 20vh, 250px); animation-delay: .5s; }
.ahchars img:nth-child(3) { animation-delay: 1s; }
.ahchars img.stand { height: 80px; }
@media (prefers-reduced-motion: reduce) { .ahlogo img, .ahchars img { animation: none; } }

/* song corner button (Spider Hunter style) */
.songcorner { position: fixed; z-index: 40; top: calc(env(safe-area-inset-top, 0px) + 10px); right: calc(env(safe-area-inset-right, 0px) + var(--tab-w) + 12px);
  width: clamp(76px, 8vw, 116px); padding: 0; border: 0; background: none; cursor: pointer; display: grid; justify-items: center; gap: 2px; }
.songcorner img { width: 100%; height: auto; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .6)); transition: transform .15s; }
.songcorner b { font: 400 clamp(14px, 1.3vw, 18px) var(--f-display); padding: 2px 12px; border-radius: 999px; background: var(--leaf); color: #10240a; box-shadow: 0 3px 0 #4f8a2b; }
.songcorner.off img { filter: grayscale(1) brightness(.7) drop-shadow(0 6px 10px rgba(0, 0, 0, .6)); }
.songcorner.off b { background: #8a8a8a; color: #fff; box-shadow: 0 3px 0 #555; }
.songcorner:hover img { transform: scale(1.06) rotate(-4deg); }
.songcorner.flash img { animation: songflash .5s; }
@keyframes songflash { 50% { transform: scale(1.18) rotate(6deg); } }
@media (prefers-reduced-motion: reduce) { .songcorner img { transition: none; } .songcorner.flash img { animation: none; } }
.songhud .songimg { width: 26px; height: 26px; object-fit: contain; }
.songhud.off .songimg { filter: grayscale(1); }

/* the Gobble Song player: a small kid-safe jukebox in the bottom corner (shielded YouTube, no links) */
.jbox { position: fixed; z-index: 45; left: calc(env(safe-area-inset-left, 0px) + var(--tab-w) + 12px); bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
  width: clamp(150px, 15vw, 220px); border-radius: 14px; overflow: hidden; border: 3px solid var(--amber); background: #000; box-shadow: 0 10px 30px rgba(0, 0, 0, .6); }
.jbox.away { visibility: hidden; left: -9999px; }
.jvid { position: relative; aspect-ratio: 16 / 9; }
.jvid iframe, #jplayer { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.jshield { position: absolute; inset: 0; z-index: 3; background: transparent; }
.jcover { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; align-content: center; gap: 2px; padding: 6px; text-align: center;
  background: radial-gradient(circle at 50% 35%, #7a3f12, #1a0c04); color: #fff; font: 400 14px var(--f-display); }
.jcover img { width: 44%; height: auto; }
.jcover[hidden] { display: none !important; }
.jtap { position: absolute; z-index: 5; left: 50%; top: 50%; transform: translate(-50%, -50%); min-height: 44px; padding: 6px 14px; border-radius: 999px; border: 3px solid #fff; background: var(--amber); color: #1b1206; font: 400 16px var(--f-display); cursor: pointer; white-space: nowrap; }
.jbox.tapmode .jshield { pointer-events: none; }
.jlabel { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 4px 8px; background: var(--cab); color: #fff; font: 400 13px var(--f-display); }
.jlabel span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 600px) { .jbox { width: 128px; left: 8px; bottom: 8px; } .jlabel { font-size: 11px; } }

/* ---------- pick-a-game wall of arcade cabinets ---------- */
.arcademenu { display: grid; gap: clamp(12px, 2vh, 22px); }
.amtop { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; }
.amtop h2 { font-size: clamp(30px, 3.6vw, 54px); color: #fff; -webkit-text-stroke: .05em #14100c; paint-order: stroke fill; text-shadow: 0 4px 10px rgba(0, 0, 0, .6); }
.chip { display: inline-block; padding: 4px 14px; border-radius: 999px; background: var(--cab); border: 2px solid var(--amber); color: var(--pill); font: 400 clamp(15px, 1.3vw, 19px) var(--f-display); }
.cabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.6vw, 22px); }
@media (max-width: 1000px) { .cabs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.gcab { position: relative; display: grid; grid-template-rows: auto auto 1fr auto; gap: 8px; padding: 0 0 14px; border: 0; border-radius: 22px 22px 14px 14px; cursor: pointer; color: #fff; text-align: center; font: inherit;
  background: linear-gradient(180deg, #5a2f12, #2a150a); box-shadow: inset 0 0 0 4px #7b4519, inset 0 0 0 8px #2a150a, 0 14px 30px rgba(0, 0, 0, .55); transition: transform .12s; }
.gcab:hover, .gcab:focus-visible { transform: translateY(-4px); }
@media (prefers-reduced-motion: reduce) { .gcab { transition: none; } .gcab:hover { transform: none; } }
.marq { display: block; margin: 10px 12px 0; padding: 6px 8px; border-radius: 12px; background: linear-gradient(180deg, var(--pill), var(--amber)); color: #2a1408; font: 400 clamp(18px, 1.7vw, 26px) var(--f-display); line-height: 1.1; box-shadow: 0 0 18px rgba(255, 200, 60, .55); }
.gscreen { display: block; margin: 0 14px; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: #000; border: 4px solid #111; box-shadow: inset 0 0 20px rgba(0, 0, 0, .8); }
.gscreen img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gscreen img.stand { object-fit: contain; padding: 20%; }
.gblurb { padding: 0 14px; font-size: clamp(14px, 1.1vw, 17px); color: #f3dfc0; line-height: 1.3; }
.gplay { justify-self: center; padding: 6px 26px; border-radius: 999px; background: var(--cran); color: #fff; font: 400 clamp(18px, 1.6vw, 24px) var(--f-display); box-shadow: 0 4px 0 #8f1424; }
.gcab.done .gplay { background: var(--leaf); color: #10240a; box-shadow: 0 4px 0 #4f8a2b; }
.gdone { position: absolute; top: 52px; right: 6px; padding: 3px 10px; border-radius: 999px; background: var(--leaf); color: #10240a; font: 400 14px var(--f-display); box-shadow: 0 3px 8px rgba(0, 0, 0, .5); }
.gnum { position: absolute; top: 52px; left: 6px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--pill); color: #2a1408; font: 400 18px var(--f-display); box-shadow: 0 3px 8px rgba(0, 0, 0, .5); }
.ambtns { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* ---------- each activity inside an arcade cabinet frame ---------- */
main.incab > .wrap { position: relative; padding: clamp(10px, 1.4vw, 18px); padding-top: clamp(30px, 3vw, 40px); border-radius: 26px;
  background: linear-gradient(180deg, #3a1f0e, #1a0d06); box-shadow: inset 0 0 0 5px #7b4519, inset 0 0 0 10px #241208, 0 18px 40px rgba(0, 0, 0, .6); }
main.incab > .wrap::before { content: attr(data-game); position: absolute; left: 50%; top: 0; transform: translate(-50%, -50%); z-index: 3; white-space: nowrap; padding: 6px 22px; border-radius: 14px;
  background: linear-gradient(180deg, var(--pill), var(--amber)); color: #2a1408; font: 400 clamp(18px, 1.8vw, 28px) var(--f-display); box-shadow: 0 0 18px rgba(255, 200, 60, .6), 0 4px 0 #9c5d00; }
main.incab { padding-top: 40px; }
body[data-incab="1"] { background: radial-gradient(circle at 50% 0%, #3a1d0b, var(--night) 70%) fixed, var(--night); }

/* panels on the calm screens read like arcade cards */
body[data-screen="wheel"] .panel, body[data-screen="map"] .panel, body[data-screen="victory"] .panel { background: rgba(14, 7, 3, .92); border: 3px solid var(--amber); }
.rank { font-family: var(--f-display); color: var(--pill); }
@media (max-width: 600px) {
  .songcorner { width: 58px; top: calc(env(safe-area-inset-top, 0px) + 4px); right: calc(env(safe-area-inset-right, 0px) + 6px); }
  .ahlogo img { width: min(74vw, 64vh); }
  .cabs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .gblurb { display: none; }
  .marq { font-size: 15px; margin: 8px 8px 0; }
  .gscreen { margin: 0 8px; }
  .gnum, .gdone { top: 44px; }
}