:root {
  --ink: #2b2015; --parch: #e9dab4; --parch2: #dcc794; --dark: #171208;
  --blood: #8c2f1b; --gold: #b98a2f;
}
* { box-sizing: border-box; }
body { margin: 0; background: #100c07 url('map.jpg') center/cover fixed; font-family: "IM Fell English", Georgia, serif; color: var(--ink); }
body::before { content: ""; position: fixed; inset: 0; background: rgba(10, 7, 3, .78); z-index: -1; }
.fell-sc { font-family: "IM Fell English SC", "IM Fell English", serif; }
.panel { border-radius: 6px; padding: 16px 18px; margin: 14px; box-shadow: 0 6px 30px rgba(0,0,0,.6); }
.parchment { background: linear-gradient(160deg, var(--parch), var(--parch2)); border: 1px solid #8a6f3c; }
.dark { background: rgba(23, 18, 8, .92); color: #e8dcbb; border: 1px solid #57451f; }
.center { max-width: 520px; margin: 6vh auto; text-align: center; }
h1 { font-size: 52px; margin: 4px 0; letter-spacing: 2px; }
h2 { margin-top: 0; } h3 { margin: 14px 0 6px; }
.sub { font-style: italic; margin-top: 0; }
.fine { font-size: 13px; opacity: .8; }
.err { color: var(--blood); min-height: 1em; font-weight: bold; }
label { display: block; margin: 12px 0; }
input, select, textarea { font-family: inherit; font-size: 16px; padding: 7px 9px; border: 1px solid #8a6f3c; border-radius: 4px; background: #f6ecd2; color: var(--ink); }
input.code { text-transform: uppercase; width: 130px; text-align: center; letter-spacing: 3px; }
.code-display { font-size: 22px; letter-spacing: 4px; background: #2b2015; color: #f3e5bd; padding: 2px 10px; border-radius: 4px; }
.btn { font-family: "IM Fell English SC", serif; font-size: 16px; background: #3a2c17; color: #f3e5bd; border: 1px solid var(--gold); border-radius: 5px; padding: 8px 14px; cursor: pointer; margin: 3px; }
.btn:hover:not(:disabled) { background: #57431f; }
.btn:disabled { opacity: .45; cursor: default; }
.btn.big { font-size: 19px; padding: 10px 20px; }
.btn.small { font-size: 13px; padding: 4px 9px; }
.btn.danger { background: #5d1f10; border-color: #a34a2a; }
.row { margin: 12px 0; display: flex; gap: 8px; justify-content: center; align-items: center; flex-wrap: wrap; }
.colors { display: flex; gap: 8px; justify-content: center; margin: 10px 0; flex-wrap: wrap; }
.swatch { width: 40px; height: 40px; border-radius: 8px; border: 3px solid transparent; cursor: pointer; font-size: 20px; display: flex; align-items: center; justify-content: center; }
.swatch.sel { border-color: #fff; outline: 2px solid var(--ink); }
#classGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.classCard { border: 1px solid #8a6f3c; border-radius: 5px; padding: 8px 10px; background: rgba(255,250,235,.5); cursor: pointer; }
.classCard.sel { outline: 3px solid var(--blood); background: rgba(255,250,235,.9); }
.classCard b { font-family: "IM Fell English SC", serif; font-size: 17px; }
.classCard .stats { font-size: 13px; }
.lobbyP { padding: 6px 10px; border-bottom: 1px dashed #8a6f3c; }
#shopGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 8px; }
.shopItem { border: 1px solid #8a6f3c; border-radius: 5px; padding: 8px 10px; background: rgba(255,250,235,.55); font-size: 14px; }
.shopItem b { font-family: "IM Fell English SC", serif; }
.handrow { display: flex; gap: 8px; flex-wrap: wrap; }
.itemCard { width: 148px; border: 1px solid #8a6f3c; border-radius: 5px; background: #f6ecd2; padding: 7px 8px; font-size: 13px; }
.itemCard b { display: block; font-family: "IM Fell English SC", serif; font-size: 15px; }
.itemCard img { width: 100%; border-radius: 3px; display: block; margin-bottom: 4px; }
#topbar { display: flex; gap: 18px; align-items: baseline; padding: 10px 18px; color: #f3e5bd; }
#topbar .title { font-size: 26px; }
.clock { font-size: 22px; color: #ffd98a; }
#gameGrid { display: grid; grid-template-columns: minmax(320px, 5fr) minmax(340px, 5fr) minmax(300px, 4fr); gap: 0; align-items: start; }
@media (max-width: 1100px) { #gameGrid { grid-template-columns: 1fr; } }
#mapWrap { position: relative; }
#mapImg { width: 100%; border-radius: 4px; display: block; }
.areaNode { position: absolute; transform: translate(-50%, -50%); background: rgba(23,18,8,.85); color: #f3e5bd; border: 1px solid var(--gold); border-radius: 14px; padding: 3px 9px; font-size: 13px; cursor: pointer; white-space: nowrap; }
.areaNode.here { background: var(--blood); }
.areaNode .tok { display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-left: 4px; border: 1px solid #000; vertical-align: middle; }
#areaDetail { font-size: 14px; margin-top: 8px; }
#mySheet .statline { font-size: 15px; }
.bar { height: 12px; background: #4c3a1e; border-radius: 6px; overflow: hidden; margin: 3px 0 7px; }
.bar > div { height: 100%; background: linear-gradient(90deg, #a33d1d, #c96a2c); }
.bar.corr > div { background: linear-gradient(90deg, #4a2d5e, #7a4a9e); }
#actionBar { margin-top: 10px; border-top: 1px dashed #8a6f3c; padding-top: 10px; }
#log { height: 300px; overflow-y: auto; font-size: 13.5px; line-height: 1.45; padding-right: 4px; }
#log div { margin-bottom: 4px; }
#radioFeed { max-height: 140px; overflow-y: auto; font-size: 13.5px; margin-bottom: 6px; }
#radioFeed .rmsg { background: rgba(185, 138, 47, .16); border-left: 3px solid var(--gold); padding: 4px 7px; margin-bottom: 4px; border-radius: 3px; }
.playerChip { border: 1px solid #57451f; border-radius: 5px; padding: 6px 9px; margin-bottom: 6px; font-size: 14px; background: rgba(255,255,255,.04); }
.dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 1px solid #000; vertical-align: middle; margin-right: 5px; }
#modal { position: fixed; inset: 0; background: rgba(5, 3, 1, .72); display: flex; align-items: center; justify-content: center; z-index: 50; }
#modalCard { max-width: 430px; width: 92vw; max-height: 88vh; overflow-y: auto; border-radius: 8px; padding: 18px; text-align: center; box-shadow: 0 10px 50px #000; }
#modalCard img { width: 100%; border-radius: 5px; }
#modalCard h2 { font-family: "IM Fell English SC", serif; margin: 8px 0 2px; }
#choiceBar { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); background: #241a0c; color: #f3e5bd; border: 1px solid var(--gold); border-radius: 8px; padding: 12px 16px; z-index: 60; max-width: 94vw; text-align: center; box-shadow: 0 10px 40px #000; }
#choiceBar .btn { margin: 4px; }
select { max-width: 100%; }
textarea { width: 100%; }
.kbd { font-size: 12px; opacity: .75; }
.route { border: 1px dashed #8a6f3c; border-radius: 5px; padding: 6px 9px; margin: 6px 0; font-size: 14px; background: rgba(255,250,235,.4); }
.route.taken { opacity: .45; text-decoration: line-through; }
.route .req { font-size: 12.5px; }

/* ============ THE PARK WEBSITE (the disguise) ============ */
#siteView { background: #f2e8d5; color: #26331f; min-height: 100vh; }
#parkHead { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px;
  background: #1f3d2b; color: #f2e8d5; padding: 10px 18px; box-shadow: 0 3px 12px rgba(0,0,0,.4); flex-wrap: wrap; }
#parkHead .badge { font-size: 26px; background: #f2e8d5; border-radius: 50%; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; }
#parkHead .badge.big { width: 84px; height: 84px; font-size: 46px; margin: 0 auto 10px; }
.parkTitle { font-family: "IM Fell English SC", serif; font-size: 21px; letter-spacing: 2px; line-height: 1; }
.parkTitle span { display: block; font-size: 11px; letter-spacing: 3px; opacity: .85; margin-top: 3px; }
#parkHead nav { margin-left: auto; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
#parkHead nav a { color: #f2e8d5; text-decoration: none; font-size: 15px; }
#parkHead nav a:hover { text-decoration: underline; }
.btn.checkin { background: #8c2f1b; border-color: #d8b25c; }
#hero { position: relative; max-height: 520px; overflow: hidden; }
#hero img { width: 100%; display: block; }
.heroText { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: rgba(15, 26, 18, .45); color: #f7efdb; text-align: center; padding: 20px; }
.heroText h1 { font-family: "IM Fell English SC", serif; font-size: clamp(44px, 9vw, 96px); letter-spacing: 6px; margin: 0; text-shadow: 0 4px 24px #000; color: #f7efdb; }
.tagline { font-size: clamp(20px, 3.4vw, 32px); font-style: italic; margin: 4px 0; }
.heroSub { max-width: 560px; font-size: 17px; }
.parkMain { max-width: 980px; margin: 0 auto; padding: 10px 22px 30px; }
.parkMain h2 { color: #1f3d2b; border-bottom: 2px solid #b98a2f; padding-bottom: 4px; margin-top: 34px; }
.parkMain p { font-size: 16.5px; line-height: 1.55; }
.sig { font-style: italic; }
.regionGrid, .actGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 12px; }
.region, .act { background: #fbf5e4; border: 1px solid #b7a678; border-left: 5px solid #1f3d2b; border-radius: 5px; padding: 10px 14px; }
.region h3, .act h3 { margin: 2px 0 5px; color: #1f3d2b; font-size: 17px; }
.region p, .act p { font-size: 14.5px; margin: 0; }
.rulesList, .rulesList { font-size: 16px; line-height: 1.6; }
.rulesList li, .rulesList li { margin-bottom: 7px; }
#parkFoot { background: #1f3d2b; color: #cfd8c6; text-align: center; padding: 18px; font-size: 14px; }
.invlink { font-size: 13.5px; background: #fff8e6; border: 1px dashed #8a6f3c; padding: 3px 8px; border-radius: 4px; word-break: break-all; }

/* ============ WAIVER ============ */
#waiver, #splash, #drive { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; background: rgba(8, 10, 6, .82); }
.waiverCard { max-width: 640px; width: 94vw; max-height: 92vh; overflow-y: auto; border-radius: 8px; padding: 22px 26px; }
.waiverText { font-size: 14.5px; line-height: 1.5; border: 1px solid #8a6f3c; background: rgba(255,252,240,.6); padding: 10px 14px; border-radius: 5px; }
#signName { font-style: italic; font-size: 19px; width: 100%; }

/* ============ SPLASH & DRIVE ============ */
#splash { background: radial-gradient(ellipse at center, #16281b 0%, #060a06 75%); }
.splashInner { text-align: center; color: #efe6c8; padding: 20px; }
.splashInner h1 { color: #efe6c8; font-size: clamp(34px, 6vw, 58px); margin: 6px 0; }
.splashHours { font-size: 21px; letter-spacing: 3px; color: #d8b25c; margin: 4px 0; }
.splashSlogan { font-style: italic; font-size: 18px; opacity: .92; margin: 14px 0 22px; }
#drive { background: #05070a; }
.driveInner { text-align: center; color: #d9e2ee; font-size: 19px; }
.driveInner .van { font-size: 54px; }
.driveInner .fell-sc { font-size: 24px; color: #ffd98a; }

/* Overlays must actually disappear: author display rules beat the UA
   [hidden] rule in some webviews, which stranded the drive overlay. */
[hidden] { display: none !important; }
#drive { cursor: pointer; }

/* ============ v3: splash, drive quotes ============ */
.splashTimes { font-size: 26px; letter-spacing: 5px; color: #d8b25c; margin: 0 0 6px; font-family: "IM Fell English SC", serif; }
.driveSaid { opacity: .75; font-size: 15px; margin-bottom: 2px; }
.driveQuote { font-style: italic; font-size: clamp(19px, 3.4vw, 26px); max-width: 620px; margin: 4px auto 16px; line-height: 1.45; }

/* ============ v3: the shop shelf ============ */
#moneyWrap { position: relative; display: inline-block; }
.floatSpend { position: absolute; left: 100%; top: -4px; margin-left: 6px; color: #a02318; font-weight: bold; font-size: 19px;
  animation: spendFloat 1.35s ease-out forwards; pointer-events: none; white-space: nowrap; }
@keyframes spendFloat { 0% { opacity: 0; transform: translateY(6px); } 15% { opacity: 1; } 100% { opacity: 0; transform: translateY(-26px); } }
.shelfRow { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; position: relative; padding-bottom: 16px; margin-bottom: 14px; }
.shelfPlank { position: absolute; left: -6px; right: -6px; bottom: 0; height: 10px; border-radius: 3px;
  background: linear-gradient(#8a5a2b, #6e4520); box-shadow: 0 4px 7px rgba(0,0,0,.35); }
.shelfItem { background: #fffaf0; border: 1px solid #b7a678; border-radius: 6px; padding: 9px 11px; text-align: center; }
.shelfItem .sIcon { font-size: 30px; }
.shelfItem .sPrice { font-weight: bold; font-size: 17px; color: #5c4512; }
.shelfItem .sStock { font-size: 12.5px; color: #6b5a34; }
.shelfItem.gone { opacity: .45; }
.shelfItem.cant .sPrice { color: #a02318; }
.cantTag { color: #a02318; font-weight: bold; font-size: 13.5px; margin-top: 4px; }
.swatch2 { cursor: pointer; padding: 4px; border-radius: 10px; border: 2px solid transparent; line-height: 0; }
.swatch2.sel { border-color: #d8b25c; background: rgba(216,178,92,.18); }
.lobbyP { display: flex; align-items: center; gap: 9px; margin: 5px 0; }

/* ============ v3: map stage & tokens ============ */
#gameView { display: flex; flex-direction: column; height: 100dvh; }
#initStrip { display: inline-flex; gap: 5px; align-items: center; flex-wrap: wrap; font-size: 12.5px; }
.initP { background: rgba(255,255,255,.09); padding: 2px 8px; border-radius: 20px; }
.initP.on { background: #d8b25c; color: #241a10; font-weight: bold; }
.initArrow { opacity: .6; }
#mapStage { position: relative; flex: 1; overflow: hidden; background: #0b1520; touch-action: none; }
#mapWorld { position: absolute; left: 0; top: 0; width: 100%; transform-origin: 0 0; }
#mapImg { width: 100%; display: block; }
#areaNodes, #tokenLayer { position: absolute; inset: 0; }
.areaNode { position: absolute; transform: translate(-50%, -50%); background: rgba(20, 26, 18, .82); color: #efe6c8;
  border: 1px solid #d8b25c88; border-radius: 20px; padding: 3px 10px; font-size: 13px; cursor: pointer; white-space: nowrap; z-index: 3; }
.areaNode.here { background: #d8b25c; color: #241a10; font-weight: bold; }
.areaNode.hop { border-color: #7ee787; box-shadow: 0 0 12px #7ee78799; animation: hopPulse 1.2s ease-in-out infinite; }
.areaNode .hopCost { color: #7ee787; font-weight: bold; }
@keyframes hopPulse { 50% { box-shadow: 0 0 20px #7ee787cc; } }
.token { position: absolute; z-index: 4; pointer-events: none; }
.tokOff { position: relative; transform-origin: center; text-align: center; pointer-events: auto; }
.tokenBtn { background: none; border: none; padding: 0; cursor: pointer; line-height: 0; filter: drop-shadow(0 3px 5px rgba(0,0,0,.55)); }
.token.turn .tokenBtn { filter: drop-shadow(0 0 9px #ffd94d) drop-shadow(0 3px 5px rgba(0,0,0,.5)); }
.token.sneak { opacity: .7; }
.token.gone .tokenBtn { filter: grayscale(1); opacity: .55; }
.pips { display: flex; gap: 5px; justify-content: center; margin-bottom: 1px; }
.pips i { width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid #d8b25c; background: transparent; display: block; }
.pips i.on { background: radial-gradient(circle at 35% 35%, #ffe9a8, #d8a920); box-shadow: 0 0 6px #d8b25c; }
.tname { font-size: 11.5px; color: #fff; text-shadow: 0 1px 4px #000, 0 0 8px #000; margin-top: 1px; white-space: nowrap; }
#zoomCtl { position: absolute; right: 12px; bottom: 12px; z-index: 8; display: flex; flex-direction: column; gap: 6px; }
#zoomCtl button { width: 40px; height: 40px; border-radius: 50%; border: 1px solid #d8b25c; background: rgba(20,26,18,.88); color: #efe6c8; font-size: 19px; cursor: pointer; }
#myChip { position: absolute; left: 12px; top: 12px; z-index: 8; display: flex; gap: 9px; align-items: center; cursor: pointer;
  background: rgba(20, 26, 18, .88); border: 1px solid #d8b25c88; border-radius: 12px; padding: 6px 12px 6px 8px; color: #efe6c8; }
.chipTxt { font-size: 12.5px; line-height: 1.35; }
.hpmini { height: 6px; background: #402820; border-radius: 3px; overflow: hidden; margin: 2px 0; }
.hpmini div { height: 100%; background: #b03a2e; }

/* ============ v3: radial wheel ============ */
#radial { position: absolute; z-index: 30; transform: translate(-50%, -50%); }
.radialMain { width: 0; height: 0; }
.radBtn { position: absolute; width: 76px; height: 76px; border-radius: 50%; border: 2px solid #d8b25c; cursor: pointer;
  background: rgba(24, 30, 20, .95); color: #efe6c8; font-size: 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  box-shadow: 0 6px 18px rgba(0,0,0,.5); }
.radBtn span { font-size: 11.5px; }
.radN { left: -38px; top: -118px; } .radS { left: -38px; top: 42px; }
.radE { left: 42px; top: -38px; } .radW { left: -118px; top: -38px; }
.radCenter { position: absolute; left: -34px; top: -34px; width: 68px; height: 68px; border-radius: 50%; cursor: pointer;
  border: 2px solid #8c2f1b; background: #f2e8d5; color: #5c1f10; font-weight: bold; font-size: 13px; box-shadow: 0 6px 18px rgba(0,0,0,.5); }
.radialList { width: 250px; max-height: 62vh; overflow-y: auto; border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 7px;
  box-shadow: 0 12px 34px rgba(0,0,0,.55); }
.radialList .btn { text-align: left; }

/* ============ v3: overlay cards & panels ============ */
.overlayCard { position: absolute; z-index: 25; background: #f2e8d5; color: #26331f; border: 1.5px solid #8a6f3c; border-radius: 10px;
  padding: 12px 14px; box-shadow: 0 12px 30px rgba(0,0,0,.5); max-width: min(430px, 92vw); }
#areaCard { left: 12px; bottom: 12px; }
#sheetCard { left: 12px; top: 64px; }
.overlayPanel { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 60; width: min(680px, 95vw);
  max-height: 88dvh; overflow-y: auto; background: #f2e8d5; color: #26331f; border: 2px solid #8a6f3c; border-radius: 12px;
  padding: 16px 18px; box-shadow: 0 24px 70px rgba(0,0,0,.65); }
.packTop { display: flex; align-items: center; gap: 12px; background: linear-gradient(#a4713a, #8a5a2b); color: #fff8e6;
  margin: -16px -18px 12px; padding: 12px 18px; border-radius: 10px 10px 0 0; }
.packTop .fine { color: #e8dcc0; }
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 9px; }
.slot { border: 1.5px solid #8a6f3c; border-radius: 8px; background: #fffaf0; padding: 8px; min-height: 118px; }
.slot.empty { border-style: dashed; background: rgba(0,0,0,.04); }
.slot img { width: 100%; height: 64px; object-fit: cover; border-radius: 4px; }
.slotIcon { font-size: 30px; text-align: center; }
.slotBtns { display: flex; gap: 5px; margin-top: 5px; flex-wrap: wrap; }
.giveRow { margin-top: 5px; }
#drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(400px, 94vw); z-index: 55; overflow-y: auto; box-shadow: -12px 0 34px rgba(0,0,0,.5); }
.drawerInner { min-height: 100%; border-radius: 0; }
#radioPanel label { display: block; margin: 7px 0; }
#radioPanel textarea, #radioPanel select { width: 100%; margin: 4px 0; }

/* ============ v3: dice ============ */
#diceOverlay { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; background: rgba(5, 8, 5, .45); }
#diceBox { text-align: center; color: #efe6c8; }
.diceWho { font-size: 17px; margin-bottom: 8px; text-shadow: 0 2px 8px #000; }
.d20 { width: 110px; height: 110px; margin: 0 auto; display: flex; align-items: center; justify-content: center;
  font-size: 44px; font-weight: bold; color: #241a10; background: linear-gradient(145deg, #ffe9a8, #d8a920);
  clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%); }
.d20.ok { background: linear-gradient(145deg, #b7f0b1, #3f9e3f); }
.d20.bad { background: linear-gradient(145deg, #f0b1a8, #b03a2e); color: #fff; }
.diceNeed { margin-top: 8px; font-size: 15px; }
.diceVerdict { font-size: 21px; font-weight: bold; margin-top: 3px; min-height: 26px; }
.diceVerdict .ok { color: #7ee787; } .diceVerdict .bad { color: #ff9a7a; }