/* Deepwell (Chompy Arcade) — all visuals are CSS, inline SVG and canvas drawn in code.
   Fonts come only from the arcade's own /assets/fonts.css (Chewy, Baloo 2); nothing from other sites. */
:root {
  --bg: #0b1622;
  --bg2: #10202f;
  --panel: #152a3c;
  --panel2: #1c3850;
  --line: #2a4a64;
  --text: #e6eef5;
  --muted: #8fa6b8;
  --amber: #ffcf6b;
  --amber-deep: #e0a030;
  --teal: #46c2b0;
  --red: #e0605a;
  --green: #6fcf7a;
  --violet: #b59cf0;
  --attack: #d9654f;
  --defend: #4f8fd9;
  --skill: #6fbf73;
  --oil: #e0a030;
  --radius: 10px;
  font-family: "Baloo 2", "Nunito", "Trebuchet MS", system-ui, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: radial-gradient(ellipse at 50% -10%, #1d3b55 0%, var(--bg) 60%) fixed, var(--bg);
  color: var(--text);
  line-height: 1.4;
}
.app { min-height: 100vh; display: flex; flex-direction: column; max-width: 1400px; margin: 0 auto; padding: 0 16px; }
h1, h2, h3 { margin: .4em 0; font-weight: 700; letter-spacing: .01em; }
h1 { font-size: 2.4rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.1rem; }
p { margin: .4em 0; }
code { background: #0006; padding: 1px 6px; border-radius: 4px; }
kbd {
  display: inline-block; min-width: 1.4em; padding: 0 .35em; margin-right: .45em;
  border: 1px solid #ffffff40; border-bottom-width: 2px; border-radius: 4px;
  font: 600 .75rem/1.4 ui-monospace, monospace; color: var(--muted); text-align: center;
}
.muted { color: var(--muted); }
.small, small { font-size: .85rem; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.icon { width: 1.1em; height: 1.1em; vertical-align: -0.18em; margin-right: .2em; }
.noscript { padding: 2rem; }

/* ---------- buttons ---------- */
.btn {
  font: inherit; color: var(--text); background: var(--panel2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: .55em 1.1em; cursor: pointer; transition: transform .08s, background .15s, border-color .15s;
}
.btn:hover:not(:disabled) { background: #24465f; border-color: var(--amber-deep); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.primary { background: linear-gradient(#f0b64a, #d8902a); color: #241a08; border-color: #f7cf7a; font-weight: 700; }
.btn.primary kbd { color: #4a3510; border-color: #4a351060; }
.btn.primary:hover:not(:disabled) { background: linear-gradient(#ffc75c, #e49d33); }
.btn.small { padding: .3em .7em; font-size: .9rem; }
.btn.ghost { background: transparent; }
.btn.choice { display: flex; flex-direction: column; align-items: flex-start; gap: .2em; min-width: 220px; text-align: left; padding: .9em 1.2em; }
.btn.choice small { color: var(--muted); }
button:focus-visible, .relic:focus-visible, input:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }

/* ---------- top bar ---------- */
.topbar {
  display: grid; grid-template-columns: auto auto 1fr auto; gap: 1rem; align-items: center;
  padding: .6rem 0; border-bottom: 1px solid var(--line);
}
.tb-stats { display: flex; gap: .8rem; align-items: center; }
.stat { font-weight: 700; display: inline-flex; align-items: center; }
.stat.hp .icon { color: var(--red); }
.stat.gold .icon { color: var(--amber); }
.tb-relics { display: flex; flex-wrap: wrap; gap: .3rem; }
.relic { display: inline-flex; padding: 2px; border-radius: 6px; background: #0003; cursor: help; }
.relic .icon { width: 1.5em; height: 1.5em; margin: 0; }
.tb-seed { font-size: .85rem; }

.toast {
  margin: .5rem auto 0; padding: .4rem 1rem; border-radius: var(--radius); background: #5a2a24; border: 1px solid var(--red);
  width: fit-content;
}

.screen { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 1rem 0 1.5rem; text-align: center; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 1rem 1.4rem; }
.choices { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; margin: 1rem 0; }
.choices.col { flex-direction: column; align-items: center; }

/* ---------- title ---------- */
.title-screen { justify-content: center; }
.title-art .lantern { width: 140px; height: 168px; filter: drop-shadow(0 0 30px #ffcf6b55); }
.title-screen h1 { font-size: 3.4rem; margin: 0; color: var(--amber); text-shadow: 0 0 24px #ffcf6b66; }
.tagline { color: var(--muted); margin-bottom: 1.2rem; }
.menu { display: flex; flex-direction: column; gap: .6rem; align-items: stretch; width: min(360px, 100%); }
.menu .btn { width: 100%; }
.seedform { display: grid; grid-template-columns: 1fr auto; gap: .4rem; text-align: left; margin-top: .4rem; }
.seedform label { grid-column: 1 / -1; font-size: .85rem; color: var(--muted); }
.seedform input {
  font: inherit; padding: .4em .6em; border-radius: var(--radius); border: 1px solid var(--line);
  background: #0a1520; color: var(--text); text-transform: uppercase; letter-spacing: .08em;
}
.help { text-align: left; max-width: 720px; margin-top: 1.2rem; }
.help li { margin: .35em 0; }

/* ---------- map ---------- */
.map {
  position: relative; width: min(560px, 100%); height: min(60vh, 520px); margin: .5rem auto;
  background: radial-gradient(ellipse at 50% 0%, #1b3a52, #0d1b28 70%); border: 1px solid var(--line); border-radius: 16px;
}
.maplines { position: absolute; inset: 0; width: 100%; height: 100%; }
.maplines line { stroke: #3d6380; stroke-width: 2; stroke-dasharray: 6 5; vector-effect: non-scaling-stroke; }
.maplines line.walked { stroke: var(--amber); stroke-dasharray: none; }
.mapnode {
  position: absolute; transform: translate(-50%, -50%); width: 46px; height: 46px; border-radius: 50%;
  border: 2px solid var(--line); background: var(--panel); color: var(--muted); cursor: pointer;
  display: grid; place-items: center; padding: 0;
}
.mapnode .icon { width: 24px; height: 24px; margin: 0; }
.mapnode kbd { position: absolute; bottom: -10px; right: -12px; margin: 0; background: var(--bg); color: var(--amber); }
.mapnode.available { border-color: var(--amber); color: var(--amber); box-shadow: 0 0 0 4px #ffcf6b22; animation: pulse 1.6s infinite; }
.mapnode.available:hover { background: #2a4a64; }
.mapnode.visited { background: #3a3220; color: #c9a860; border-color: #6a5a30; }
.mapnode.current { background: var(--amber); color: #241a08; border-color: #fff3c4; }
.mapnode.locked { opacity: .6; cursor: default; }
.mapnode.node-boss { width: 60px; height: 60px; }
.mapnode.node-elite { color: #e88; }
.mapnode.node-elite.available { color: #ffb0a8; border-color: #ffb0a8; }
.legend { font-size: .85rem; }
@keyframes pulse { 50% { box-shadow: 0 0 0 9px #ffcf6b10; } }

/* ---------- combat ---------- */
.combat-screen { padding-top: .5rem; gap: .5rem; transition: background .4s; border-radius: 16px; }
.combat-screen.light-low { background: radial-gradient(ellipse at 30% 50%, #0000 20%, #00000055 80%); }
.combat-screen.light-dark { background: radial-gradient(ellipse at 30% 50%, #0000 5%, #000000a0 60%); }
.battlefield {
  width: 100%; display: grid; grid-template-columns: 170px 200px 1fr; gap: 1rem; align-items: end; min-height: 300px;
}
.player-side, .lantern-box { display: flex; flex-direction: column; align-items: center; gap: .3rem; }
.hero { width: 110px; height: 140px; }
.pname, .ename { display: block; font-weight: 700; }
.lantern-box .lantern { width: 110px; height: 132px; }
.oilmeter { display: flex; gap: 3px; flex-wrap: wrap; justify-content: center; max-width: 190px; }
.oilmeter i { width: 13px; height: 18px; border-radius: 3px; background: #ffffff14; border: 1px solid #ffffff22; }
.oilmeter i.full { background: linear-gradient(#ffe08a, var(--amber-deep)); border-color: #ffe08a; }
.oilmeter i.lowzone:not(.full) { border-color: #e0605a55; }
.lightlabel { font-size: .9rem; }
.lightlabel.light-bright b { color: var(--amber); }
.lightlabel.light-low b { color: #f0a050; }
.lightlabel.light-dark b { color: var(--red); }
.lightwarn { font-size: .8rem; color: #f0a050; margin: 0; max-width: 200px; }

.enemies { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; }
.enemy {
  font: inherit; color: inherit; width: 190px; background: #ffffff08; border: 2px solid transparent; border-radius: 14px;
  padding: .5rem; display: flex; flex-direction: column; align-items: center; gap: .25rem; cursor: pointer;
}
.enemy:hover { background: #ffffff10; }
.enemy.targeted { border-color: var(--amber); background: #ffcf6b10; }
.enemy.fled { opacity: .5; cursor: default; min-height: 120px; justify-content: center; }
.enemy .creature { width: 130px; height: 120px; }
.light-low .enemy .creature { filter: brightness(.7); }
.light-dark .enemy .creature { filter: brightness(.4) saturate(.6); }
.kind-boss .creature { width: 170px; height: 150px; }
.badge { font-size: .7rem; text-transform: uppercase; background: #6a2a24; color: #ffd0c8; border-radius: 4px; padding: 1px 5px; vertical-align: middle; }
.intent { display: flex; gap: .4rem; align-items: center; justify-content: center; flex-wrap: wrap; min-height: 2.2em; font-weight: 700; }
.intent small { width: 100%; font-weight: 400; color: var(--muted); font-size: .75rem; }
.ip { display: inline-flex; align-items: center; padding: 1px 6px; border-radius: 6px; background: #0005; }
.ip-attack { color: #ff9a85; }
.ip-defend { color: #8fc0ff; }
.ip-buff { color: #ffd36b; }
.ip-debuff { color: var(--violet); }
.ip-snuff { color: #f0a050; }
.hidden-intent { color: var(--muted); }

.hpbar { display: block; position: relative; width: 150px; height: 18px; background: #3a1414; border-radius: 9px; overflow: hidden; border: 1px solid #0008; }
.hpfill { display: block; height: 100%; background: linear-gradient(#ef7a6f, #c0443c); transition: width .25s; }
.hpbar .hplabel { position: absolute; inset: 0; font-size: .75rem; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: .4em; text-shadow: 0 1px 2px #000; }
.guardtag { color: #bfe0ff; display: inline-flex; align-items: center; }
.statuses { display: flex; gap: .25rem; flex-wrap: wrap; justify-content: center; min-height: 1.2em; }
.status { font-size: .7rem; padding: 1px 6px; border-radius: 4px; background: #0006; cursor: help; }
.status-exposed { color: #ff9a85; }
.status-shaken { color: var(--violet); }
.status-grit { color: #ffd36b; }
.status-steady { color: var(--amber); }

.handbar {
  width: 100%; display: grid; grid-template-columns: 90px 1fr auto; grid-template-rows: auto auto; gap: .3rem 1rem; align-items: center;
  border-top: 1px solid var(--line); padding-top: .6rem;
}
.energy { grid-row: 1 / 3; display: flex; flex-direction: column; align-items: center; color: var(--amber); }
.energy .icon { width: 2rem; height: 2rem; }
.energy b { font-size: 1.8rem; line-height: 1; }
.piles { grid-column: 2; display: flex; gap: 1rem; font-size: .8rem; justify-content: center; }
.hand { grid-column: 2; grid-row: 2; display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; }
.endturn { grid-column: 3; grid-row: 1 / 3; }
.log { list-style: none; padding: 0; margin: .3rem 0 0; font-size: .8rem; color: var(--muted); min-height: 4.5em; }

/* ---------- cards ---------- */
.card {
  font: inherit; color: var(--text); position: relative; width: 132px; min-height: 176px; padding: 1.6rem .55rem .55rem;
  border-radius: 12px; background: linear-gradient(#21405a, #142838); border: 2px solid var(--line);
  display: flex; flex-direction: column; gap: .3rem; text-align: center; transition: transform .1s, box-shadow .1s;
}
button.card { cursor: pointer; }
button.card:hover:not(:disabled) { transform: translateY(-6px); box-shadow: 0 8px 18px #0008; border-color: var(--amber); }
.card.unplayable { opacity: .55; }
button.card:disabled { cursor: not-allowed; }
.card.type-attack { border-top: 6px solid var(--attack); }
.card.type-defend { border-top: 6px solid var(--defend); }
.card.type-skill { border-top: 6px solid var(--skill); }
.card.type-oil { border-top: 6px solid var(--oil); background: linear-gradient(#3a3218, #1d1a10); }
.card.upgraded .cname { color: var(--green); }
.card .cost {
  position: absolute; top: -10px; left: -8px; width: 28px; height: 28px; border-radius: 50%;
  background: var(--amber); color: #241a08; font-weight: 800; display: grid; place-items: center; border: 2px solid #fff3c4;
}
.card .oilcost { position: absolute; top: 4px; right: 6px; font-size: .8rem; color: var(--amber); font-weight: 700; }
.card .cardkey { position: absolute; top: 4px; left: 24px; margin: 0; font-size: .65rem; }
.cname { font-weight: 700; font-size: .95rem; }
.ctype { font-size: .7rem; color: var(--muted); text-transform: capitalize; }
.ctext { font-size: .8rem; flex: 1; }
.card .price { font-weight: 700; color: var(--amber); }
.rarity-rare { box-shadow: inset 0 0 0 1px #ffcf6b55; }
.rarity-uncommon { box-shadow: inset 0 0 0 1px #8fc0ff44; }

.cardrow { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin: 1rem 0; }
.cardgrid { display: flex; gap: .7rem; flex-wrap: wrap; justify-content: center; max-height: 62vh; overflow: auto; padding: 1rem .5rem; }

/* ---------- other screens ---------- */
.loot { display: flex; align-items: center; justify-content: center; gap: .3rem; flex-wrap: wrap; }
.loot .relic-gem { width: 1.6em; height: 1.6em; }
.shoprow { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-bottom: 1rem; }
.shopitem {
  font: inherit; color: var(--text); background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: .8rem 1rem; width: 260px; display: flex; flex-direction: column; gap: .3rem; align-items: center; cursor: pointer;
}
.shopitem:hover:not(:disabled) { border-color: var(--amber); }
.shopitem:disabled { opacity: .5; cursor: not-allowed; }
.shopitem .relic-gem { width: 2em; height: 2em; }
.shopitem .price { color: var(--amber); font-weight: 700; }
.story { max-width: 620px; font-size: 1.05rem; }
.result { font-size: 1.05rem; color: var(--amber); }
.note { color: var(--green); }

.end-screen h1 { font-size: 2rem; }
.end-screen.won h1 { color: var(--amber); }
.end-screen.lost .lantern { filter: grayscale(.6); }
.stats { display: grid; grid-template-columns: auto auto; gap: .3rem 1.5rem; text-align: left; margin: 1rem 0; }
.stats dt { color: var(--muted); }
.stats dd { margin: 0; }

.overlay { position: fixed; inset: 0; background: #000b; display: grid; place-items: center; padding: 16px; z-index: 10; }
.overlay .panel { max-width: 1000px; width: 100%; max-height: 92vh; display: flex; flex-direction: column; align-items: center; }

/* Laptop heights: keep combat on one screen. */
@media (max-height: 800px) {
  .battlefield { min-height: 250px; }
  .enemy .creature { width: 100px; height: 92px; }
  .kind-boss .creature { width: 130px; height: 118px; }
  .hero { width: 86px; height: 110px; }
  .lantern-box .lantern { width: 86px; height: 104px; }
  .card { min-height: 158px; width: 124px; }
  .title-art .lantern { width: 100px; height: 120px; }
}
@media (max-width: 900px) {
  .battlefield { grid-template-columns: 1fr 1fr; }
  .enemies { grid-column: 1 / -1; }
  .topbar { grid-template-columns: 1fr auto; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ================= Chompy Arcade additions ================= */
h1, h2, .logo { font-family: "Chewy", "Baloo 2", "Trebuchet MS", system-ui, sans-serif; font-weight: 400; letter-spacing: .02em; }
.title-screen h1.logo { font-size: clamp(3rem, 9vw, 4.6rem); }
.btn { min-height: 44px; font-weight: 700; }
.btn.small { min-height: 38px; }
.btn.big { font-size: 1.25rem; padding: .7em 1.6em; }
.menurow { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; }
.back { display: inline-block; margin: .8rem auto 0; color: var(--amber); font-weight: 800; text-decoration: none; padding: .35em .9em; border-radius: 999px; border: 2px solid #ffcf6b66; }
.back:hover, .back:focus-visible { background: #ffcf6b22; }
.credit { margin: .3rem 0 0; font-size: .9rem; }
.safety { font-size: .9rem; background: #ffffff0d; border-radius: 10px; padding: .45rem .7rem; margin: .4rem 0 0; }
.best { font-size: .9rem; }
.ca-facts { display: flex; flex-wrap: wrap; gap: 6px 8px; list-style: none; padding: 0; margin: 4px 0 12px; font-size: 14px; line-height: 1.3; justify-content: center; }
.ca-facts li { background: rgba(127,127,127,.18); border-radius: 999px; padding: 4px 12px; }
.ca-facts b { margin-right: 5px; opacity: .85; }
.ca-about { margin: 0 auto 6px; max-width: 62ch; text-align: left; }
.ca-about summary { cursor: pointer; font-weight: 800; font-size: 15px; text-align: center; }
.ca-about p { margin: 6px 0 0; line-height: 1.45; font-size: 15px; }
.lvl { font-size: .75rem; font-weight: 800; border-radius: 999px; padding: 1px 9px; margin-left: .3rem; background: #ffffff18; }
.lvl-easy { color: #9ff2b0; } .lvl-medium { color: #ffe08a; } .lvl-hard { color: #ffb38a; } .lvl-bigkid { color: #ffa8c8; }

/* setup: pick a level, pick a friend */
.setup { max-width: 920px; text-align: center; overflow: auto; }
.levels { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; width: 100%; }
.btn.level { display: flex; flex-direction: column; align-items: center; gap: .15rem; padding: .7em .6em; text-align: center; }
.btn.level b { font-size: 1.2rem; }
.btn.level small { color: var(--amber); }
.btn.level span { font-size: .8rem; color: var(--muted); font-weight: 600; }
.friends { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; }
.btn.friend { display: flex; flex-direction: column; align-items: center; padding: .4em .5em .5em; width: 132px; }
.friendpic { width: 96px; height: 120px; }
.btn.chosen { border-color: var(--amber); background: #3a3220; box-shadow: 0 0 0 3px #ffcf6b44; }
.heroline { font-style: italic; color: var(--amber); }

/* gang pictures (canvas) */
canvas.pic { display: block; }
.player-side .hero { width: 110px; height: 138px; }
.hero.big { width: 140px; height: 170px; margin: 0 auto; }
.enemy canvas.creature { width: 130px; height: 120px; }

/* card picture row, for players who are still learning to read */
.cpics { display: flex; gap: .25rem; justify-content: center; flex-wrap: wrap; font-weight: 800; font-size: 1.05rem; }
.cp { display: inline-flex; align-items: center; background: #0005; border-radius: 8px; padding: 0 6px; }
.cp .icon { width: 1.15em; height: 1.15em; margin-right: .1em; }
.cp-attack, .cp-bonkall { color: #ff9a85; }
.cp-defend { color: #8fc0ff; }
.cp-oil, .cp-oilcost, .cp-energy { color: var(--amber); }
.cp-heart { color: #ff8fa0; }
.cp-deck { color: #c8d8e8; }
.cp-st-exposed { color: #ff9a85; } .cp-st-shaken { color: var(--violet); } .cp-st-grit { color: #ffd36b; } .cp-st-steady { color: var(--amber); }
.status .icon { width: 1em; height: 1em; }

/* Easy-mode tips */
.card.tip, .btn.tip { box-shadow: 0 0 0 3px #9ff2b0, 0 0 22px #9ff2b0aa; animation: tipglow 1.2s ease-in-out infinite; }
@keyframes tipglow { 50% { box-shadow: 0 0 0 3px #9ff2b0, 0 0 6px #9ff2b055; } }
.fredtip { margin: 0; color: #c8ffd4; font-weight: 700; }
.fredtip .icon { color: #9ff2b0; }

.fact { max-width: 620px; margin: 1.2rem auto 0; background: #ffffff0d; border-radius: 12px; padding: .6rem .9rem; font-size: .95rem; }
.fact .icon { color: var(--teal); }
.eventart .scene { width: min(320px, 80vw); height: auto; border-radius: 12px; }
.badge.good { background: #2a6a3a; color: #d8ffe0; }
.soclose-screen h1 { color: var(--amber); font-size: 2.6rem; }
.end-screen .hero.big { margin-bottom: .2rem; }
.noscript { text-align: center; }

/* phones and small tablets */
@media (hover: none) and (pointer: coarse) {
  kbd { display: none; }   /* key hints only help keyboard players */
}
html, body { overflow-x: hidden; }
@media (max-width: 700px) {
  .app { padding: 0 8px; max-width: 100vw; }
  .topbar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .3rem .6rem; }
  .tb-left { width: 100%; }
  .tb-stats { flex-wrap: wrap; gap: .4rem; }
  .tb-relics { width: 100%; }
  .btn.friend { width: 30%; min-width: 96px; }
  .friendpic { width: 72px; height: 90px; }
  .levels { grid-template-columns: 1fr 1fr; }
  .battlefield { grid-template-columns: 1fr 1fr; gap: .4rem; min-height: 0; }
  .player-side .hero { width: 80px; height: 100px; }
  .lantern-box .lantern { width: 70px; height: 84px; }
  .enemy { width: 46%; min-width: 140px; }
  .enemy .creature, .enemy canvas.creature { width: 90px; height: 84px; }
  .handbar { grid-template-columns: 64px 1fr; }
  .endturn { grid-column: 1 / -1; grid-row: auto; width: 100%; }
  .hand { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; padding: 12px 4px 6px; }
  .card { flex: 0 0 auto; width: 118px; min-height: 160px; }
  .topbar { gap: .4rem; }
  .tb-seed { display: none; }
}