:root {
  --night: #16202e;
  --night-2: #1f2c3f;
  --stone: #3a4658;
  --parchment: #f7ecd2;
  --parchment-2: #ecdcb6;
  --ink: #2c1f12;
  --muted: #7a6a52;
  --gold: #f2c14e;
  --gold-dark: #b8861b;
  --crimson: #b23a48;
  --leaf: #6fae4f;
  --sky: #3f8fd8;
  --good: #2e7d32;
  --bad: #c62828;
  --radius: 16px;
  --pop: cubic-bezier(.34, 1.56, .64, 1);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: "Fredoka", system-ui, sans-serif;
  color: var(--parchment);
  background:
    radial-gradient(ellipse at 50% -20%, rgba(255, 196, 120, 0.25), transparent 60%),
    radial-gradient(ellipse at 50% 130%, rgba(0, 0, 0, 0.55), transparent 65%),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.16) 0 2px, transparent 2px 46px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.12) 0 2px, transparent 2px 92px),
    linear-gradient(180deg, #2a3446, #1d2533 60%, #161c27);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, .display { font-family: "Lilita One", "Fredoka", sans-serif; font-weight: 400; letter-spacing: 0.02em; }
h3 { margin: 0 0 0.5rem; font-size: 1.1rem; }
button { font-family: inherit; }
.muted { color: var(--muted); font-size: 0.88rem; font-family: "Fredoka", sans-serif; }
.good { color: var(--good); }
.bad { color: var(--bad); }

/* ---------- buttons ---------- */
.btn {
  appearance: none; border: 0; border-radius: 12px;
  padding: 0.65rem 1.1rem; font-size: 1rem; font-weight: 600;
  color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem;
  background: linear-gradient(180deg, #ffd978, var(--gold));
  box-shadow: 0 4px 0 var(--gold-dark), 0 6px 14px rgba(0, 0, 0, 0.25);
  cursor: pointer; transition: transform 0.1s ease, box-shadow 0.1s ease, filter 0.15s ease;
}
.btn:hover:not(:disabled) { filter: brightness(1.07); transform: translateY(-1px); }
.btn:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--gold-dark); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn.big { width: 100%; padding: 0.85rem 1.2rem; font-size: 1.12rem; margin-top: 0.9rem; }
.btn.sm { padding: 0.4rem 0.75rem; font-size: 0.88rem; border-radius: 10px; box-shadow: 0 3px 0 var(--gold-dark); }
.btn.ghost { background: rgba(255, 255, 255, 0.08); color: inherit; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.25); }
.panel .btn.ghost, .modal .btn.ghost { color: var(--ink); box-shadow: inset 0 0 0 2px #c9ad74; background: rgba(255, 255, 255, 0.35); }
.btn.lava { background: linear-gradient(180deg, #e2665f, var(--crimson)); color: #fff; box-shadow: 0 4px 0 #7d1f2a; }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.8rem; }
.btn-row.center { justify-content: center; }
.link { background: none; border: 0; color: #9c5b00; text-decoration: underline; cursor: pointer; padding: 0 0.2rem; }

/* ---------- panels ---------- */
.panel {
  background:
    radial-gradient(ellipse at 20% 0%, rgba(255, 255, 255, 0.5), transparent 60%),
    linear-gradient(180deg, var(--parchment), #f1e2bf);
  color: var(--ink);
  border-radius: var(--radius);
  padding: 0.9rem 1rem;
  box-shadow: 0 0 0 3px #6b4a2a, 0 0 0 5px #3e2a16, 0 10px 24px rgba(0, 0, 0, 0.4);
}

/* ---------- setup ---------- */
.setup { --gh-frame: #6b4a2a; --gh-frame-2: #3e2a16; --gh-line: var(--parchment-2); --gh-accent: var(--gold); --gh-accent-soft: rgba(242, 193, 78, 0.4); }
.gh-shade { background: linear-gradient(180deg, rgba(10, 14, 24, 0) 40%, rgba(10, 14, 24, 0.85)); }
.hero-particles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.field { margin: 0.8rem 0; }
.label { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.35rem; color: #5a4630; }
.seg { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.seg button { flex: 1 1 auto; border: 0; border-radius: 10px; padding: 0.55rem 0.8rem; font-size: 0.95rem; font-weight: 600; cursor: pointer; background: #fff8e6; color: var(--ink); box-shadow: inset 0 0 0 2px var(--parchment-2); }
.seg button.on { background: linear-gradient(180deg, #ffd978, var(--gold)); box-shadow: 0 3px 0 var(--gold-dark); }
.names { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.names input { width: 100%; padding: 0.55rem 0.7rem; border-radius: 10px; border: 2px solid var(--parchment-2); font: inherit; background: #fffdf6; }
.setup:not(.is-local) .local-only { visibility: hidden; }
@media (max-width: 560px) { .names { grid-template-columns: 1fr; } .setup:not(.is-local) .local-only { display: none; } }
.setup.is-local .ai-only { display: none; }
.setup.is-online .offline-only { display: none; }
.setup:not(.is-online) .online-only { display: none; }
.ol-gate { text-align: center; padding: 0.6rem 0 0.2rem; }
.ol-gate p { margin: 0 0 0.9rem; }
.ol-head { display: flex; align-items: center; justify-content: space-between; }
.ol-head .label { margin: 0; }
.ol-list { list-style: none; margin: 0.4rem 0 0.9rem; padding: 0; display: grid; gap: 0.4rem; }
.ol-game { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; padding: 0.55rem 0.75rem; border-radius: 12px; background: #fffdf6; box-shadow: inset 0 0 0 2px var(--parchment-2); }
.ol-game.mine, .ol-game.invite { background: #fff4d0; box-shadow: inset 0 0 0 2px #f0c75a; }
.ol-who small { display: block; color: #6b5a44; font-size: 0.85rem; margin-top: 0.1rem; }
.ol-you { color: #a15c00; }
.ol-btns { display: flex; gap: 0.35rem; flex-shrink: 0; }
.ol-empty { padding: 0.5rem 0.2rem; }
.ol-new { display: grid; gap: 0.5rem; }
.ol-new label { flex: 1; }
.ol-new input { width: 100%; padding: 0.55rem 0.7rem; border-radius: 10px; border: 2px solid var(--parchment-2); font: inherit; background: #fffdf6; }
.ol .small { font-size: 0.85rem; margin: 0.6rem 0 0; }
.ol-loading { text-align: center; padding: 4rem 1rem; color: #f4e6c8; font-size: 1.1rem; }
#app.ol-wait { cursor: progress; }
#app.ol-wait .loc, #app.ol-wait .act, #app.ol-wait .vcard { pointer-events: none; opacity: 0.85; }

/* ---------- top bar ---------- */
.topbar {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.8rem 1.4rem;
  padding: 0.7rem 1.2rem;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 14px), linear-gradient(180deg, #3b2a1a, #24170b);
  border-bottom: 3px solid #120a03; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  position: sticky; top: 0; z-index: 5;
}
.brand { display: flex; align-items: center; gap: 0.65rem; }
.brand-logo { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px #f3d9a4, 0 4px 10px rgba(0, 0, 0, 0.5); animation: sway 5s ease-in-out infinite; }
.brand h1 { margin: 0; font-size: 1.5rem; line-height: 1; color: #ffe08a; text-shadow: 0 3px 0 rgba(0, 0, 0, 0.45); }
.brand small { display: block; font-size: 0.78rem; color: rgba(247, 236, 210, 0.75); margin-top: 0.2rem; }
.top-mid { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.top-actions { display: flex; gap: 0.5rem; }
.top-actions .btn { white-space: nowrap; }
.tracker { display: flex; align-items: center; gap: 3px; flex-wrap: wrap; }
.pip { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, 0.08); font-size: 0.85rem; opacity: 0.55; transition: transform 0.3s var(--pop); }
.pip.done { opacity: 0.3; filter: grayscale(1); }
.pip.now { opacity: 1; background: rgba(242, 193, 78, 0.3); box-shadow: 0 0 0 2px var(--gold); transform: scale(1.18); animation: glowPip 2s ease-in-out infinite; }
.pip.ev { position: relative; outline: 2px dashed rgba(242, 193, 78, 0.85); outline-offset: 1px; opacity: 0.85; }
.pip.ev::after { content: '📰'; position: absolute; right: -6px; top: -4px; font-size: 0.62rem; line-height: 1; }
.pip.done.ev { outline-color: rgba(242, 193, 78, 0.35); }
.yr-gap { width: 10px; }
.turn-banner { display: flex; align-items: center; flex-wrap: wrap; gap: 0.3rem 0.9rem; font-size: 0.95rem; }
.turn-name { color: #fff; padding: 0.1rem 0.6rem; border-radius: 999px; background: var(--pc); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.35); animation: bannerIn 0.4s ease; }
.acts { color: rgba(247, 236, 210, 0.85); }
.who { display: inline-flex; align-items: center; gap: 0.3rem; color: rgba(247, 236, 210, 0.8); font-size: 0.85rem; letter-spacing: 0.08em; }
.who i, .tab i, .res-head h3 i, .dcol h3 i, .final-table th i { width: 0.7em; height: 0.7em; border-radius: 50%; background: var(--pc); display: inline-block; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.7); }
.thinking { color: #ffe08a; }
.dots i { font-style: normal; display: inline-block; animation: dot 1.2s ease-in-out infinite; }
.dots i:nth-child(2) { animation-delay: 0.2s; }
.dots i:nth-child(3) { animation-delay: 0.4s; }

/* ---------- threats ---------- */
.threats { display: grid; grid-template-columns: auto repeat(3, minmax(0, 1fr)); gap: 0.8rem; padding: 0.9rem 1.2rem 0.2rem; max-width: 1400px; margin: 0 auto; align-items: stretch; }
.threats-head { display: flex; flex-direction: column; justify-content: center; }
.threats-head h3 { color: #ffe08a; margin: 0; font-size: 1.3rem; }
.threats-head .muted { color: rgba(247, 236, 210, 0.6); max-width: 7rem; }
.threat {
  display: grid; grid-template-columns: 74px 1fr; gap: 0.2rem 0.7rem; padding: 0.55rem 0.7rem 0.6rem; position: relative;
  border-radius: 14px; color: var(--ink);
  background: linear-gradient(180deg, #f3e4c1, #e6d2a6);
  box-shadow: 0 0 0 2px #6b4a2a, 0 8px 18px rgba(0, 0, 0, 0.35);
  animation: rise 0.4s ease both;
}
.threat:nth-child(3) { animation-delay: 0.06s; }
.threat:nth-child(4) { animation-delay: 0.12s; }
.threat.tonight { background: linear-gradient(180deg, #ffe1c8, #f6c79b); box-shadow: 0 0 0 3px var(--crimson), 0 0 22px rgba(178, 58, 72, 0.55), 0 8px 18px rgba(0, 0, 0, 0.35); }
.th-when { grid-column: 1 / -1; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #7a4a1e; }
.tonight .th-when { color: var(--crimson); }
.th-art { width: 74px; height: 74px; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 0 0 3px #fff, 0 3px 8px rgba(0, 0, 0, 0.35); align-self: center; }
.th-art img { width: 100%; height: 100%; object-fit: contain; display: block; }
.tonight .th-art img { animation: prowl 3s ease-in-out infinite; }
.th-body { min-width: 0; }
.th-name { font-family: "Lilita One", sans-serif; font-size: 1.08rem; display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.th-str { display: inline-block; background: #3d2617; color: #ffd27a; border-radius: 999px; padding: 0 0.45rem; font-family: "Fredoka", sans-serif; font-weight: 700; font-size: 0.85rem; }
.th-kind { font-size: 0.8rem; color: #5a4630; }
.th-def { font-size: 0.82rem; font-weight: 700; margin: 0.15rem 0; }
.th-def.ok { color: var(--good); }
.th-def.bad { color: var(--bad); }
.th-out { font-size: 0.76rem; display: flex; flex-direction: column; line-height: 1.25; }
.th-out .win { color: var(--good); }
.th-out .lose { color: #8e2a1f; }
.th-def.maybe { color: #a0620c; }
.threats-head .th-hint { font-size: 0.72rem; margin-top: 0.3rem; line-height: 1.25; }
.threat.unknown { background: linear-gradient(180deg, #d9cdb4, #c2b391); }
.th-q { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-family: "Lilita One", sans-serif; font-size: 2.6rem; color: #6b4a2a; background: radial-gradient(circle, #efe3c6, #cdb98f); }

/* ---------- season event & goals ---------- */
.event-card { border-radius: 14px; padding: 0.7rem 0.8rem; background: linear-gradient(180deg, #fff3d6, #f3dca8); box-shadow: 0 0 0 2px #b9842f, 0 6px 14px rgba(0, 0, 0, 0.18); }
.event-card.pending { box-shadow: 0 0 0 3px #e0a12a, 0 0 18px rgba(224, 161, 42, 0.55); animation: glow 2s ease-in-out infinite; }
.event-card h3 { margin: 0 0 0.2rem; display: flex; gap: 0.4rem; align-items: center; }
.event-card .ev-season { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #7a4a1e; }
.event-card p { margin: 0.2rem 0 0.5rem; font-size: 0.88rem; }
.ev-opts { display: grid; gap: 0.4rem; }
.ev-opt { display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 0.1rem; padding: 0.45rem 0.65rem; border-radius: 10px; border: 2px solid #b9842f; background: #fffaf0; cursor: pointer; font: inherit; color: var(--ink); }
.ev-opt b { font-size: 0.95rem; }
.ev-opt small { font-size: 0.8rem; color: #5a4630; }
.ev-opt:hover:not([disabled]) { background: #fff; border-color: #e0a12a; transform: translateY(-1px); }
.ev-opt[disabled] { opacity: 0.5; cursor: not-allowed; }
.ev-done { font-size: 0.85rem; color: #3f6b2a; font-weight: 700; }
.goals h3 { margin: 0 0 0.4rem; }
.goal { display: grid; grid-template-columns: 1.6rem 1fr auto; gap: 0.1rem 0.45rem; align-items: center; padding: 0.35rem 0; border-top: 1px dashed rgba(107, 74, 42, 0.3); }
.goal:first-of-type { border-top: 0; }
.goal .gi { font-size: 1.2rem; grid-row: span 2; }
.goal b { font-size: 0.92rem; }
.goal small { grid-column: 2; font-size: 0.78rem; color: #5a4630; }
.goal .gv { grid-row: span 2; display: flex; gap: 0.3rem; font-weight: 700; font-size: 0.85rem; }
.goal .gv span { min-width: 1.6rem; text-align: center; border-radius: 999px; padding: 0 0.35rem; background: rgba(0, 0, 0, 0.06); box-shadow: inset 0 0 0 2px var(--pc); }
.goal .gv span.lead { background: var(--pc); color: #fff; }
.goals .muted { font-size: 0.75rem; margin: 0.3rem 0 0; }
.vstats .noise { color: #a0620c; }

/* ---------- layout ---------- */
.layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, 1fr); gap: 1.2rem; padding: 1rem 1.2rem; max-width: 1400px; margin: 0 auto; align-items: start; }
.side { display: grid; gap: 1.1rem; }
#row, .lower { max-width: 1400px; margin: 0 auto 1.2rem; }
#row { margin: 0 1.2rem 1.2rem; }
@media (min-width: 1440px) { #row { margin: 0 auto 1.2rem; } }
.lower { display: grid; grid-template-columns: 1.3fr 1fr; gap: 1.2rem; padding: 0 1.2rem 2rem; }

/* ---------- board ---------- */
.board-wrap { position: relative; }
.board-tabs { display: flex; gap: 0.4rem; margin-bottom: -2px; position: relative; z-index: 1; }
.tab { border: 0; cursor: pointer; padding: 0.5rem 0.9rem; border-radius: 12px 12px 0 0; font-weight: 600; font-size: 0.95rem; display: inline-flex; align-items: center; gap: 0.4rem; background: rgba(255, 255, 255, 0.1); color: var(--parchment); }
.tab.on { background: #2f5a2f; color: #fff; box-shadow: inset 0 3px 0 var(--pc); }
.tab-score { opacity: 0.8; font-size: 0.85rem; }
.board {
  position: relative; overflow: hidden; border-radius: 0 18px 18px 18px;
  background: radial-gradient(circle at 50% 45%, #3f7a3a, #2a5229 60%, #1e3d1e);
  box-shadow: 0 0 0 4px #4a3320, 0 0 0 7px #24170b, 0 16px 34px rgba(0, 0, 0, 0.5), inset 0 0 60px rgba(0, 0, 0, 0.45);
  transition: background 0.8s ease;
}
.board.season-summer { background: radial-gradient(circle at 50% 45%, #4c8a3a, #305f28 60%, #213f1c); }
.board.season-autumn { background: radial-gradient(circle at 50% 45%, #7a6a2e, #5a4a22 60%, #3b2f17); }
.board.season-winter { background: radial-gradient(circle at 50% 45%, #6e8597, #4b6072 60%, #33424f); }
#svg { display: block; width: 100%; height: auto; max-height: 76vh; margin: 0 auto; }
.particles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.pt { position: absolute; top: -8%; opacity: 0.85; animation-name: fall; animation-timing-function: linear; animation-iteration-count: infinite; }
.pt-summer { animation-name: drift; top: auto; bottom: -5%; opacity: 0.7; }

.ground { stroke: #3d6b2c; stroke-width: 3; }
.road { fill: none; stroke: rgba(222, 196, 140, 0.45); stroke-width: 10; stroke-linejoin: round; }
.frost { fill: rgba(235, 245, 255, 0.22); pointer-events: none; }
.cell { cursor: pointer; }
.hex { stroke: rgba(40, 60, 30, 0.45); stroke-width: 1.5; transition: filter 0.2s ease; }
.cell:hover .hex { filter: brightness(1.12); }
.cell.dim { opacity: 0.45; }
.decor { text-anchor: middle; dominant-baseline: middle; pointer-events: none; transform-box: fill-box; transform-origin: 50% 100%; }
.d-forest { animation: sway 4s ease-in-out infinite; }
.d-meadow { animation: sway 3s ease-in-out infinite; }
.d-plains { animation: sway 3.6s ease-in-out infinite; }
.can-ring { fill: rgba(255, 224, 138, 0.4); stroke: #ffe08a; stroke-width: 4.5; animation: canPulse 1.2s ease-in-out infinite; pointer-events: none; }
.ghost-img { opacity: 0; pointer-events: none; transition: opacity 0.15s; }
.cell.can:hover .ghost-img { opacity: 0.75; }

.bld { cursor: pointer; }
.bld-bg { stroke: rgba(0, 0, 0, 0.25); stroke-width: 2; }
.bld-ring { fill: none; stroke: #fff; stroke-width: 2.5; }
.bld.fresh { animation: pieceDrop 0.6s var(--pop) both; transform-box: fill-box; }
.bld.unstaffed image { opacity: 0.6; }
.bld.site image { opacity: 0.8; filter: grayscale(0.35); }
.bld.site .smoke { display: none; }
.site-hatch { pointer-events: none; opacity: 0.4; }
.site-ring { fill: none; stroke: #ffb300; stroke-width: 3; stroke-dasharray: 6 4; pointer-events: none; animation: site-spin 6s linear infinite; }
.site-tag { pointer-events: none; }
.site-tag rect { fill: #3e2723; stroke: #ffb300; stroke-width: 1.5; }
.site-tag text { fill: #ffe082; font: 700 9.5px Fredoka, sans-serif; text-anchor: middle; }
@keyframes site-spin { to { stroke-dashoffset: -40; } }
.bld:hover .bld-ring { stroke: #ffe08a; stroke-width: 3.5; }
.slot { stroke: #fff; stroke-width: 2; }
.slot.full { fill: #fff; }
.slot.spec { stroke: #ffd24d; stroke-width: 2.5; }
.slot.empty { fill: rgba(0, 0, 0, 0.35); stroke-dasharray: 3 2; }
.slot-q { fill: #fff; font-size: 12px; font-weight: 700; text-anchor: middle; pointer-events: none; }
.smoke circle { fill: rgba(240, 240, 240, 0.75); animation: smoke 3.2s ease-out infinite; transform-box: fill-box; transform-origin: center; }
.smoke circle:nth-child(2) { animation-delay: 1.05s; }
.smoke circle:nth-child(3) { animation-delay: 2.1s; }
.flag .pole { stroke: #3e2a16; stroke-width: 2; }
.pennant { stroke: rgba(0, 0, 0, 0.3); stroke-width: 0.8; animation: wave 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: 0 50%; }
.shimmer { fill: none; stroke: rgba(160, 225, 255, 0.9); stroke-width: 3; animation: shimmer 2.4s ease-in-out infinite; pointer-events: none; }

.wall line { stroke-linecap: round; }
.w0 { stroke: rgba(255, 255, 255, 0.28); stroke-width: 3; stroke-dasharray: 3 9; }
.w1-base { stroke: #5b3a1c; stroke-width: 10; }
.w1-stakes { stroke: #a0703f; stroke-width: 7; stroke-dasharray: 5 2.5; }
.w2-base { stroke: #59626d; stroke-width: 14; }
.w2-top { stroke: #b4bcc6; stroke-width: 9; stroke-dasharray: 10 4; }
.wall.fresh { animation: fenceIn 0.6s var(--pop) both; transform-box: fill-box; transform-origin: center; }
.wall-tag { font-size: 12px; text-anchor: middle; fill: #fff; font-weight: 700; paint-order: stroke; stroke: rgba(0, 0, 0, 0.55); stroke-width: 3px; pointer-events: none; }
.side-pick { cursor: pointer; }
.side-hit { stroke: rgba(255, 224, 138, 0.35); stroke-width: 26; animation: canPulse 1.2s ease-in-out infinite; }
.side-pick:hover .side-hit { stroke: rgba(255, 224, 138, 0.75); }
.side-pick.maxed { pointer-events: none; opacity: 0.5; }
.side-cost { font-size: 12.5px; text-anchor: middle; fill: #ffe08a; font-weight: 700; paint-order: stroke; stroke: #24170b; stroke-width: 4px; pointer-events: none; }
.foe-ring { fill: #fff; stroke: var(--crimson); stroke-width: 4; }
.foe-bob { animation: prowl 2.4s ease-in-out infinite; }
.foe.fly .foe-bob { animation: swoopIdle 3.2s ease-in-out infinite; }
.foe-badge { fill: #3d2617; stroke: #ffd27a; stroke-width: 2; }
.foe-str { font-size: 13px; text-anchor: middle; fill: #ffd27a; font-weight: 700; }
.foe-arrow { fill: var(--crimson); stroke: #fff; stroke-width: 1.5; animation: nudge 0.9s ease-in-out infinite; }

.pickbar { display: none; }
.pickbar.on { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; margin-top: 0.7rem; padding: 0.6rem 0.9rem; border-radius: 12px; background: #fff4d0; color: var(--ink); box-shadow: 0 0 0 2px var(--gold), 0 6px 16px rgba(0, 0, 0, 0.3); animation: rise 0.25s ease; }

/* ---------- resources ---------- */
.res-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.6rem; }
.res-head h3 { margin: 0; display: flex; align-items: center; gap: 0.45rem; }
.score-pill { background: #3d2617; color: #ffd27a; border-radius: 999px; padding: 0.2rem 0.7rem; font-weight: 700; cursor: help; }
.rchips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.rchip { display: inline-flex; align-items: baseline; gap: 0.2rem; padding: 0.3rem 0.55rem; border-radius: 10px; background: #fffaf0; box-shadow: inset 0 0 0 2px var(--parchment-2); min-width: 3.4rem; }
.rchip .ri { font-size: 1.1rem; }
.rchip b { font-size: 1.1rem; }
.rchip small { color: var(--good); font-weight: 700; font-size: 0.75rem; }
.vstats { list-style: none; margin: 0.7rem 0 0; padding: 0; display: grid; gap: 0.3rem; font-size: 0.88rem; }
.vstats li { display: flex; gap: 0.4rem; align-items: baseline; padding: 0.3rem 0.5rem; border-radius: 8px; background: rgba(255, 255, 255, 0.45); }
.vstats li.bad { background: #ffe1dc; color: #8e1c12; }
.vstats li.good-li { background: #e5f5dc; }
.vstats .warn { color: #a0560c; font-weight: 700; }

/* ---------- actions ---------- */
.acts-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.45rem; }
.act {
  border: 0; cursor: pointer; border-radius: 12px; padding: 0.5rem 0.4rem; display: grid; justify-items: center; gap: 0.05rem;
  background: linear-gradient(180deg, #fffdf6, #f6e8c6); color: var(--ink);
  box-shadow: 0 3px 0 #c8ab72, inset 0 0 0 2px #e9d6aa; transition: transform 0.12s var(--pop), box-shadow 0.12s ease;
}
.act:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 5px 0 #c8ab72, inset 0 0 0 2px var(--gold); }
.act:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 #c8ab72; }
.act:disabled { opacity: 0.42; cursor: not-allowed; }
.act.wide { grid-column: span 1; }
.act.ghosty { background: transparent; box-shadow: inset 0 0 0 2px #e0cc9c; }
.act .ai { font-size: 1.35rem; line-height: 1.1; }
.act .at { font-weight: 700; font-size: 0.9rem; }
.act .as { font-size: 0.72rem; color: #6b5636; text-align: center; }
.tip { font-size: 0.8rem; color: var(--muted); margin: 0.6rem 0 0; }
.waiting { animation: pulseTag 1.4s ease-in-out infinite; }

/* ---------- crossroads ---------- */
.row-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 0.9rem; margin-bottom: 0.7rem; }
.row-head h3 { margin: 0; }
.warn-pill, .ok-pill { margin-left: auto; padding: 0.15rem 0.6rem; border-radius: 999px; font-size: 0.82rem; font-weight: 700; }
.warn-pill { background: #ffe1dc; color: #8e1c12; }
.ok-pill { background: #e5f5dc; color: var(--good); }
#row.flash { animation: flash 1s ease; }
.vrow { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.9rem 0.7rem; padding-top: 0.4rem; }
.vcard {
  position: relative; border-radius: 14px; padding: 0.5rem 0.55rem 0.6rem; cursor: pointer;
  background: linear-gradient(180deg, #fffdf6, #f3e3bd); box-shadow: 0 0 0 2px #d9c08a, 0 6px 12px rgba(0, 0, 0, 0.18);
  transition: transform 0.18s var(--pop), box-shadow 0.18s ease; animation: dealIn 0.4s ease both;
}
.vcard:hover:not(.off) { transform: translateY(-4px) rotate(-0.6deg); box-shadow: 0 0 0 3px var(--gold), 0 12px 20px rgba(0, 0, 0, 0.25); }
.vcard.off { cursor: default; filter: saturate(0.6); opacity: 0.78; }
.vtag { position: absolute; top: -8px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 0.7rem; font-weight: 700; background: var(--crimson); color: #fff; padding: 0.1rem 0.5rem; border-radius: 999px; z-index: 1; }
.v-art { aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.06); }
.v-art img { width: 100%; height: 100%; object-fit: contain; display: block; transition: transform 0.4s ease; }
.vcard:hover .v-art img { transform: scale(1.03); }
.v-name { font-family: "Lilita One", sans-serif; font-size: 1.02rem; margin-top: 0.35rem; }
.v-price { display: flex; justify-content: space-between; font-weight: 700; font-size: 0.9rem; }
.v-pts { color: #8a5d00; }
.v-text { font-size: 0.78rem; line-height: 1.25; margin-top: 0.2rem; }
.v-where { font-size: 0.72rem; color: var(--muted); margin-top: 0.25rem; }
.v-where.need { color: #a0560c; font-weight: 600; }
.cost { white-space: nowrap; }
.cost.short { color: var(--bad); text-decoration: underline wavy rgba(198, 40, 40, 0.5); }

/* ---------- people & log ---------- */
.pchips { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.pchip { border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.25rem 0.7rem 0.25rem 0.25rem; border-radius: 999px; background: #fffaf0; color: var(--ink); box-shadow: inset 0 0 0 2px var(--parchment-2); text-align: left; transition: transform 0.15s var(--pop); }
.pchip:hover:not(:disabled) { transform: translateY(-2px); box-shadow: inset 0 0 0 2px var(--gold); }
.pchip:disabled { cursor: default; }
.pchip img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #fff; }
.pchip b { display: block; font-size: 0.86rem; }
.pchip small { display: block; font-size: 0.72rem; color: var(--muted); }
.pchip.spec { box-shadow: inset 0 0 0 2px #e8c45a; }
.pchip.idle { background: #ffeede; box-shadow: inset 0 0 0 2px #f2b48a; }
.pchip.idle small { color: #a0560c; font-weight: 700; }
.pchip.sm img { width: 32px; height: 32px; }
.trophies { margin-top: 0.7rem; display: flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; }
.trophies img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #e8c45a; animation: pieceDrop 0.5s var(--pop) both; }
.log { list-style: none; margin: 0; padding: 0; max-height: 260px; overflow-y: auto; font-size: 0.85rem; }
.log li { padding: 0.3rem 0.4rem 0.3rem 0.6rem; border-left: 4px solid var(--pc); margin-bottom: 0.25rem; background: rgba(255, 255, 255, 0.4); border-radius: 0 8px 8px 0; animation: logIn 0.3s ease; }
.lr { font-weight: 700; color: var(--muted); margin-right: 0.4rem; font-size: 0.75rem; }

/* ---------- modal ---------- */
.modal-back { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 1rem; background: rgba(8, 10, 18, 0.62); backdrop-filter: blur(3px); animation: fade 0.2s ease; }
.modal { position: relative; width: min(560px, 100%); max-height: 90vh; overflow-y: auto; color: var(--ink); border-radius: 20px; padding: 1.3rem 1.4rem; background: linear-gradient(180deg, var(--parchment), #f0dfb9); box-shadow: 0 0 0 4px #6b4a2a, 0 0 0 7px #3e2a16, 0 30px 60px rgba(0, 0, 0, 0.6); animation: rise 0.3s var(--pop); }
.modal-back.wide .modal { width: min(1080px, 100%); }
.modal h2 { margin: 0 0 0.5rem; padding-right: 2.4rem; }
.modal-x { position: absolute; top: 0.6rem; right: 0.7rem; border: 0; background: rgba(0, 0, 0, 0.06); width: 34px; height: 34px; border-radius: 50%; cursor: pointer; font-size: 1rem; z-index: 2; }
.bgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 0.8rem; margin-top: 0.6rem; }
.bcard { border: 0; text-align: left; cursor: pointer; border-radius: 14px; padding: 0.55rem; background: #fffaf0; color: var(--ink); box-shadow: 0 0 0 2px #e2cc98, 0 5px 10px rgba(0, 0, 0, 0.12); display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 0.65rem; align-items: start; transition: transform 0.15s var(--pop), box-shadow 0.15s; font-size: 0.85rem; animation: dealIn 0.35s ease both; }
.b-body { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.bcard:hover:not(.off) { transform: translateY(-3px); box-shadow: 0 0 0 3px var(--gold), 0 10px 18px rgba(0, 0, 0, 0.18); }
.bcard.off { cursor: not-allowed; opacity: 0.6; }
.bcard.wonder { background: linear-gradient(180deg, #fff6d8, #f6e3a8); box-shadow: 0 0 0 2px #d9a93a, 0 5px 10px rgba(0, 0, 0, 0.12); }
.b-art { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--bc); }
.b-art img { width: 100%; height: 100%; object-fit: contain; display: block; }
.b-art.big { width: 150px; height: 150px; aspect-ratio: 1; border-radius: 18px; flex: none; box-shadow: 0 0 0 4px #fff, 0 6px 14px rgba(0, 0, 0, 0.25); }
.b-art.big.v { background: #fff; }
.b-n { position: absolute; right: 6px; top: 6px; background: rgba(0, 0, 0, 0.6); color: #fff; border-radius: 999px; padding: 0 0.45rem; font-weight: 700; font-size: 0.8rem; }
.b-name { font-family: "Lilita One", sans-serif; font-size: 1.05rem; }
.b-cost { font-weight: 700; }
.b-text { line-height: 1.3; flex: 1; }
.b-foot { display: flex; justify-content: space-between; gap: 0.4rem; font-size: 0.74rem; color: var(--muted); }
.b-job { font-size: 0.78rem; color: #4a5d23; background: #eef5dc; border-radius: 8px; padding: 0.2rem 0.4rem; }
.b-why { font-size: 0.76rem; font-weight: 700; color: #a0560c; }
.wtag { font-family: "Fredoka", sans-serif; font-size: 0.68rem; background: #8a5d00; color: #fff; padding: 0.05rem 0.4rem; border-radius: 999px; vertical-align: middle; }
.binfo { display: flex; gap: 1.1rem; align-items: flex-start; }
.binfo p { margin: 0.4rem 0; }
.trade .tr-step { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0.5rem 0; }
.rbtn { border: 0; cursor: pointer; border-radius: 10px; padding: 0.35rem 0.6rem; font-size: 1.2rem; background: #fffaf0; box-shadow: inset 0 0 0 2px var(--parchment-2); display: inline-flex; align-items: baseline; gap: 0.2rem; }
.rbtn small { font-size: 0.75rem; color: var(--muted); }
.rbtn.on { box-shadow: inset 0 0 0 3px var(--gold); background: #fff2c4; }
.rbtn:disabled { opacity: 0.35; cursor: not-allowed; }
.tr-list { display: flex; flex-wrap: wrap; gap: 0.4rem; min-height: 2rem; align-items: center; }
.tr-item { background: #fff2c4; border-radius: 999px; padding: 0.2rem 0.6rem; font-weight: 600; }

/* ---------- dusk ---------- */
.dusk-back .modal { width: min(820px, 100%); background: linear-gradient(180deg, #2a2346 0, #4b3354 170px, #8a5a5a 235px, #f0dfb9 300px); padding-top: 0; overflow-x: hidden; }
.dusk { position: relative; }
.dusk.shake { animation: shake 0.5s ease 1.6s 2; }
.dusk-sky { position: relative; height: 0; }
.moon { position: absolute; right: 1rem; top: 1rem; width: 46px; height: 46px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fffbe6, #f2df9c); box-shadow: 0 0 30px rgba(255, 240, 180, 0.7); animation: fade 1s ease; }
.star { position: absolute; width: 3px; height: 3px; background: #fff; border-radius: 50%; animation: twinkle 2s ease-in-out infinite; }
.star:nth-child(2) { left: 8%; top: 18px; } .star:nth-child(3) { left: 18%; top: 50px; animation-delay: 0.4s; } .star:nth-child(4) { left: 27%; top: 14px; animation-delay: 0.8s; }
.star:nth-child(5) { left: 36%; top: 72px; animation-delay: 1.2s; } .star:nth-child(6) { left: 45%; top: 26px; } .star:nth-child(7) { left: 54%; top: 58px; animation-delay: 0.6s; }
.star:nth-child(8) { left: 63%; top: 10px; animation-delay: 1s; } .star:nth-child(9) { left: 71%; top: 80px; animation-delay: 0.3s; } .star:nth-child(10) { left: 78%; top: 40px; animation-delay: 1.4s; }
.star:nth-child(11) { left: 4%; top: 90px; animation-delay: 0.7s; } .star:nth-child(12) { left: 88%; top: 96px; } .star:nth-child(13) { left: 58%; top: 100px; animation-delay: 1.1s; }
.star:nth-child(14) { left: 23%; top: 104px; animation-delay: 0.2s; } .star:nth-child(15) { left: 93%; top: 14px; animation-delay: 0.9s; }
.dusk h2 { color: #ffe08a; padding-top: 1.2rem; position: relative; text-shadow: 0 3px 0 rgba(0, 0, 0, 0.4); }
.dusk-foe { position: relative; display: flex; align-items: center; gap: 1rem; color: #fff; min-height: 128px; }
.dusk-foe img { width: 124px; height: 124px; border-radius: 18px; object-fit: contain; background: #fff; box-shadow: 0 0 0 4px #fff, 0 0 30px rgba(255, 90, 60, 0.6); flex: none; }
.dusk-foe.charge img { animation: charge 1.1s cubic-bezier(.2, .8, .3, 1.2) 0.2s both; }
.dusk-foe.swoop img { animation: swoop 1.3s cubic-bezier(.2, .8, .3, 1.1) 0.2s both; }
.dusk-foe b { font-family: "Lilita One", sans-serif; font-size: 1.4rem; }
.dusk-foe .muted { color: rgba(255, 255, 255, 0.75); display: block; }
.dcols { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; margin-top: 1rem; }
.dcol { background: #fbf3df; border-radius: 14px; padding: 0.7rem 0.8rem; box-shadow: inset 0 4px 0 var(--pc); }
.dcol h3 { display: flex; gap: 0.4rem; align-items: center; }
.dstep { margin: 0.45rem 0; animation: rise 0.4s ease both; font-size: 0.9rem; }
.dstep.s1 { animation-delay: 0.6s; } .dstep.s2 { animation-delay: 1.2s; } .dstep.s3 { animation-delay: 2.4s; } .dstep.s4 { animation-delay: 3s; } .dstep.s5 { animation-delay: 3.4s; }
.dlabel { display: inline-block; min-width: 4.2rem; font-weight: 700; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: #6b5636; }
.gain { display: inline-block; font-weight: 700; color: var(--good); animation: bump 0.5s ease 0.9s; }
.bars { display: grid; gap: 0.25rem; margin: 0.35rem 0; }
.bar { position: relative; height: 20px; border-radius: 999px; background: rgba(0, 0, 0, 0.1); overflow: hidden; }
.bar span { position: absolute; inset: 0 auto 0 0; border-radius: 999px; animation: grow 0.9s ease 1.3s both; transform-origin: left; }
.bar.def span { background: linear-gradient(90deg, #5aa1e3, #2f6fb5); }
.bar.str span { background: linear-gradient(90deg, #e86a5c, #b23a48); }
.bar b { position: relative; z-index: 1; padding-left: 0.5rem; font-size: 0.8rem; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); line-height: 20px; }
.stamp { display: inline-block; font-family: "Lilita One", sans-serif; font-size: 1.3rem; padding: 0.1rem 0.7rem; border-radius: 8px; border: 3px solid currentColor; transform: rotate(-4deg); animation: stamp 0.5s cubic-bezier(.2, .8, .3, 1.3) 1.9s both; }
.stamp.ok { color: var(--good); }
.stamp.bad { color: var(--bad); }
.dcol.breach { animation: shake 0.45s ease 2s 1; }
.crossroads { margin-top: 0.8rem; }

/* ---------- banners & toasts ---------- */
.season-banner { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; pointer-events: none; animation: fade 0.3s ease; }
.season-banner.out { animation: fadeOut 0.5s ease forwards; }
.sb-in { display: flex; align-items: center; gap: 1rem; padding: 1rem 2rem 1rem 1.4rem; border-radius: 20px; color: var(--ink); background: linear-gradient(180deg, var(--parchment), #f0dfb9); box-shadow: 0 0 0 4px #6b4a2a, 0 0 0 7px #3e2a16, 0 30px 60px rgba(0, 0, 0, 0.5); animation: bannerSweep 0.6s var(--pop); }
.sb-icon { font-size: 3.4rem; animation: bump 1s ease 0.3s; }
.sb-in b { display: block; font-family: "Lilita One", sans-serif; font-size: 2rem; }
.sb-in small, .sb-in em { display: block; font-size: 0.9rem; color: var(--muted); font-style: normal; }
.sb-spring .sb-in { box-shadow: 0 0 0 4px #e48fb0, 0 0 0 7px #8a3f5e, 0 30px 60px rgba(0, 0, 0, 0.5); }
.sb-summer .sb-in { box-shadow: 0 0 0 4px #f2c14e, 0 0 0 7px #8a5d00, 0 30px 60px rgba(0, 0, 0, 0.5); }
.sb-autumn .sb-in { box-shadow: 0 0 0 4px #d9772c, 0 0 0 7px #6b3410, 0 30px 60px rgba(0, 0, 0, 0.5); }
.sb-winter .sb-in { box-shadow: 0 0 0 4px #9fd0f0, 0 0 0 7px #3d6a8a, 0 30px 60px rgba(0, 0, 0, 0.5); }
.handoff { position: fixed; left: 50%; top: 40%; transform: translate(-50%, -50%); z-index: 45; pointer-events: none; padding: 0.6rem 1.6rem; border-radius: 999px; background: var(--pc); color: #fff; font-family: "Lilita One", sans-serif; font-size: 1.6rem; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); animation: handoff 1.3s ease both; }
#toasts { position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%); z-index: 60; display: grid; gap: 0.4rem; justify-items: center; pointer-events: none; }
.toast { background: #2b1f12; color: var(--parchment); padding: 0.55rem 1rem; border-radius: 12px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4); animation: toastIn 0.3s var(--pop); font-size: 0.92rem; max-width: 90vw; }
.toast.bad { background: #7d1f2a; }
.toast.ai { background: #22324a; }
.toast.out { animation: toastOut 0.4s ease forwards; }
.toast .dot { display: inline-block; width: 0.6em; height: 0.6em; border-radius: 50%; background: var(--pc); margin-right: 0.4rem; }
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 70; overflow: hidden; }
.confetti span { position: absolute; top: -10%; font-size: 1.6rem; animation: fall 3s linear both; }

/* ---------- final ---------- */
.final { text-align: center; }
.final-art img { width: 150px; height: 150px; border-radius: 22px; object-fit: contain; box-shadow: 0 0 0 5px #ffd24d, 0 0 40px rgba(255, 210, 77, 0.6); animation: rvGlow 2.4s ease-in-out infinite, pieceDrop 0.7s var(--pop); }
.final-title { font-size: 2rem; margin-top: 0.6rem; animation: titleIn 0.6s cubic-bezier(.2, .8, .3, 1.3) 0.3s both; }
.final-table { width: 100%; border-collapse: collapse; margin: 0.8rem 0; font-size: 0.95rem; }
.final-table th, .final-table td { padding: 0.45rem 0.5rem; border-bottom: 1px solid rgba(0, 0, 0, 0.1); }
.final-table td:first-child { text-align: left; }
.final-table th { white-space: nowrap; }
.final-table tfoot td { font-weight: 700; font-size: 1.15rem; border-bottom: 0; }
.final-table td.win { color: var(--good); font-size: 1.4rem; }

/* ---------- rules ---------- */
.rules h2 { margin-bottom: 0.6rem; }
.rules-tabs { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.8rem; position: sticky; top: -1.3rem; z-index: 1; padding: 0.5rem 0; background: var(--parchment); }
.rules-tab { border: 0; cursor: pointer; padding: 0.4rem 0.8rem; border-radius: 999px; font-weight: 600; background: #fffaf0; box-shadow: inset 0 0 0 2px var(--parchment-2); }
.rules-tab.on { background: linear-gradient(180deg, #ffd978, var(--gold)); box-shadow: 0 3px 0 var(--gold-dark); }
.rules-body { line-height: 1.5; animation: fade 0.25s ease; }
.rules-body .lead { font-size: 1.05rem; }
.rules-body h4 { margin: 1rem 0 0.4rem; font-size: 1.1rem; }
.rules-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.rules-table th, .rules-table td { text-align: left; padding: 0.4rem 0.5rem; border-bottom: 1px solid rgba(0, 0, 0, 0.1); vertical-align: top; }
.rules-table th { background: rgba(0, 0, 0, 0.05); }
.rules-table.fixed { table-layout: fixed; }
.rules-table.fixed td:first-child { width: 11rem; }
.steps li { margin-bottom: 0.45rem; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 0.7rem; }
.gcard { display: flex; gap: 0.7rem; padding: 0.55rem; border-radius: 12px; background: #fffaf0; box-shadow: inset 0 0 0 2px var(--parchment-2); font-size: 0.86rem; }
.gcard img { width: 96px; height: 96px; border-radius: 12px; object-fit: contain; background: var(--bc, #fff); flex: none; }
.gcard.v img, .gcard.c img { object-fit: contain; background: #fff; }
.gcard p { margin: 0.25rem 0; line-height: 1.3; }
.g-cost { font-weight: 600; color: #5a4630; font-size: 0.8rem; }

/* ---------- animations ---------- */
@keyframes sway { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes smoke { 0% { opacity: 0; transform: translate(0, 0) scale(0.5); } 20% { opacity: 0.85; } 100% { opacity: 0; transform: translate(6px, -26px) scale(1.8); } }
@keyframes wave { 0%, 100% { transform: skewY(0) scaleX(1); } 50% { transform: skewY(8deg) scaleX(0.86); } }
@keyframes shimmer { 0%, 100% { opacity: 0; } 50% { opacity: 0.8; } }
@keyframes canPulse { 0%, 100% { stroke-opacity: 0.35; } 50% { stroke-opacity: 1; } }
@keyframes pieceDrop { 0% { opacity: 0; transform: translateY(-30px) scale(1.4); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes fenceIn { from { opacity: 0; transform: scale(0.2); } to { opacity: 1; transform: none; } }
@keyframes prowl { 0%, 100% { transform: translateX(0) rotate(0); } 25% { transform: translateX(-3px) rotate(-3deg); } 75% { transform: translateX(3px) rotate(3deg); } }
@keyframes swoopIdle { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-8px, 6px); } }
@keyframes nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } }
@keyframes fall { to { transform: translateY(115vh) translateX(40px) rotate(540deg); } }
@keyframes drift { 0% { transform: translateY(0) translateX(0); opacity: 0; } 20% { opacity: 0.8; } 100% { transform: translateY(-110vh) translateX(-30px); opacity: 0; } }
@keyframes kenBurns { from { transform: scale(1); } to { transform: scale(1.08) translate(-1%, 1%); } }
@keyframes glowPip { 0%, 100% { box-shadow: 0 0 0 2px var(--gold); } 50% { box-shadow: 0 0 0 4px rgba(242, 193, 78, 0.5), 0 0 14px rgba(242, 193, 78, 0.7); } }
@keyframes bannerIn { from { transform: translateX(-10px); opacity: 0.3; } to { transform: none; opacity: 1; } }
@keyframes dot { 0%, 100% { opacity: 0.3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }
@keyframes rise { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes dealIn { from { opacity: 0; transform: translateY(10px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeOut { to { opacity: 0; } }
@keyframes pulseTag { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
@keyframes flash { 0%, 100% { box-shadow: 0 0 0 3px #6b4a2a, 0 0 0 5px #3e2a16, 0 10px 24px rgba(0, 0, 0, 0.4); } 40% { box-shadow: 0 0 0 4px var(--gold), 0 0 0 8px rgba(242, 193, 78, 0.5), 0 0 40px rgba(242, 193, 78, 0.6); } }
@keyframes logIn { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
@keyframes charge { 0% { opacity: 0; transform: translateX(-260px) scale(0.6); } 70% { opacity: 1; transform: translateX(14px) scale(1.08); } 100% { transform: none; } }
@keyframes swoop { 0% { opacity: 0; transform: translate(260px, -160px) scale(0.5) rotate(25deg); } 70% { opacity: 1; transform: translate(-10px, 8px) scale(1.08) rotate(-4deg); } 100% { transform: none; } }
@keyframes shake { 0%, 100% { transform: translate(0, 0); } 20% { transform: translate(-6px, 2px); } 40% { transform: translate(6px, -2px); } 60% { transform: translate(-4px, 1px); } 80% { transform: translate(4px, -1px); } }
@keyframes stamp { 0% { opacity: 0; transform: scale(2.6) rotate(-12deg); } 60% { opacity: 1; transform: scale(0.94) rotate(-3deg); } 100% { transform: rotate(-4deg); } }
@keyframes titleIn { 0% { opacity: 0; transform: scale(2.2) rotate(-8deg); } 60% { opacity: 1; transform: scale(0.95); } 100% { transform: none; } }
@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.25); } 100% { transform: scale(1); } }
@keyframes twinkle { 0%, 100% { opacity: 0.2; } 50% { opacity: 1; } }
@keyframes bannerSweep { from { opacity: 0; transform: translateX(-80px) rotate(-3deg) scale(0.9); } to { opacity: 1; transform: none; } }
@keyframes handoff { 0% { opacity: 0; transform: translate(-50%, -30%) scale(0.8); } 20%, 75% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -70%); } }
@keyframes toastIn { from { opacity: 0; transform: translateY(14px) scale(0.92); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateY(8px); } }
@keyframes rvGlow { 0%, 100% { box-shadow: 0 0 0 5px #ffd24d, 0 0 30px rgba(255, 210, 77, 0.45); } 50% { box-shadow: 0 0 0 7px #ffe08a, 0 0 60px rgba(255, 210, 77, 0.8); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .particles, .hero-particles { display: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .layout { grid-template-columns: 1fr; }
  .threats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .threats-head { grid-column: 1 / -1; flex-direction: row; align-items: baseline; gap: 0.8rem; }
  .threats-head .muted { max-width: none; }
  #svg { max-height: 64vh; }
  .lower { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .topbar { grid-template-columns: 1fr auto; padding: 0.6rem 0.8rem; position: static; }
  .top-mid { grid-column: 1 / -1; grid-row: 2; }
  .brand h1 { font-size: 1.25rem; }
  .brand-logo { width: 38px; height: 38px; }
  .top-actions .btn { padding: 0.35rem 0.55rem; }
  .top-actions { flex-wrap: wrap; justify-content: flex-end; gap: 0.35rem; }
  .pip { width: 22px; height: 22px; font-size: 0.75rem; }
  .threats { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 82%; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0.8rem 0.8rem 0.4rem; }
  .threats-head { display: none; }
  .threat { scroll-snap-align: start; }
  .layout { padding: 0.8rem 0.5rem; }
  #svg { max-height: none; }
  #row { margin: 0 0.8rem 1rem; }
  .lower { padding: 0 0.8rem 2rem; }
  .vrow { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 46%; overflow-x: auto; padding: 0.6rem 0.2rem 0.3rem; }
  .acts-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .names { grid-template-columns: 1fr; }
  .dcols { grid-template-columns: 1fr; }
  .binfo { flex-direction: column; align-items: center; text-align: center; }
  .binfo .pchips { justify-content: center; }
  .modal { padding: 1.1rem 1rem; }
  .rules-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .rules-tab { flex: 0 0 auto; }
  .gallery { grid-template-columns: 1fr; }
}

/* ---------- locations (worker placement) ---------- */
.locs { max-width: 1400px; margin: 0.9rem 1.2rem 0; }
@media (min-width: 1440px) { .locs { margin: 0.9rem auto 0; } }
.locs-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.9rem; margin-bottom: 0.6rem; }
.locs-head h3 { margin: 0; }
.loc-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.7rem; }
.loc { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); grid-template-rows: auto auto 1fr auto; column-gap: 0.6rem; align-items: start; text-align: left;
  font: inherit; color: var(--ink); padding: 0.55rem 0.6rem 0.6rem; border-radius: 14px; border: 0; cursor: default;
  background: #fffaf0; box-shadow: inset 0 0 0 2px #d9c08a, 0 3px 0 #c9ad74; transition: transform 0.15s var(--pop, ease), box-shadow 0.15s; }
.loc.open { cursor: pointer; box-shadow: inset 0 0 0 2px var(--gold), 0 3px 0 var(--gold-dark), 0 0 16px rgba(242, 193, 78, 0.45); }
.loc.open:hover { transform: translateY(-3px); }
.loc.taken { background: #efe4cb; }
.loc.taken .loc-art, .loc.taken .loc-text { opacity: 0.55; }
.loc-grp { grid-column: 1 / -1; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin-bottom: 0.25rem; }
.loc-art { grid-row: span 3; width: 64px; height: 64px; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 0 0 2px #e6d3a6; }
.loc-art img { width: 100%; height: 100%; object-fit: contain; display: block; }
.loc-name { font-size: 0.98rem; line-height: 1.15; }
.loc-text { font-size: 0.8rem; line-height: 1.3; }
.loc-now { grid-column: 1 / -1; margin-top: 0.35rem; font-size: 0.78rem; font-weight: 700; color: #2e6b25; background: #e5f3d6; border-radius: 8px; padding: 0.15rem 0.45rem; justify-self: start; }
.meeple { position: absolute; top: -0.7rem; right: -0.4rem; width: 2.2rem; height: 2.2rem; border-radius: 50%; display: grid; place-items: center; font-size: 1.25rem;
  background: var(--pc); box-shadow: 0 0 0 3px #fff, 0 4px 8px rgba(0, 0, 0, 0.35); animation: meepleDrop 0.45s cubic-bezier(.34, 1.56, .64, 1) both; }
@keyframes meepleDrop { from { transform: translateY(-30px) scale(0.6); opacity: 0; } to { transform: none; opacity: 1; } }
.open-head { margin: 0.8rem 0 0.45rem; }
.open-head h4 { margin: 0; font-size: 0.92rem; }
.loc-row.extra { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: calc(33.3% + 0.2rem); }
.loc.mini { grid-template-columns: 40px minmax(0, 1fr); grid-template-rows: auto auto; padding: 0.4rem 0.55rem; background: #f6eedb; }
.loc.mini .loc-art { grid-row: span 2; width: 40px; height: 40px; border-radius: 9px; }
.loc.mini .loc-name { font-size: 0.88rem; }
.crowd { position: absolute; top: -0.55rem; right: -0.3rem; display: flex; }
.crowd i { width: 1.7rem; height: 1.7rem; margin-left: -0.45rem; border-radius: 50%; display: grid; place-items: center; font-size: 0.95rem; font-style: normal;
  background: var(--pc); box-shadow: 0 0 0 2px #fff, 0 3px 6px rgba(0, 0, 0, 0.3); animation: meepleDrop 0.45s cubic-bezier(.34, 1.56, .64, 1) both; }
.who small { opacity: 0.75; font-weight: 600; }
.end-btn { width: 100%; margin-top: 0.4rem; }
.end-btn small { font-weight: 600; opacity: 0.8; }
.hidden-score { opacity: 0.75; }
@media (max-width: 1100px) { .loc-row { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } .loc-row.extra { max-width: none; } }
@media (max-width: 560px) { .locs { margin: 0.8rem 0.6rem 0; } .loc-row { grid-template-columns: 1fr; } .loc-row.extra { grid-template-columns: 1fr 1fr; } }

/* ---------- final reveal ---------- */
.hh-reveal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 1.2rem; overflow-y: auto; cursor: pointer;
  background: radial-gradient(circle at 50% 35%, #2b3b55, #0b111b 75%); color: #fff6e2; animation: fadeIn 0.4s ease both; }
.hh-reveal.decided { cursor: default; }
.hr-rays { position: absolute; inset: -50%; pointer-events: none; opacity: 0; transition: opacity 0.8s ease;
  background: repeating-conic-gradient(from 0deg, rgba(255, 214, 102, 0.12) 0 10deg, transparent 10deg 20deg); }
.hh-reveal.announced .hr-rays { opacity: 1; animation: hrSpin 30s linear infinite; }
@keyframes hrSpin { to { transform: rotate(360deg); } }
.hr-stage { position: relative; width: min(680px, 100%); display: grid; gap: 1rem; justify-items: center; text-align: center; }
.hr-title { font-family: "Lilita One", Georgia, serif; font-size: clamp(1.8rem, 5vw, 2.6rem); color: #ffe08a; text-shadow: 0 4px 0 rgba(0, 0, 0, 0.5); animation: hrDrop 0.7s cubic-bezier(.34, 1.56, .64, 1) both; }
@keyframes hrDrop { from { transform: translateY(-40px); opacity: 0; } to { transform: none; opacity: 1; } }
.hr-duel { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 0.8rem; align-items: center; width: 100%; margin-top: 0.8rem; }
.hr-side { position: relative; display: grid; justify-items: center; gap: 0.35rem; padding: 1rem 0.6rem; border-radius: 18px; background: rgba(255, 246, 226, 0.08);
  box-shadow: 0 0 0 3px var(--pc); transition: transform 0.5s ease, filter 0.5s ease, box-shadow 0.5s ease; }
.hr-side img { width: clamp(72px, 16vw, 110px); height: clamp(72px, 16vw, 110px); border-radius: 20px; object-fit: contain; background: #fff; box-shadow: 0 0 0 4px var(--pc); }
.hr-name { font-weight: 700; font-size: 1.15rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hr-total { font-family: "Lilita One", Georgia, serif; font-size: clamp(2.4rem, 8vw, 3.4rem); line-height: 1; min-width: 2ch; text-shadow: 0 4px 0 rgba(0, 0, 0, 0.5); }
.hr-crown { position: absolute; top: -1.8rem; font-size: 2.4rem; opacity: 0; }
.hr-vs { font-family: "Lilita One", Georgia, serif; font-size: 1.8rem; color: #ff8a65; text-shadow: 0 3px 0 rgba(0, 0, 0, 0.6); }
.hh-reveal.suspense .hr-side { animation: hrShake 0.35s ease-in-out infinite; }
@keyframes hrShake { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-2deg); } 75% { transform: rotate(2deg); } }
.hh-reveal.announced .hr-side { animation: none; }
.hr-side.win { transform: scale(1.08); box-shadow: 0 0 0 4px #ffd24d, 0 0 50px rgba(255, 210, 77, 0.6); }
.hr-side.win .hr-total { color: #ffd24d; }
.hr-side.win .hr-crown, .hr-side.tie .hr-crown { animation: hrCrown 0.7s cubic-bezier(.34, 1.56, .64, 1) 0.2s both; }
@keyframes hrCrown { from { opacity: 0; transform: translateY(-50px) rotate(-20deg); } to { opacity: 1; transform: none; } }
.hr-side.lose { transform: scale(0.9); filter: grayscale(0.7) brightness(0.75); }
.hr-verdict { min-height: 4.4rem; display: grid; place-items: center; }
.hr-drum { font-family: "Lilita One", Georgia, serif; font-size: clamp(1.3rem, 4vw, 1.8rem); color: #ffe08a; }
.hr-drum i { font-style: normal; display: inline-block; animation: hrDot 0.9s ease-in-out infinite; }
.hr-drum i:nth-child(2) { animation-delay: 0.15s; }
.hr-drum i:nth-child(3) { animation-delay: 0.3s; }
@keyframes hrDot { 50% { transform: translateY(-6px); } }
.hr-head { font-family: "Lilita One", Georgia, serif; font-size: clamp(2rem, 7vw, 3.2rem); line-height: 1.1; color: #ffd24d; text-shadow: 0 4px 0 #6b3f0a, 0 0 30px rgba(255, 210, 77, 0.55); animation: hrDrop 0.6s cubic-bezier(.34, 1.56, .64, 1) both; }
.hr-sub { opacity: 0; transition: opacity 0.5s ease; }
.hh-reveal.announced .hr-sub { opacity: 0.9; }
.hr-rows { display: grid; gap: 0.35rem; width: min(500px, 100%); }
.hr-row { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) 3.5rem; align-items: center; gap: 0.5rem; padding: 0.35rem 0.6rem; border-radius: 12px; background: rgba(255, 246, 226, 0.08);
  opacity: 0; transform: translateY(10px); transition: opacity 0.35s ease, transform 0.45s ease; }
.hr-row.in { opacity: 1; transform: none; }
.hr-row small { color: rgba(255, 246, 226, 0.75); font-size: 0.9rem; }
.hr-row span { font-weight: 700; font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.hr-row span.lead { color: #ffd24d; }
.hr-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; opacity: 0; pointer-events: none; transition: opacity 0.4s ease 0.5s; }
.hh-reveal.decided .hr-actions { opacity: 1; pointer-events: auto; }
.hr-skip { position: fixed; right: 16px; bottom: 16px; background: rgba(255, 246, 226, 0.12); color: #fff6e2; border: 1px solid rgba(255, 246, 226, 0.3); border-radius: 999px; padding: 0.4rem 0.9rem; font-weight: 600; cursor: pointer; }
.hh-reveal.decided .hr-skip { display: none; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ---------- game history ---------- */
.hist .hist-kind { margin-bottom: 0.9rem; }
.hist-stats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.5rem; margin-bottom: 1rem; }
.hist-stats .hs { text-align: center; padding: 0.55rem 0.3rem; border-radius: 12px; background: #fffdf6; box-shadow: inset 0 0 0 2px var(--parchment-2); }
.hist-stats .hs b { display: block; font-size: 1.35rem; line-height: 1.1; }
.hist-stats .hs small { color: #6d5838; font-size: 0.78rem; }
.hist-list { display: grid; gap: 0.45rem; }
.hg { border-radius: 12px; background: #fffdf6; box-shadow: inset 0 0 0 2px var(--parchment-2); }
.hg summary { display: flex; align-items: center; gap: 0.7rem; padding: 0.6rem 0.8rem; cursor: pointer; list-style: none; }
.hg summary::-webkit-details-marker { display: none; }
.hg-icon { font-size: 1.4rem; }
.hg-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.hg-main b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hg-main small { color: #6d5838; }
.hg-res { flex: none; padding: 0.2rem 0.6rem; border-radius: 999px; font-weight: 700; font-size: 0.82rem; background: #efe2c2; }
.hg-res.win { background: #cfeec0; color: #1f5b12; }
.hg-res.loss { background: #f6d0c8; color: #7a1f12; }
.hg-res.tie { background: #e6e0f5; color: #3d2f6b; }
.hg-table { display: grid; gap: 0.15rem; margin: 0 0.8rem 0.8rem; padding-top: 0.5rem; border-top: 1px solid var(--parchment-2); font-size: 0.9rem; }
.hg-table div { display: grid; grid-template-columns: 3rem 1fr 3rem; align-items: center; text-align: center; }
.hg-table span { font-weight: 700; }
.hg-table small { color: #5a4630; }
.hg-main em { font-style: normal; color: #8a5a00; }
.hist-note { margin: 0.8rem 0 0; font-size: 0.85rem; text-align: center; }
.hist-empty { text-align: center; padding: 1rem 0; }
@media (max-width: 560px) { .hist-stats { grid-template-columns: repeat(3, 1fr); } }

/* ---------- online quick / long games ---------- */
.ol-new .seg.ol-mode { margin: 0; }
.seg.ol-mode button { display: flex; flex-direction: column; align-items: center; gap: 0.1rem; flex: 1 1 12rem; }
.seg.ol-mode small { font-weight: 400; font-size: 0.78rem; opacity: 0.8; }
.ol-clock { display: inline-block; margin-left: 0.5rem; padding: 0.1rem 0.55rem; border-radius: 999px; background: rgba(255, 255, 255, 0.85); color: #3b2a14; font-weight: 700; font-variant-numeric: tabular-nums; }
.ol-clock.mine { box-shadow: 0 0 0 2px var(--gold); }
.ol-clock.low { background: #ffe1dc; color: #a3241a; animation: clockPulse 1s ease-in-out infinite; }
@keyframes clockPulse { 50% { transform: scale(1.08); } }

/* ---------- rules v3: hidden threats, events, goals, frost, wages ---------- */
.threat.unknown { background: linear-gradient(180deg, #d9cdb4, #c4b38f); }
.th-art .th-q { display: grid; place-items: center; width: 100%; height: 100%; font-family: "Lilita One", sans-serif; font-size: 2.6rem; color: #6b4a2a; background: repeating-linear-gradient(45deg, #efe3c8 0 8px, #e4d4b0 8px 16px); }
.th-def.maybe { color: #a2621a; }
.threats-head .th-hint { font-size: 0.72rem; margin-top: 0.35rem; }
.dstep.s4 { animation-delay: 2.9s; } .dstep.s5 { animation-delay: 3.3s; }
.cover-tag { font-size: 9px; font-weight: 700; text-anchor: middle; fill: #3e2a16; paint-order: stroke; stroke: #fff8e6; stroke-width: 3px; pointer-events: none; }
.vstats small.warn { color: #a2621a; font-weight: 700; }

.event-panel { border-left: 5px solid #8d6e63; }
.event-panel.pending { border-left-color: var(--gold); box-shadow: 0 0 0 3px rgba(242, 193, 78, 0.55), 0 8px 18px rgba(0, 0, 0, 0.25); animation: evPulse 2.4s ease-in-out infinite; }
@keyframes evPulse { 50% { box-shadow: 0 0 0 5px rgba(242, 193, 78, 0.25), 0 8px 18px rgba(0, 0, 0, 0.25); } }
.ev-head { display: flex; align-items: center; gap: 0.6rem; }
.ev-head h3 { margin: 0; }
.ev-head small { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.7rem; color: #7a4a1e; font-weight: 700; }
.ev-icon { font-size: 2rem; line-height: 1; }
.ev-text { margin: 0.4rem 0 0.5rem; font-size: 0.9rem; }
.ev-opts { display: grid; gap: 0.4rem; }
.ev-opt { display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 0.1rem; padding: 0.5rem 0.7rem; border-radius: 10px; border: 0; font: inherit; color: var(--ink); background: #fff8e6; box-shadow: inset 0 0 0 2px var(--parchment-2); }
button.ev-opt { cursor: pointer; }
button.ev-opt:hover:not(:disabled) { background: #fff1c9; box-shadow: inset 0 0 0 2px var(--gold); }
.ev-opt:disabled { opacity: 0.55; cursor: not-allowed; }
.ev-opt.picked { box-shadow: inset 0 0 0 2px var(--good); background: #eef7e8; }
.ev-opt small { font-size: 0.8rem; color: #5a4630; }
.ev-opt em { color: var(--bad); font-style: normal; }

.goals-panel h3 .muted { display: block; font-size: 0.72rem; font-weight: 500; margin-top: 0.15rem; }
.goal-list { list-style: none; margin: 0.4rem 0 0; padding: 0; display: grid; gap: 0.4rem; }
.goal-list li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.55rem; padding: 0.4rem 0.55rem; border-radius: 10px; background: rgba(255, 255, 255, 0.45); }
.gl-ic { font-size: 1.4rem; }
.goal-list b { display: block; font-size: 0.9rem; }
.goal-list small { font-size: 0.76rem; color: #5a4630; }
.gl-vals { display: flex; gap: 0.25rem; }
.gl-vals i { font-style: normal; min-width: 1.7rem; text-align: center; font-weight: 700; padding: 0.1rem 0.3rem; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 2px var(--pc); }
.gl-vals i.lead { background: var(--pc); color: #fff; }
.gcard.ev { align-items: flex-start; }
.gcard.ev ul { margin: 0.3rem 0 0; padding-left: 1.1rem; font-size: 0.85rem; }
.goal-past { display: flex; flex-wrap: wrap; gap: 0.3rem 0.9rem; margin-top: 0.5rem; font-size: 0.82rem; color: var(--ink-2, #5a4630); }
.goal-past i { font-style: normal; margin-left: 0.3rem; padding: 0 0.35rem; border-radius: 999px; box-shadow: inset 0 0 0 2px var(--pc); }
.dusk-goals { margin: 0.8rem 0 0; padding: 0.6rem 0.8rem; border-radius: 12px; background: rgba(255, 248, 230, 0.92); color: #2b1d0e; }
.dusk-goals h3 { margin: 0 0 0.4rem; font-size: 1rem; }
.dusk-goals ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; }
.dusk-goals li { display: grid; grid-template-columns: 1fr auto 9rem; align-items: center; gap: 0.6rem; font-size: 0.9rem; }
.dusk-goals .dg-win { font-weight: 600; text-align: right; }
@media (max-width: 560px) { .dusk-goals li { grid-template-columns: 1fr auto; } .dusk-goals .dg-win { grid-column: 1 / -1; text-align: left; } }
.builders { margin: 0 0 0.8rem; padding: 0.6rem 0.75rem; border-radius: 12px; background: rgba(255, 250, 240, 0.9); box-shadow: inset 0 0 0 2px var(--parchment-2); }
.builders .muted { font-size: 0.85rem; }
.bchips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.45rem; }
.bchip { border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.2rem 0.65rem 0.2rem 0.2rem; border-radius: 999px; background: #fffaf0; color: var(--ink); box-shadow: inset 0 0 0 2px var(--parchment-2); text-align: left; font: inherit; }
.bchip img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.bchip span { display: flex; flex-direction: column; line-height: 1.15; }
.bchip small { color: var(--ink-2, #6b5a44); font-size: 0.75rem; }
.bchip.on { box-shadow: inset 0 0 0 3px var(--gold, #f2c14e); background: #fff3c4; }
.bchip:disabled { opacity: 0.45; cursor: not-allowed; }
.pchip.busy { background: repeating-linear-gradient(135deg, #fff3cd 0 8px, #ffe8a3 8px 16px); box-shadow: inset 0 0 0 2px #e0a100; }
.pchip.busy img { filter: grayscale(0.4); opacity: 0.8; }
.pchip .away-note { display: block; color: #8a5a00; font-weight: 700; }
.pchip .usual { display: block; color: var(--muted, #7a6a58); }
.pchip.waiting { box-shadow: inset 0 0 0 2px #ffb300; }
.pchip .wait-note { color: #8a5a00; font-weight: 700; }
.away image { opacity: 0.45; filter: grayscale(0.8); }
.away .slot { stroke-dasharray: 3 2; stroke: #ffb300; }
.away-badge { fill: #3e2723; stroke: #ffb300; stroke-width: 1.5; }
.away-ico { font-size: 8px; text-anchor: middle; pointer-events: none; }
.site-builder { pointer-events: none; }
.site-builder .away-ico { font-size: 9px; }