/* A Jerm Odyssey — mini-games + small extras */
.game { padding: clamp(16px, 2.4vw, 24px); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 16px; background: linear-gradient(170deg, rgba(20, 17, 58, .86), rgba(10, 9, 32, .86)); backdrop-filter: blur(10px); box-shadow: 0 30px 70px -34px #000; }
.g-head { margin-bottom: 14px; }
.g-kick { display: block; font: 600 10.5px/1 var(--f-ui); letter-spacing: .2em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
.g-head h4 { font-size: 1.55rem; color: #fff3d0; }
.g-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 14px; }
.g-out { margin: 14px 0 0; min-height: 3.4em; font-size: .98rem; line-height: 1.45; color: #e7e0d2; }
.g-out b { color: var(--honey-hi); font-weight: 600; }
.linkbtn { background: none; border: 0; padding: 6px 4px; color: var(--muted); text-decoration: underline; font: 500 12px/1 var(--f-ui); letter-spacing: .06em; }
.linkbtn:hover { color: var(--honey-hi); }
.sealed-badge { display: inline-block; margin-left: 12px; padding: 5px 9px; border: 1px dashed var(--pooh); border-radius: 4px; color: #ff9c92; font: 600 10px/1 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; vertical-align: middle; }
@keyframes shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-8px); } 40% { transform: translateX(7px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(3px); } }
@keyframes throb { 50% { box-shadow: 0 0 60px 14px #4ade80; } }

/* orbs */
.orbs { position: relative; aspect-ratio: 1; max-width: 380px; margin: 0 auto; }
.orbs::before { content: ""; position: absolute; inset: 9%; border-radius: 50%; border: 1px dashed rgba(245, 184, 61, .3); }
.o-orb { position: absolute; width: 28%; transform: translate(-50%, -50%); padding: 0; border: 0; background: none; text-align: center; }
.o-orb img { width: 100%; aspect-ratio: 1; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255, 255, 255, .25); filter: grayscale(1) brightness(.5); transition: filter .6s, box-shadow .6s, transform .3s; background: #fff; }
.o-orb span { display: block; margin-top: 6px; font: 600 10.5px/1 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.o-orb:hover img { transform: scale(1.06); }
.o-orb.lit img { filter: none; border-color: var(--laser); box-shadow: 0 0 40px 6px rgba(69, 227, 208, .7); }
.o-orb.lit span { color: var(--laser); }
.o-core { position: absolute; left: 50%; top: 53%; width: 27%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; border: 2px solid rgba(255, 255, 255, .22); background: radial-gradient(circle at 35% 30%, #2b3a3a, #0d1616); color: var(--muted); font: 600 11px/1 var(--f-ui); letter-spacing: .22em; text-transform: uppercase; transition: box-shadow .4s, background .4s; }
.o-core.ready { background: radial-gradient(circle at 35% 30%, #d6ffe3, #22c55e 62%, #0b4d24); color: #04220f; border-color: #86efac; box-shadow: 0 0 40px 6px #4ade80; animation: throb 1.4s ease-in-out infinite; }
.orbs.bubble::after { content: ""; position: absolute; inset: -3%; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(74, 222, 128, .16), rgba(74, 222, 128, .05) 62%, transparent 64%); border: 2px solid rgba(74, 222, 128, .75); animation: bub 1.3s var(--ease) both; }
@keyframes bub { from { transform: scale(.2); opacity: 0; } }

/* hourglass */
.hg-row { display: flex; gap: 28px; align-items: flex-end; justify-content: center; margin-bottom: 4px; }
.mug { position: relative; width: 72px; height: 88px; border: 3px solid var(--honey); border-radius: 6px 6px 18px 18px; overflow: hidden; background: rgba(255, 255, 255, .04); }
.mug i { position: absolute; inset: auto 0 0 0; height: 100%; background: linear-gradient(#ffcf5a, #d98a1f); transition: height .08s linear; }
.hg { width: 84px; }

/* jar */
.jar-row { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 16px; align-items: start; }
.jar svg { width: 104px; }
.jar .w { animation: throb2 3s ease-in-out infinite; transform-origin: 60px 96px; }
.jar.talk .w2 { animation: talk .9s ease-out; }
@keyframes throb2 { 50% { transform: scale(1.14); opacity: .8; } }
@keyframes talk { 0% { r: 7; } 30% { r: 22; fill: #fff; } 100% { r: 7; } }
.jar-log { max-height: 250px; min-height: 120px; overflow: auto; display: grid; gap: 8px; align-content: start; padding-right: 4px; }
.jar-msg { margin: 0; padding: 10px 14px; border-radius: 12px 12px 12px 2px; background: rgba(181, 140, 255, .13); border: 1px solid rgba(181, 140, 255, .38); font-size: .95rem; line-height: 1.4; animation: rise .4s var(--ease); }
.jar-msg small { display: block; font: 600 10px/1 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; color: #cdb8ff; margin-bottom: 5px; }
.jar-msg.mic { background: rgba(69, 227, 208, .1); border-color: rgba(69, 227, 208, .4); border-radius: 12px 12px 2px 12px; }
.jar-msg.mic small { color: var(--laser); }
.jar-cnt { font: 600 12px/1 var(--f-ui); letter-spacing: .12em; color: var(--muted); font-variant-numeric: tabular-nums; }
@media (max-width: 480px) { .jar-row { grid-template-columns: 1fr; justify-items: center; } .jar-log { width: 100%; } }

/* braul + hands */
.brief { border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; background: rgba(255, 255, 255, .03); }
.brief h5 { font: 600 11px/1 var(--f-ui); letter-spacing: .2em; text-transform: uppercase; color: var(--accent); margin: 0 0 10px; }
.brief ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.brief li { font-size: .92rem; line-height: 1.35; color: #ddd6c8; }
.brief li b { display: inline-block; min-width: 5.4em; margin-right: 8px; font: 600 10.5px/1.4 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.hand-door { height: 68px; border-radius: 8px; border: 2px solid #5a4a3a; display: grid; place-items: center; margin-bottom: 12px; background: repeating-linear-gradient(90deg, #2b241d 0 24px, #342b23 24px 26px); font: 600 11px/1 var(--f-ui); letter-spacing: .24em; color: #c9b18a; transition: background .6s, color .6s; }
.hand-door.hot { background: linear-gradient(#ff7a3d, #7a1c06); color: #fff; }
.hand-door.open { background: linear-gradient(90deg, #0d2a1a, #15542f); color: #86efac; }
.hand-door.shake { animation: shake .5s; }
.hands { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.hbtn { padding: 10px 4px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255, 255, 255, .03); display: grid; gap: 6px; justify-items: center; color: var(--muted); font: 500 10.5px/1.25 var(--f-ui); text-align: center; transition: color .2s, border-color .2s, transform .2s; }
.hbtn svg { width: 40px; height: 48px; }
.hbtn:hover { color: var(--honey-hi); border-color: var(--honey); transform: translateY(-2px); }
.hands.done .hbtn { opacity: .35; pointer-events: none; }
@media (max-width: 420px) { .hands { grid-template-columns: repeat(2, 1fr); } }

/* range */
.targets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tgt { padding: 8px; border-radius: 12px; border: 2px solid transparent; background: rgba(255, 255, 255, .03); color: var(--text); display: grid; gap: 6px; justify-items: center; font: 600 12px/1 var(--f-ui); letter-spacing: .1em; transition: border-color .2s, box-shadow .2s; }
.tgt svg { width: 100%; max-width: 92px; }
.tgt .ck { opacity: 0; stroke-dasharray: 80; stroke-dashoffset: 80; }
.tgt.hit .ck { opacity: 1; stroke-dashoffset: 0; transition: stroke-dashoffset .5s; }
.tgt.sel { border-color: var(--laser); box-shadow: 0 0 26px -4px var(--laser); }
.tgt.hit { opacity: .8; }
.pips { display: flex; gap: 6px; margin: 12px 0 0; }
.pips i { width: 18px; height: 8px; border-radius: 3px; background: var(--laser); }
.pips i.used { background: rgba(255, 255, 255, .14); }

/* bazaar */
.wares { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.ware { padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, .03); display: flex; flex-direction: column; gap: 6px; }
.ware h5 { font: 600 14px/1.2 var(--f-ui); color: #fff3d0; letter-spacing: .03em; margin: 0; }
.ware p { flex: 1; margin: 0; font-size: .88rem; line-height: 1.35; color: var(--muted); }
.ware-f { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 4px; }
.pr { font: 600 1.05rem/1 var(--f-ui); color: var(--honey-hi); font-variant-numeric: tabular-nums; }
.pr.good { color: #86efac; } .pr.bad { color: #ff9c92; }
.was { color: var(--muted); font-size: .8rem; margin-right: 8px; }
.std summary { cursor: pointer; color: var(--honey-hi); font: 600 12px/1 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; margin: 14px 0 10px; }

/* gas */
.gas-stage { position: relative; --gas: 0; padding: 14px; border-radius: 12px; border: 1px solid var(--line); margin-bottom: 4px; overflow: hidden; transition: filter 1s, background .8s;
  background: radial-gradient(circle at 50% 130%, rgba(190, 205, 70, calc(var(--gas) * .55)), transparent 70%), rgba(0, 0, 0, .25); filter: hue-rotate(calc(var(--gas) * 130deg)); }
.gas-stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; backdrop-filter: blur(calc(var(--gas) * 1.8px)); }
.gas-stage.out { background: #000; filter: none; }
.gas-dots { display: flex; gap: 8px; margin-bottom: 12px; }
.gas-dots span { flex: 1; text-align: center; padding: 8px 4px; border-radius: 8px; border: 1px solid var(--line); font: 600 11px/1 var(--f-ui); letter-spacing: .1em; color: var(--muted); }
.gas-dots .ok { background: rgba(69, 227, 208, .18); border-color: var(--laser); color: #fff; }
.gas-dots .bad { background: rgba(229, 71, 59, .22); border-color: var(--pooh); color: #fff; }
.gas-log { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: .9rem; min-height: 2.6em; }
.gas-log li { padding-left: 12px; border-left: 2px solid var(--line); animation: rise .4s var(--ease); }

/* book */
.book { position: relative; aspect-ratio: 3 / 4; max-width: 340px; margin: 0 auto 16px; border-radius: 6px; overflow: hidden; background: #d8d3c8; border: 1px solid rgba(255, 255, 255, .2); box-shadow: 0 24px 56px -20px #000; touch-action: pan-y; --x: 50%; --y: 30%; cursor: none; }
.book img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; border-radius: 0; }
.beam { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle 118px at var(--x) var(--y), transparent 0, transparent 34%, rgba(4, 3, 12, .975) 100%); }
.bk-cap { position: absolute; left: 12px; top: 10px; z-index: 1; font: 600 10px/1 var(--f-ui); letter-spacing: .2em; color: #fff; mix-blend-mode: difference; }

/* disguise dice */
.dcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.dcard { padding: 12px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--hc) 55%, transparent); background: rgba(255, 255, 255, .03); display: grid; grid-template-columns: 50px 1fr; grid-template-areas: 'i n' 'i d' 's s'; gap: 2px 12px; align-items: center; }
.dcard img { grid-area: i; width: 50px; height: 50px; border-radius: 50%; border: 2px solid var(--hc); object-fit: cover; }
.dcard b { grid-area: n; font: 600 13px/1 var(--f-ui); letter-spacing: .06em; }
.die { grid-area: d; font: 600 1.9rem/1 var(--f-ui); color: #fff3d0; font-variant-numeric: tabular-nums; }
.die.roll { animation: wob .22s infinite; }
.die.nat20 { color: #ffd36a; text-shadow: 0 0 22px #ffb300; animation: pop .7s var(--ease); }
.die.nat1 { color: #ff9c92; }
.dc-sub { grid-area: s; margin: 8px 0 0; font-size: .84rem; line-height: 1.3; color: var(--muted); min-height: 2.2em; }
@keyframes wob { 0% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } 100% { transform: rotate(-6deg); } }
@media (max-width: 420px) { .dcards { grid-template-columns: 1fr; } }

/* pin the tail */
.pinboard svg { width: 100%; height: auto; border-radius: 10px; background: linear-gradient(#1d1848, #120f36); border: 1px solid var(--line); }
.pinboard.spin .scene { animation: spin1 1.25s ease-in-out; transform-box: fill-box; transform-origin: center; }
@keyframes spin1 { to { transform: rotate(720deg); } }
.pinboard .tail { transition: opacity .2s; }

/* contract */
.contract { background: var(--paper); color: var(--paper-ink); padding: 20px 22px; border-radius: 4px; box-shadow: 0 22px 40px -20px #000; transform: rotate(-.6deg); }
.contract h5 { font: italic 400 1.28rem/1.2 var(--f-display); margin: 0 0 12px; }
.contract ol { margin: 0; padding-left: 1.2em; }
.contract li { margin-bottom: 9px; font-size: 1.02rem; line-height: 1.4; }
.contract .sig { margin-top: 10px; font: 500 1.4rem/1 var(--f-hand); opacity: .5; }
.contract.shake { animation: shake .5s; }
.contract.burn { animation: burn 2.3s; }
@keyframes burn { 35% { filter: sepia(1) brightness(.62) drop-shadow(0 0 18px #ff7a3d); } 100% { filter: none; } }

/* aura board */
.aura-board { position: relative; aspect-ratio: 4 / 3; border-radius: 12px; border: 1px solid var(--line); overflow: hidden; touch-action: none;
  background: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px) 0 0 / 100% 11.111%, linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px) 0 0 / 8.333% 100%, radial-gradient(circle at 50% 50%, #191547, #0b0a26); }
.aura-ring { position: absolute; width: 33.333%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); border: 2px dashed #ffd36a; background: radial-gradient(circle, rgba(255, 211, 106, .18), rgba(255, 211, 106, .04)); box-shadow: 0 0 30px -6px #ffd36a; transition: opacity .3s; pointer-events: none; }
.aura-ring.off { opacity: .12; }
.tok { position: absolute; width: 11%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; border: 2px solid var(--hc, #e5473b); background: #1a1650; cursor: grab; touch-action: none; transition: filter .3s; }
.tok img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; pointer-events: none; }
.tok.drag { cursor: grabbing; z-index: 3; box-shadow: 0 0 24px var(--hc, #e5473b); }
.tok.devil { background: #4a0d14; display: grid; place-items: center; font: 600 1.1rem/1 var(--f-display); color: #ffb3a9; --hc: #e5473b; }
.tok .heart { position: absolute; right: -7px; top: -7px; width: 21px; height: 21px; border-radius: 50%; background: #ff5fa8; display: none; place-items: center; }
.tok.charmed .heart { display: grid; }
.tok.charmed .heart::before { content: "\2665"; color: #fff; font-size: 12px; }
.tok.charmed { filter: saturate(.6) drop-shadow(0 0 10px #ff5fa8); }
.switch { display: inline-flex; align-items: center; gap: 10px; font: 500 12.5px/1.2 var(--f-ui); letter-spacing: .04em; cursor: pointer; }
.switch input { width: 18px; height: 18px; accent-color: var(--honey); }

/* campfire */
.fireside { position: relative; aspect-ratio: 1; max-width: 380px; margin: 0 auto; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 140, 60, .22), transparent 72%); }
.fire { position: absolute; left: 50%; top: 52%; width: 22%; aspect-ratio: 1; transform: translate(-50%, -50%); }
.fire i { position: absolute; bottom: 22%; left: 50%; width: 46%; height: 70%; transform: translateX(-50%); border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%; background: linear-gradient(#ffe08f, #ff7a3d 60%, #e5473b); filter: blur(1px); animation: flick .9s ease-in-out infinite alternate; }
.fire i:nth-child(2) { width: 34%; left: 34%; height: 54%; animation-delay: -.3s; }
.fire i:nth-child(3) { width: 30%; left: 68%; height: 48%; animation-delay: -.6s; }
.pot { position: absolute; left: 10%; right: 10%; bottom: 0; height: 34%; border-radius: 0 0 40% 40%; background: #1c1a2e; border: 2px solid #4a4666; }
@keyframes flick { to { transform: translateX(-50%) scaleY(1.14) scaleX(.9); } }
.seat { position: absolute; width: 19%; transform: translate(-50%, -50%); border: 0; background: none; padding: 0; display: grid; justify-items: center; gap: 4px; color: var(--text); }
.seat img, .seat > span { width: 100%; aspect-ratio: 1; border-radius: 50%; border: 2px solid var(--line); object-fit: cover; display: grid; place-items: center; background: #1a1650; font: 600 1.3rem/1 var(--f-display); transition: transform .25s, border-color .25s; }
.seat:hover img, .seat:hover > span, .seat.on img, .seat.on > span { transform: scale(1.12); border-color: var(--honey); }
.seat small { font: 600 9.5px/1 var(--f-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }

/* radar reveal + to be continued */
.radar .val { transform-origin: 100px 100px; transform: scale(.1); transition: transform 1s var(--ease) .35s; }
.hcard.flipped .radar .val { transform: scale(1); }
.tbc { text-align: center; padding: clamp(60px, 10vw, 140px) 0 0; grid-column: 1 / -1; }
.tbc h3 { font: italic 400 clamp(3rem, 9vw, 7.5rem)/1 var(--f-display); color: #fff3d0; text-shadow: 0 0 60px color-mix(in srgb, var(--accent) 70%, transparent); animation: beat 3.2s ease-in-out infinite; }
.tbc p:not(.eyebrow) { max-width: 44ch; margin: 1.2rem auto 0; color: #dcd5c8; font-size: 1.1em; }
@keyframes beat { 0%, 100% { transform: scale(1); } 8% { transform: scale(1.03); } 16% { transform: scale(1); } 24% { transform: scale(1.02); } }