/* ============ DM Tavern — scenery, landing, characters, chronicle, Plus ============ */

/* ---------- Painted night scene (landing + campaign banners) ---------- */
.scene { position: absolute; inset: 0; overflow: hidden; background: #06070b; z-index: 0; }
.scene .sky {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 55% at 50% 100%, color-mix(in srgb, var(--tint) 75%, transparent), transparent 70%),
    radial-gradient(ellipse 40% 30% at 20% 90%, color-mix(in srgb, var(--tint) 35%, transparent), transparent 70%),
    linear-gradient(180deg, #04050a 0%, #0b0d17 38%, #171319 70%, color-mix(in srgb, var(--tint) 45%, #120c0c) 100%);
}
.scene .stars {
  position: absolute; inset: 0 0 40% 0; opacity: .8;
  background-image:
    radial-gradient(1px 1px at 12% 18%, #fff, transparent), radial-gradient(1px 1px at 27% 8%, #e9e2d0, transparent),
    radial-gradient(1.5px 1.5px at 41% 26%, #fff, transparent), radial-gradient(1px 1px at 56% 12%, #d8d2c4, transparent),
    radial-gradient(1px 1px at 68% 31%, #fff, transparent), radial-gradient(1.5px 1.5px at 83% 9%, #f3ecd8, transparent),
    radial-gradient(1px 1px at 91% 24%, #fff, transparent), radial-gradient(1px 1px at 7% 36%, #cfc8b8, transparent),
    radial-gradient(1px 1px at 34% 40%, #fff, transparent), radial-gradient(1px 1px at 76% 44%, #e0d8c6, transparent);
  animation: twinkle 6s ease-in-out infinite alternate;
}
@keyframes twinkle { from { opacity: .45; } to { opacity: .9; } }
.scene .moon {
  position: absolute; top: 12%; right: 14%; width: 70px; height: 70px; border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #fbf3dd, #d9cfb5 60%, #b8ae96);
  box-shadow: 0 0 40px 10px rgba(246,232,196,.25), 0 0 120px 40px rgba(246,232,196,.08);
}
.scene .ridge { position: absolute; left: 0; width: 100%; bottom: 0; }
.scene .ridge.far { height: 62%; fill: #1a1520; opacity: .9; }
.scene .ridge.mid { height: 46%; fill: #110e14; }
.scene .ridge.near { height: 30%; fill: #08070a; }
.scene .castle { position: absolute; bottom: 22%; left: 56%; width: 280px; height: 190px; fill: #0c0a0f; }
.scene .castle .win { fill: #f0a95a; filter: drop-shadow(0 0 3px #f0a95a); animation: candle 4s ease-in-out infinite; }
@keyframes candle { 0%, 100% { opacity: 1; } 45% { opacity: .75; } 50% { opacity: .9; } 70% { opacity: .7; } }
.scene .fog { position: absolute; left: -20%; width: 140%; height: 34%; bottom: 6%; opacity: .45; pointer-events: none;
  background: radial-gradient(ellipse 30% 50% at 20% 50%, rgba(200,190,200,.18), transparent 70%), radial-gradient(ellipse 35% 45% at 70% 60%, rgba(200,190,200,.14), transparent 70%);
  filter: blur(8px); animation: drift 60s linear infinite alternate; }
.scene .fog.f2 { bottom: 0; height: 26%; opacity: .35; animation-duration: 90s; animation-direction: alternate-reverse; }
@keyframes drift { to { transform: translateX(12%); } }
.scene .vignette { position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 45%, rgba(0,0,0,.75)); }
.scene.mini .moon { width: 34px; height: 34px; top: 16%; right: auto; left: 12%; }
.scene.mini .castle { display: none; }
.scene.hero-scene .castle { left: auto; right: 20%; width: 240px; height: 165px; bottom: 16%; }
.scene.hero-scene .moon { right: 32%; top: 14%; width: 56px; height: 56px; }
.scene.hero-scene::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,7,8,.85) 0%, rgba(8,7,8,.45) 50%, transparent 80%); }

/* ---------- Landing ---------- */
.landing { min-height: 100vh; }
.land-nav { position: absolute; left: 0; right: 0; background: linear-gradient(180deg, rgba(5,5,7,.85), transparent); box-shadow: none; border: 0; }
.land-hero { position: relative; min-height: 92vh; display: grid; place-items: center; text-align: center; overflow: hidden; border-bottom: 1px solid var(--line-strong); box-shadow: 0 2px 0 var(--blood); }
.land-scene .castle { left: auto; right: 6%; width: 380px; height: 250px; bottom: 21%; }
.land-scene .moon { top: 13%; right: 16%; width: 84px; height: 84px; }
.land-inner { position: relative; z-index: 2; padding: 90px 16px 120px; max-width: 760px; }
.crest-wrap .d20.crest { width: 84px; height: 96px; filter: drop-shadow(0 8px 24px rgba(0,0,0,.9)) drop-shadow(0 0 22px rgba(179,38,30,.35)); }
.eyebrow { font-family: var(--ui); font-size: 13px; letter-spacing: .32em; text-transform: uppercase; color: var(--gold); margin: 18px 0 4px; text-shadow: 0 1px 6px #000; }
.land-title {
  font-family: var(--display); font-weight: 800; font-size: clamp(46px, 9vw, 92px); margin: 0; letter-spacing: .08em; text-transform: uppercase; line-height: 1.05;
  background: linear-gradient(180deg, #fbf1d8 10%, #e3c88f 45%, #a07a3c 90%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 18px rgba(0,0,0,.9));
}
.flourish { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 12px auto 14px; color: var(--gold); max-width: 360px; }
.flourish span { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); }
.flourish span:last-child { background: linear-gradient(90deg, var(--gold), transparent); }
.land-hero .tag { color: #e2d7c4; font-family: var(--prose); font-style: italic; font-size: 22px; margin: 0 0 28px; text-shadow: 0 2px 10px #000; }
.land-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.btn.big { padding: 14px 26px; font-size: 15px; }
.land-inner .demo-note { color: #9d9384; text-shadow: 0 1px 6px #000; }
.land-feats { max-width: 1120px; margin: -60px auto 0; padding: 0 16px; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; position: relative; z-index: 3; }
.feat { background: linear-gradient(180deg, rgba(36,33,35,.97), rgba(24,22,23,.97)); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 22px; animation: rise .6s backwards; box-shadow: 0 18px 40px rgba(0,0,0,.6); }
.feat-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--gold-dark); color: var(--gold-2); background: radial-gradient(circle, #2a1210, #140909); margin-bottom: 12px; }
.feat-ic .ic { width: 22px; height: 22px; }
.feat h3 { font-family: var(--display); font-weight: 700; margin: 0 0 6px; font-size: 17px; letter-spacing: .04em; color: var(--gold-2); }
.feat p { margin: 0; color: var(--muted); font-family: var(--prose); font-size: 16px; line-height: 1.5; }
.land-steps { max-width: 940px; margin: 54px auto 0; padding: 0 16px; }
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.step { display: flex; gap: 14px; align-items: flex-start; padding: 18px; border-radius: var(--radius); border: 1px solid var(--line); background: rgba(0,0,0,.25); color: var(--muted); font-family: var(--prose); font-size: 16px; }
.step b { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: var(--gold-2); border: 1px solid var(--gold); background: #150d0c; font-family: var(--display); font-size: 15px; }
.step em { color: var(--gold-2); font-style: normal; font-weight: 700; }
.who-grid.mini { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) !important; gap: 10px; }
.who-grid.mini .who { padding: 14px 8px; }
.code-input { font-family: ui-monospace, Consolas, monospace; letter-spacing: .12em; font-size: 17px !important; text-align: center; text-transform: uppercase; }
.join-btn { margin-right: 4px; }
.plus-link { color: var(--gold-2); }

/* ---------- Invite code ---------- */
.code-box { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 16px; border-radius: var(--radius); background: var(--paper), linear-gradient(180deg, #1d1112, #140c0c); border: 1px solid rgba(217,65,47,.4); }
.code-box .lbl { flex-basis: 100%; font-family: var(--ui); font-size: 11px; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); margin-bottom: -4px; }
.code-box .code { font-family: ui-monospace, Consolas, monospace; font-size: 18px; font-weight: 700; color: var(--gold-2); letter-spacing: .08em; white-space: nowrap; flex: 1; text-shadow: 0 0 12px rgba(201,164,92,.3); }
.warn-line { font-size: 13.5px; color: var(--wait); margin: 10px 0 0; font-style: italic; }
.plus-chip { display: inline-block; font-family: var(--ui); font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; padding: 2px 8px; border-radius: 2px; color: var(--gold-2); border: 1px solid var(--gold); background: rgba(201,164,92,.1); vertical-align: middle; }

/* ---------- Characters ---------- */
.ch-line { font-family: var(--prose); font-style: italic; font-size: 14px; color: var(--gold-2); margin-top: 1px; }
.party-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; padding: 16px 0; border-top: 1px solid var(--line); animation: rise .4s backwards; }
.party-row:first-of-type { border-top: 0; padding-top: 0; }
.who-col { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.who-col b { font-family: var(--display); }
.chars { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.dm-card { padding: 14px 16px; border-radius: var(--radius); border: 1px solid rgba(217,65,47,.35); color: #e8bfb4; font-family: var(--prose); font-style: italic; font-size: 16px; background: linear-gradient(90deg, rgba(110,23,20,.3), transparent); }
.char { display: flex; gap: 16px; padding: 14px; border-radius: var(--radius); border: 1px solid var(--line); background: linear-gradient(135deg, rgba(201,164,92,.06), rgba(0,0,0,.25)); animation: rise .45s backwards; transition: border-color .2s; }
.char:hover { border-color: var(--line-strong); }
.char .portrait {
  --c: #8a6f5a; position: relative; flex: none; width: 66px; height: 66px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--c) 45%, #3a3436), color-mix(in srgb, var(--c) 25%, #0a0909));
  border: 2px solid var(--gold); box-shadow: 0 0 0 3px #0d0c0c, 0 0 0 4px var(--gold-dark), 0 8px 18px rgba(0,0,0,.6);
}
.char .portrait .mono { font-family: var(--display); font-weight: 700; font-size: 22px; color: #f3e6c8; letter-spacing: .04em; text-shadow: 0 2px 4px #000; }
.char .portrait .skull { position: absolute; right: -4px; bottom: -4px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #0d0c0c; border: 1px solid var(--no); color: var(--no); font-size: 13px; }
.char .info { min-width: 0; flex: 1; }
.char .nm { font-family: var(--display); font-weight: 700; font-size: 18px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; letter-spacing: .02em; }
.char .sub { color: var(--gold-2); font-family: var(--prose); font-style: italic; font-size: 16px; margin-top: 1px; }
.char .by { font-size: 12.5px; color: var(--dim); margin-top: 2px; }
.char.fallen { filter: grayscale(.9) brightness(.8); }
.char.retired { opacity: .7; }
.btn.ddb-btn { border-color: rgba(217,65,47,.55); color: #f3cfc4; }
.btn.ddb-btn:hover { background: rgba(179,38,30,.18); border-color: var(--crimson-2); }
.new-char { padding: 18px; border-radius: var(--radius); border: 1px dashed var(--line-strong); background: rgba(0,0,0,.15); color: var(--gold-2); font-family: var(--display); font-weight: 600; letter-spacing: .04em; cursor: pointer; transition: all .2s; }
.new-char:hover { border-color: var(--gold); background: rgba(201,164,92,.05); }
.no-char { padding: 14px; border-radius: var(--radius); border: 1px dashed var(--line); color: var(--dim); font-family: var(--prose); font-style: italic; }
details.past summary { cursor: pointer; color: var(--muted); font-family: var(--ui); font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; padding: 4px 0; }
details.past .char { margin-top: 8px; }
.char-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; }
.field-row.three { grid-template-columns: 1fr 1fr 90px; }
@media (max-width: 640px) {
  .party-row { grid-template-columns: 1fr; }
  .who-col { flex-direction: row; align-items: center; }
  .field-row.three { grid-template-columns: 1fr; }
  .char-grid { grid-template-columns: 1fr; }
}

/* ---------- Chronicle (log) on parchment ---------- */
.timeline { position: relative; padding-left: 26px; }
.timeline::before { content: ""; position: absolute; left: 8px; top: 8px; bottom: 8px; width: 1px; background: linear-gradient(var(--gold), transparent); opacity: .5; }
.log-card {
  position: relative; margin-bottom: 18px; padding: 20px 24px 22px; border-radius: 2px; color: var(--parch-ink);
  background: var(--paper), radial-gradient(ellipse at 30% 20%, #f4ead2, var(--parch) 55%, var(--parch-2));
  box-shadow: 0 12px 28px rgba(0,0,0,.6), inset 0 0 40px rgba(120,80,30,.25); animation: rise .45s backwards;
}
.log-card::before { content: ""; position: absolute; left: -23px; top: 24px; width: 9px; height: 9px; transform: rotate(45deg); background: var(--gold); box-shadow: 0 0 8px rgba(201,164,92,.7); }
.log-card.note { padding: 14px 20px 16px; background: var(--paper), linear-gradient(180deg, #ece2c8, #dccba5); }
.log-card.note::before { background: #8aa0b8; box-shadow: none; }
.log-card.secret { color: #ecdcc8; background: var(--paper), linear-gradient(160deg, #3a1311, #1c0909); border: 1px solid rgba(217,65,47,.4); }
.log-card.secret::before { background: var(--crimson-2); }
.log-card.secret::after { content: "Sealed"; position: absolute; top: 14px; right: 16px; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; font-family: var(--display); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: #f6d9cf; background: radial-gradient(circle at 35% 30%, #c5362a, #6e1714); box-shadow: 0 3px 8px rgba(0,0,0,.6), inset 0 0 0 3px rgba(0,0,0,.2); transform: rotate(-12deg); }
.log-head { display: flex; align-items: center; gap: 8px; font-size: 13px; font-family: var(--ui); letter-spacing: .04em; }
.log-head > span:not(.av) { flex: 1; }
.log-head .dim { color: #7a6650; }
.log-card.secret .log-head .dim { color: #b8968a; }
.log-card .sess { font-family: var(--ui); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8d2a1e; margin-top: 10px; }
.log-card.secret .sess { color: #f0a698; }
.log-card h3 { font-family: var(--display); font-weight: 700; margin: 6px 0 0; font-size: 22px; letter-spacing: .02em; color: #3a2414; }
.log-card.secret h3 { color: #f6dccf; }
.log-body { font-family: var(--prose); font-size: 17.5px; line-height: 1.6; }
.log-body p { margin: 10px 0 0; }
.log-body p + p { clear: left; }
.log-card.recap .log-body > p:first-child::first-letter { float: left; font-family: var(--display); font-weight: 700; font-size: 46px; line-height: .9; padding: 6px 8px 0 0; color: #8d2a1e; }
.log-event { position: relative; display: flex; gap: 10px; align-items: center; font-family: var(--prose); font-style: italic; font-size: 15px; color: var(--muted); padding: 4px 0 16px; animation: fadeIn .4s backwards; }
.log-event .dot { position: absolute; left: -21px; width: 5px; height: 5px; transform: rotate(45deg); background: var(--dim); }
.log-event .when { margin-left: auto; font-family: var(--ui); font-style: normal; font-size: 11.5px; letter-spacing: .04em; color: var(--dim); white-space: nowrap; }
.icon-x { background: none; border: 0; color: #8a7458; cursor: pointer; font-size: 13px; padding: 4px 6px; border-radius: 2px; }
.icon-x:hover { color: var(--crimson); background: rgba(179,38,30,.1); }
.prev-on { overflow: hidden; color: var(--parch-ink); background: var(--paper), radial-gradient(ellipse at 30% 20%, #f4ead2, var(--parch) 55%, var(--parch-2)); border: 0; box-shadow: 0 14px 30px rgba(0,0,0,.6), inset 0 0 50px rgba(120,80,30,.3); }
.prev-on::before { border-color: rgba(122,90,42,.35); }
.prev-on h2 { color: #6e1714; border-image: linear-gradient(90deg, rgba(122,90,42,.5), transparent) 1; }
.prev-on h2 .sub { color: #7a6650; }
.prev-title { font-family: var(--display); font-weight: 700; margin: 0; font-size: 21px; color: #3a2414; }
.prev-on .log-body { margin-bottom: 12px; }
.prev-on .link-ddb, .prev-on .btn { color: #8d2a1e; }
.prev-on .muted { color: #6b5a44; }

/* ---------- Plus ---------- */
.plus-lock { position: relative; overflow: hidden; text-align: center; border-style: dashed; border-color: var(--line-strong); background: var(--stone), linear-gradient(180deg, rgba(30,27,29,.95), rgba(20,18,19,.95)); }
.plus-lock .lock-inner { padding: 8px 0; }
.plus-lock .ic { display: none; }
.plus-lock h2 { border: 0 !important; padding-bottom: 0 !important; }
.plus-lock p { max-width: 460px; margin: 0 auto 14px; font-family: var(--prose); font-style: italic; font-size: 16px; }
.plus-hero { position: relative; text-align: center; padding: 50px 20px; border-radius: var(--radius); overflow: hidden; margin-bottom: 22px; border: 1px solid var(--line-strong);
  background: radial-gradient(ellipse at 50% 120%, rgba(140,30,24,.45), transparent 60%), var(--stone), linear-gradient(180deg, #1b1719, #0e0c0d); box-shadow: var(--shadow); }
.plus-hero h1 { position: relative; font-family: var(--display); font-weight: 800; font-size: clamp(32px, 6vw, 52px); margin: 0; letter-spacing: .08em; text-transform: uppercase;
  background: linear-gradient(180deg, #fbf1d8, #e3c88f 50%, #a07a3c); -webkit-background-clip: text; background-clip: text; color: transparent; }
.plus-hero p { position: relative; color: var(--muted); font-family: var(--prose); font-style: italic; font-size: 18px; }
.plus-hero .price { position: relative; font-family: var(--display); font-weight: 700; font-size: 30px; color: var(--ink); margin: 6px 0 20px; }
.plus-hero .price span { font-family: var(--prose); font-style: italic; font-weight: 400; font-size: 15px; color: var(--muted); }
.plus-hero .btn { position: relative; }
.have-plus { position: relative; display: inline-block; padding: 10px 18px; border-radius: 2px; background: rgba(120,177,132,.12); border: 1px solid var(--ok); color: #c7e6cd; font-family: var(--ui); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin: 0 8px 8px 0; }
.sparkles { position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(1.5px 1.5px at 20% 30%, #f3d79a, transparent), radial-gradient(1px 1px at 70% 20%, #fff, transparent), radial-gradient(1.5px 1.5px at 40% 80%, #f3d79a, transparent), radial-gradient(1px 1px at 85% 60%, #fff, transparent), radial-gradient(1px 1px at 10% 70%, #f3d79a, transparent); animation: twinkle 5s ease-in-out infinite alternate; }
.compare { width: 100%; border-collapse: collapse; font-size: 15px; }
.compare th, .compare td { padding: 12px; text-align: center; border-bottom: 1px solid var(--line); }
.compare th:first-child, .compare td:first-child { text-align: left; }
.compare th { font-family: var(--display); font-weight: 700; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-2); }
.compare .pl { background: rgba(179,38,30,.08); color: var(--gold-2); font-weight: 600; }
.compare .yes { color: var(--ok); font-weight: 700; }
.compare .nope { color: var(--dim); }
.later { margin: 0; padding-left: 20px; display: grid; gap: 8px; color: var(--muted); font-family: var(--prose); font-size: 16px; }
.later li::marker { content: "\25C6  "; color: var(--gold); font-size: 10px; }

/* stats */
.stat-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tile { padding: 12px 14px; border-radius: 2px; background: rgba(0,0,0,.25); border: 1px solid var(--line); animation: rise .4s backwards; }
.tile .v { font-family: var(--display); font-weight: 700; font-size: 24px; color: var(--gold-2); }
.tile .l { font-family: var(--ui); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.bars { display: flex; gap: 10px; align-items: flex-end; height: 120px; margin-top: 24px; padding: 0 4px; border-bottom: 1px solid var(--line-strong); }
.bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; gap: 6px; }
.bar { width: 100%; max-width: 38px; min-height: 2px; border-radius: 1px 1px 0 0; background: linear-gradient(180deg, var(--gold), #7d1d1a); position: relative; animation: barUp 1s ease-out backwards; transform-origin: bottom; }
.bar span { position: absolute; top: -18px; left: 0; right: 0; text-align: center; font-family: var(--ui); font-size: 11px; color: var(--muted); }
@keyframes barUp { from { transform: scaleY(0); } }
.bl { font-family: var(--ui); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); margin-bottom: -22px; }
@media (max-width: 640px) { .stat-tiles { grid-template-columns: repeat(2, 1fr); } }

/* availability */
.avail-wrap { overflow-x: auto; }
.avail { display: grid; grid-template-columns: 58px repeat(7, minmax(34px, 1fr)); gap: 3px; user-select: none; min-width: 330px; }
.avail .ah { font-family: var(--ui); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); text-align: center; padding-bottom: 4px; }
.avail .al { font-family: var(--ui); font-size: 11px; color: var(--dim); text-align: right; padding-right: 6px; line-height: 22px; }
.avail .ac { height: 22px; border-radius: 1px; cursor: pointer; border: 1px solid rgba(255,255,255,.03);
  background: color-mix(in srgb, #4f8a5c calc(var(--a) * 90%), rgba(255,255,255,.035)); transition: box-shadow .15s; }
.avail .ac:hover { box-shadow: inset 0 0 0 1px var(--gold-2); }
.avail .ac.mine { box-shadow: inset 0 0 0 2px var(--gold); }
.avail-foot { display: flex; gap: 10px; margin-top: 14px; }
.best-h { font-family: var(--display); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: 13px; color: var(--gold); margin: 20px 0 10px; }
.best { display: grid; gap: 8px; }
.best-row { display: flex; align-items: center; gap: 14px; padding: 10px 14px; border-radius: 2px; background: rgba(79,138,92,.08); border: 1px solid rgba(120,177,132,.25); animation: rise .4s backwards; font-size: 14px; flex-wrap: wrap; }
.best-row b { font-family: var(--display); }
.best-row .medal { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: 12px; color: #1a1208; background: radial-gradient(circle at 35% 30%, #f1dca6, #b08a46); box-shadow: 0 2px 6px rgba(0,0,0,.5); }
.best-row > span:nth-child(2) { flex: 1; min-width: 160px; }
.recur-now { padding: 10px 12px; border-radius: 2px; background: rgba(120,177,132,.08); border: 1px solid rgba(120,177,132,.3); margin-bottom: 12px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: space-between; font-size: 14px; }

/* theme picker swatches */
.theme-row label { position: relative; cursor: pointer; }
.theme-pick { display: grid !important; place-items: center; width: 54px; height: 44px; border-radius: 2px; position: relative; overflow: visible !important; color: var(--gold-2);
  background: radial-gradient(circle at 50% 120%, var(--g), #0b0a0c 75%) !important; border: 1px solid var(--line); transition: border-color .2s, box-shadow .2s; }
.theme-pick svg.sigil { width: 26px; height: 26px; }
.theme-pick::after { display: none; }
input:checked + .theme-pick { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 0 14px rgba(201,164,92,.35); }
.theme-row label.locked { cursor: not-allowed; opacity: .4; }
.theme-pick .lk { position: absolute; right: -5px; bottom: -5px; width: 16px; height: 16px; border-radius: 50%; background: #0d0c0c; border: 1px solid var(--gold-dark); display: grid; place-items: center; color: var(--gold); font-style: normal; }
.theme-pick .lk .ic { width: 9px; height: 9px; }

.no-anim .char, .no-anim .log-card, .no-anim .log-event, .no-anim .tile, .no-anim .bar, .no-anim .best-row,
.no-anim .party-row, .no-anim .feat { animation: none; }
@media (max-width: 860px) { .nav-links a { padding: 0 9px; letter-spacing: .04em; } .join-btn { display: none; } }
@media (max-width: 720px) {
  .land-nav .btn.ghost { display: none; }
  .land-scene .castle { width: 300px; height: 200px; }
  .scene.hero-scene .castle { display: none; }
  .log-card.secret::after { display: none; }
}

/* ---------- log in / create account / welcome ---------- */
.auth-box { max-width: 400px; margin: 0 auto; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin: 0 0 18px; border-radius: 10px; background: rgba(255,255,255,.05); border: 1px solid var(--line); }
.auth-tabs button { padding: 9px 10px; border: 0; border-radius: 7px; background: none; color: var(--muted); font: 600 14px var(--body); cursor: pointer; }
.auth-tabs button.on { background: var(--surface, #2a2628); color: var(--ink); box-shadow: 0 1px 0 rgba(255,255,255,.06), 0 2px 6px rgba(0,0,0,.35); }
.auth-box h2 { margin: 0 0 4px; }
.auth-box .sub { margin-bottom: 16px; }
.auth-main { width: 100%; justify-content: center; margin-top: 4px; }
.auth-box .or { margin: 16px 0; }
.auth-forgot { float: right; font-weight: 400; font-size: 13px; }
.auth-link { margin-top: 14px; font-size: 14px; color: var(--muted); }
.auth-link summary { cursor: pointer; }
.auth-link .email-row { margin-top: 10px; }
.auth-switch { margin: 18px 0 0; text-align: center; font-size: 14px; color: var(--muted); }
.welcome-av { display: flex; align-items: center; gap: 16px; margin: 6px 0 18px; }
.welcome-av .av { width: 84px; height: 84px; font-size: 34px; flex: none; }
.welcome-av-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.welcome-av-btns .dim { flex-basis: 100%; }