/* Nordic Fairway. Layout: one upright phone column. HUD on top, the aerial hole in the middle, the tray
   (draw pile, your card, coach text) and four clubs at the bottom. Deliberately one dark evening world. */
:root {
  --granskog: #0F2A24;
  --mossa: #3E6B4F;
  --fairway: #6FA35B;
  --natt: #0B1B2B;
  --natt-2: #12263a;
  --havsgron: #2F6F7E;
  --sand: #D9BF8C;
  --massing: #C9A24B;
  --massing-ljus: #F1D99A;
  --linne: #F3ECDD;
  --flaggrod: #C8402F;
  --blacka: #1d2430;
  --kort-rod: #b23a2a;
  --text: #EFE8D8;
  --dim: #a9b4bd;
  --line: rgba(201, 162, 75, .28);
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-ui: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --linen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .35 0 0 0 0 .25 0 0 0 .13 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"),
    repeating-linear-gradient(0deg, rgba(110, 90, 60, .05) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(110, 90, 60, .05) 0 1px, transparent 1px 3px);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; color: var(--text); font-family: var(--font-ui); font-size: 15px; line-height: 1.4;
  background: radial-gradient(120% 60% at 80% 0%, #1b3446 0%, var(--natt) 55%, #07121d 100%) fixed, var(--natt);
  padding-left: max(12px, env(safe-area-inset-left, 0px)); padding-right: max(12px, env(safe-area-inset-right, 0px)); padding-block: 0;
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; overflow-x: hidden;
}
button { font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--massing-ljus); outline-offset: 2px; }
[hidden] { display: none !important; }
.app { max-width: 480px; margin: 0 auto; min-height: 100%; display: flex; flex-direction: column; gap: 8px; padding-block: 10px 12px; position: relative; }
.eyebrow { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--massing); font-weight: 700; }

/* HUD */
.hud { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.hud-l { min-width: 0; display: grid; gap: 1px; }
.hud-title { font-family: var(--font-display); font-weight: 650; font-size: 25px; line-height: 1.05; font-variation-settings: "opsz" 96; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud-sub { font-size: 13.5px; color: var(--dim); display: flex; gap: 6px; align-items: baseline; }
.hud-sub b { color: var(--text); font-weight: 700; }
.hud-r { display: grid; justify-items: end; gap: 4px; }
.hud-tools { display: flex; gap: 6px; }
.icon { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: rgba(255,255,255,.03); display: grid; place-items: center; cursor: pointer; color: var(--massing-ljus); }
.icon svg { width: 18px; height: 18px; }
.strokes { display: flex; align-items: baseline; gap: 6px; }
.strokes b { font-family: var(--font-display); font-weight: 650; font-size: 30px; line-height: 1; font-variant-numeric: tabular-nums; }
.strokes { position: relative; }
.strokes.bump b { animation: bump .45s ease-out; }
@keyframes bump { 35% { transform: scale(1.35); color: #ffb48f; } }
.strokes .plus { position: absolute; right: 100%; top: 0; margin-right: 4px; font: 800 18px/1 var(--font-ui); font-style: normal; color: #ffb48f; text-shadow: 0 1px 4px rgba(0,0,0,.7); animation: plusrise 1.2s ease-out forwards; pointer-events: none; }
@keyframes plusrise { 15% { opacity: 1; } to { transform: translateY(16px); opacity: 0; } }
.over { font: 700 12px/1 var(--font-ui); color: #ffb48f; min-height: 0; }
.over:empty { display: none; }
.pips { display: flex; gap: 4px; }
.pips i { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid rgba(201,162,75,.55); }
.pips i.on { background: var(--linne); border-color: var(--linne); }
.pips i.over { background: var(--flaggrod); border-color: var(--flaggrod); }

/* course */
.course-wrap { position: relative; width: 100%; border-radius: 22px; overflow: hidden; box-shadow: 0 0 0 1px rgba(201,162,75,.18), 0 18px 40px rgba(0,0,0,.45); transition: box-shadow .5s; background: var(--havsgron); }
.app.glow .course-wrap { box-shadow: 0 0 0 1.5px var(--massing), 0 0 40px rgba(241,190,110,.55), 0 18px 40px rgba(0,0,0,.45); }
.course { position: absolute; top: 0; left: 0; width: 360px; height: 520px; transform-origin: 0 0; }
.course canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

.card {
  position: absolute; width: 46px; height: 64px; border: 0; padding: 0; border-radius: 7px; cursor: pointer;
  background: var(--linen), linear-gradient(160deg, #fdfaf1 0%, #f8f2e3 60%, #f0e8d4 100%);
  color: var(--blacka); display: flex; flex-direction: column; align-items: center; gap: 2px; padding-top: 5px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75), inset 0 0 0 .6px rgba(60,40,20,.35), 2px 3px 6px rgba(0,0,0,.35);
  transition: transform .22s cubic-bezier(.2,.8,.2,1), opacity .3s ease, filter .25s ease, box-shadow .22s ease;
}
.card .rk { font-family: var(--font-display); font-weight: 650; font-size: 23px; line-height: 1; letter-spacing: -.02em; font-variation-settings: "opsz" 40; }
.card .su { width: 17px; height: 17px; }
.card.red { color: var(--kort-rod); }
.card.cov { background: linear-gradient(to bottom, rgba(0,0,0,.26), rgba(0,0,0,0) 30%), linear-gradient(160deg, var(--tint-1, #2a655e), var(--tint-2, #265c56)); color: #fff4dc; box-shadow: inset 0 1px 0 rgba(255,255,255,.14), inset 0 0 0 .6px rgba(0,0,0,.35), 2px 3px 6px rgba(0,0,0,.35); cursor: default; }
.card.cov.red { color: #ffc9b8; }
.card.play { transform: translateY(-3px); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 0 0 2px var(--massing), 0 0 14px rgba(241,200,120,.65), 0 8px 14px rgba(6,12,20,.45); animation: breathe 2.2s ease-in-out infinite; }
@keyframes breathe { 50% { box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 0 0 2px var(--massing-ljus), 0 0 22px rgba(241,200,120,.85), 0 8px 14px rgba(6,12,20,.45); } }
.card.sand { background: repeating-radial-gradient(ellipse at 50% 120%, rgba(150,115,60,.0) 0 5px, rgba(150,115,60,.14) 5px 6px), var(--linen), linear-gradient(160deg, #f6ead0, #e7d3a8); }
.card.water { background: repeating-radial-gradient(ellipse at 50% 110%, rgba(47,111,126,0) 0 5px, rgba(47,111,126,.16) 5px 6px), var(--linen), linear-gradient(160deg, #eef5f4, #d3e6e6); }
.card.flag { box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 0 0 2px var(--flaggrod), 0 8px 14px rgba(6,12,20,.45); }
.card.flag.play { box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 0 0 2.5px var(--massing-ljus), 0 0 22px rgba(241,200,120,.9), 0 8px 14px rgba(6,12,20,.45); }
.card .tag { position: absolute; top: -8px; right: -9px; height: 18px; padding: 0 6px; border-radius: 9px; font: 700 10px/18px var(--font-ui); letter-spacing: .02em; display: inline-flex; gap: 2px; align-items: center; color: #fff; box-shadow: 0 2px 4px rgba(0,0,0,.35); }
.card .tag svg { width: 11px; height: 11px; color: #fff; }
.card.sand .tag { background: #a9823c; }
.card.water .tag { background: var(--havsgron); }
.card.flag .tag { background: var(--flaggrod); }
.card.gone { opacity: 0; transform: translateY(-16px) scale(.55); pointer-events: none; }
.card.nudge { animation: nudge .3s; }
@keyframes nudge { 25%, 75% { transform: translateX(-4px); } 50% { transform: translateX(4px); } }

#ball, #ball-shadow { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 400; }
#ball { width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0 35%, #e9e6dd 70%, #bdb8aa); box-shadow: 0 0 0 .5px rgba(0,0,0,.25); will-change: transform; }
#ball-shadow { width: 12px; height: 6px; margin: -1px 0 0 -6px; border-radius: 50%; background: rgba(4,12,10,.55); filter: blur(1.5px); z-index: 399; }
#ball.sink { animation: sink 1s ease-in forwards; }
@keyframes sink { 40% { opacity: 1; } to { opacity: 0; margin-top: 2px; width: 4px; height: 4px; margin-left: -2px; } }
#fx { position: absolute; inset: 0; pointer-events: none; z-index: 500; }
.puff { position: absolute; width: 5px; height: 5px; margin: -2.5px; border-radius: 50%; animation: puff .65s cubic-bezier(.1,.7,.3,1) forwards; }
@keyframes puff { to { transform: translate(var(--dx), var(--dy)) scale(.3); opacity: 0; } }
.floater { position: absolute; transform: translate(-50%, -50%); font-family: var(--font-display); font-style: italic; font-weight: 650; font-size: 19px; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.7); white-space: nowrap; animation: rise 1.3s ease-out forwards; }
.floater.bad { color: #d7f0f2; }
.floater.sand { color: var(--massing-ljus); }
@keyframes rise { 15% { opacity: 1; } to { transform: translate(-50%, -190%); opacity: 0; } }
.banner { position: absolute; left: 0; right: 0; top: 34%; display: grid; justify-items: center; gap: 2px; pointer-events: none; opacity: 0; z-index: 600; }
.banner b { font-family: var(--font-display); font-style: italic; font-weight: 650; font-size: 44px; line-height: 1; color: transparent;
  background: linear-gradient(100deg, #b98a2e 0%, #f6e2a6 45%, #fff6d8 50%, #c9a24b 60%, #a8781f 100%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,.6)); }
.banner span { font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--linne); text-shadow: 0 2px 6px rgba(0,0,0,.8); }
.banner.show { animation: bannerin 1.7s ease-out forwards; }
.banner.show b { animation: shimmer 1.7s ease-out forwards; }
@keyframes bannerin { 0% { opacity: 0; transform: scale(.85); } 15% { opacity: 1; transform: scale(1); } 75% { opacity: 1; } 100% { opacity: 0; transform: translateY(-14px); } }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* bottom */
.bottom { display: grid; gap: 8px; }
.tray { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 14px; align-items: center; padding: 12px 14px 12px 12px; border-radius: 18px;
  background: linear-gradient(180deg, rgba(23,44,62,.92), rgba(12,26,40,.92)); border: 1px solid var(--line); }
.stock { position: relative; width: 56px; height: 78px; border: 0; padding: 0; background: none; cursor: pointer; margin: 0 6px 14px 0; }
.stock .back { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(3px 3px 0 #0a1622) drop-shadow(3px 3px 0 #08121c) drop-shadow(0 6px 10px rgba(0,0,0,.5)); }
.stock .n { position: absolute; right: -9px; top: -9px; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 12px; background: var(--massing); color: #20180a; font-weight: 800; font-size: 12px; display: grid; place-items: center; font-variant-numeric: tabular-nums; }
.stock .l { position: absolute; left: -6px; right: -6px; bottom: -19px; font-size: 11px; font-weight: 700; color: var(--dim); text-align: center; white-space: nowrap; }
.stock .v { position: absolute; left: -7px; top: -9px; height: 20px; padding: 0 5px; border-radius: 10px; background: #12303d; border: 1px solid var(--line); color: var(--text); font: 800 11px/18px var(--font-ui); white-space: nowrap; }
.stock.free .back { filter: drop-shadow(0 0 8px rgba(241,200,120,.9)) drop-shadow(3px 3px 0 #0a1622); }
.stock.free .l { color: var(--massing-ljus); }
.stock.empty .back { opacity: .3; }
.stock.empty .l { color: var(--massing-ljus); }
.card.big { position: relative; width: 66px; height: 92px; border-radius: 10px; cursor: default; padding-top: 9px; gap: 4px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 0 0 2px var(--massing), 0 10px 22px rgba(0,0,0,.5); }
.card.big .rk { font-size: 36px; }
.card.big .su { width: 26px; height: 26px; }
.card.big.locked { box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 0 0 2px #a9823c, 0 10px 22px rgba(0,0,0,.5); background: var(--linen), linear-gradient(160deg, #f6ead0, #e7d3a8); }
.card.big.flip { animation: flip .32s cubic-bezier(.2,.8,.2,1); }
@keyframes flip { from { transform: perspective(300px) rotateY(80deg); } }
.coach { display: grid; gap: 3px; min-width: 0; }
.coach b { font-family: var(--font-display); font-weight: 650; font-size: 19px; line-height: 1.1; font-variation-settings: "opsz" 60; }
.coach span { font-size: 13px; color: var(--dim); line-height: 1.35; }
.chainbar { display: flex; gap: 3px; min-height: 5px; margin-top: 3px; }
.chainbar i { width: 11px; height: 5px; border-radius: 3px; background: var(--fairway); }
.chainbar i.warm { background: var(--massing); }
.chainbar i.hot { background: var(--massing-ljus); box-shadow: 0 0 6px rgba(241,217,154,.8); }

.clubs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.club { display: grid; justify-items: center; gap: 2px; padding: 8px 4px 7px; min-height: 64px; border-radius: 14px; border: 1px solid var(--line); background: rgba(18,38,58,.85); cursor: pointer; text-align: center; color: var(--text); }
.club svg { width: 22px; height: 22px; color: var(--massing-ljus); }
.club span { display: grid; line-height: 1.15; }
.club b { font-size: 13px; font-weight: 700; }
.club small { font-size: 10.5px; color: var(--dim); }
.club.armed { border-color: var(--massing-ljus); background: linear-gradient(180deg, rgba(201,162,75,.28), rgba(201,162,75,.1)); box-shadow: 0 0 14px rgba(241,200,120,.35); }
.club:disabled { opacity: .3; cursor: default; }

.toast { position: fixed; left: 50%; top: calc(12px + env(safe-area-inset-top, 0px)); transform: translate(-50%, -8px); z-index: 90; max-width: min(440px, calc(100% - 32px));
  background: var(--linne); color: var(--natt); padding: 10px 16px; border-radius: 14px; font-weight: 600; font-size: 14px; opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,.4); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* overlays */
.overlay { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; background: rgba(5,12,20,.72); backdrop-filter: blur(4px);
  padding: 16px max(16px, env(safe-area-inset-right, 0px)) calc(16px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
.sheet { width: 100%; max-width: 420px; max-height: 100%; overflow-y: auto; border-radius: 24px; padding: 22px; display: grid; gap: 14px;
  background: linear-gradient(180deg, #17304a, #0d1d2e); border: 1px solid var(--line); box-shadow: 0 24px 70px rgba(0,0,0,.6); animation: up .3s cubic-bezier(.2,.8,.2,1); }
@keyframes up { from { transform: translateY(24px); opacity: 0; } }
.sheet h2 { margin: 0; font-family: var(--font-display); font-weight: 650; font-size: 30px; line-height: 1.05; text-wrap: balance; }
.center { text-align: center; }
.sub { color: var(--dim); }
.term { font-family: var(--font-display); font-style: italic; font-weight: 650; font-size: 62px; line-height: .95; text-align: center; color: var(--linne); font-variation-settings: "opsz" 144; }
.term.gold { color: transparent; background: linear-gradient(100deg, #a8781f 0%, #f6e2a6 40%, #fff6d8 50%, #c9a24b 62%, #8f6418 100%); background-size: 240% 100%; -webkit-background-clip: text; background-clip: text; animation: shimmer 2.4s ease-out forwards; filter: drop-shadow(0 4px 12px rgba(201,162,75,.35)); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.chip { padding: 5px 11px; border-radius: 999px; background: rgba(255,255,255,.07); font-size: 12.5px; font-weight: 700; }
.chip.brass { background: rgba(201,162,75,.18); color: var(--massing-ljus); }
.card-sheet { border-radius: 14px; padding: 12px 12px 8px; background: var(--linen), linear-gradient(160deg, #fbf7ee, #ebe2cd); color: var(--blacka); box-shadow: 0 8px 20px rgba(0,0,0,.35); }
.score { width: 100%; border-collapse: collapse; font-size: 14px; text-align: center; font-variant-numeric: tabular-nums; }
.score th, .score td { padding: 6px 2px; }
.score th { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: #6e624c; font-weight: 700; }
.score tr + tr td { border-top: 1px solid rgba(110,90,60,.22); }
.score td:first-child, .score th:first-child { text-align: left; padding-left: 2px; font-weight: 600; }
.circ { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1.6px solid var(--kort-rod); color: var(--kort-rod); font-weight: 800; }
.sq { display: inline-grid; place-items: center; width: 26px; height: 26px; border: 1.6px solid var(--blacka); font-weight: 800; }
.sheet-foot { font-size: 11px; color: #7a6e57; text-align: right; padding-top: 4px; letter-spacing: .04em; }
.primary { border: 0; border-radius: 999px; min-height: 50px; padding: 0 24px; font-weight: 800; font-size: 16px; cursor: pointer; color: #20180a;
  background: linear-gradient(180deg, var(--massing-ljus), var(--massing)); box-shadow: inset 0 -3px 0 rgba(0,0,0,.18), 0 6px 18px rgba(201,162,75,.3); }
.ghost { border: 1px solid var(--line); background: transparent; border-radius: 999px; min-height: 50px; padding: 0 20px; font-weight: 700; cursor: pointer; }
.row { display: flex; gap: 10px; flex-wrap: wrap; }
.row > * { flex: 1 1 auto; }
.steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.steps li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: start; }
.steps li > div { display: grid; gap: 2px; }
.steps .no { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--massing); color: var(--massing-ljus); display: grid; place-items: center; font-family: var(--font-display); font-weight: 650; }
.steps b { font-family: var(--font-display); font-weight: 650; font-size: 17px; }
.steps span { color: #c9d1d6; font-size: 14px; }
.minis { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.card.mini { position: relative; width: 32px; height: 44px; border-radius: 5px; padding-top: 3px; cursor: default; }
.card.mini .rk { font-size: 16px; }
.card.mini .su { width: 12px; height: 12px; }
.card.mini .tag { display: none; }
.minis .arrow { color: var(--massing); }
.steps .card.mini, .steps .card.mini span { color: var(--blacka); font-size: inherit; }
.steps .card.mini.red, .steps .card.mini.red span { color: var(--kort-rod); }
.steps .card.mini .rk { font-size: 16px; }

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

/* ---------- career: hub ---------- */
.hub { display: grid; gap: 14px; padding-bottom: 96px; }
.hub-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 14px; border-radius: 20px;
  background: linear-gradient(140deg, rgba(47,111,126,.35), rgba(18,38,58,.85)); border: 1px solid var(--line); }
.avatar { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); font-weight: 650; font-size: 22px; color: var(--natt);
  background: radial-gradient(circle at 35% 30%, var(--massing-ljus), var(--massing) 65%, #8a6418); box-shadow: 0 0 0 2px rgba(241,217,154,.35); }
.who { min-width: 0; display: grid; gap: 2px; }
.who b { font-family: var(--font-display); font-weight: 650; font-size: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.who span { font-size: 13px; color: var(--dim); }
.purse { display: grid; justify-items: end; gap: 4px; font-weight: 800; font-variant-numeric: tabular-nums; }
.coin { display: inline-block; width: .95em; height: .95em; border-radius: 50%; vertical-align: -.12em; background: radial-gradient(circle at 35% 30%, #fff1c4, var(--massing) 55%, #8a6418); box-shadow: inset 0 0 0 1.2px rgba(80,50,0,.35); }
.linkbtn { border: 0; background: none; color: var(--massing-ljus); font-weight: 700; font-size: 12.5px; cursor: pointer; padding: 0; text-decoration: underline; text-underline-offset: 3px; }
.section-h { display: flex; justify-content: space-between; align-items: end; gap: 10px; padding: 6px 2px 0; }
.section-h h2 { margin: 0; font-family: var(--font-display); font-weight: 650; font-size: 24px; line-height: 1.05; }
.section-h p { margin: 2px 0 0; color: var(--dim); font-size: 13.5px; }
.section-h .tag { font-size: 12px; font-weight: 700; color: var(--massing-ljus); white-space: nowrap; }
.quick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.qbtn { display: grid; gap: 2px; padding: 12px 10px; border-radius: 16px; border: 1px solid var(--line); background: rgba(18,38,58,.85); text-align: left; cursor: pointer; min-height: 72px; }
.qbtn b { font-size: 14px; }
.qbtn small { color: var(--dim); font-size: 11.5px; line-height: 1.3; }
.resume { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 18px; border: 0; cursor: pointer; text-align: left;
  background: linear-gradient(110deg, var(--massing-ljus), var(--massing)); color: #20180a; }
.resume b { font-family: var(--font-display); font-size: 19px; display: block; }
.resume small { font-size: 13px; }
.course-band { border-radius: 18px; overflow: hidden; border: 1px solid var(--line); background: rgba(12,26,40,.85); }
.course-head { padding: 14px 16px 12px; display: flex; justify-content: space-between; gap: 10px; align-items: end; }
.course-head h3 { margin: 0; font-family: var(--font-display); font-weight: 650; font-size: 22px; }
.course-head p { margin: 2px 0 0; font-size: 13px; color: var(--dim); }
.course-head.skargard { background: linear-gradient(120deg, rgba(47,111,126,.65), rgba(18,38,58,0)); }
.course-head.fjall { background: linear-gradient(120deg, rgba(110,140,175,.55), rgba(18,38,58,0)); }
.course-head.dyner { background: linear-gradient(120deg, rgba(200,160,90,.5), rgba(18,38,58,0)); }
.events { display: grid; }
.ev { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 12px 16px; border: 0; border-top: 1px solid rgba(201,162,75,.14); background: transparent; text-align: left; cursor: pointer; }
.ev:disabled { cursor: default; opacity: .5; }
.ev b { font-size: 15px; }
.ev .meta { grid-column: 1; font-size: 12.5px; color: var(--dim); display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ev .right { grid-column: 2; grid-row: 1 / span 2; text-align: right; font-size: 12.5px; color: var(--dim); display: grid; gap: 2px; justify-items: end; }
.ev .right b { font-size: 14px; color: var(--massing-ljus); font-variant-numeric: tabular-nums; }
.fmt { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; background: rgba(47,111,126,.45); color: #cfe9ec; }
.fmt.major { background: rgba(201,162,75,.3); color: var(--massing-ljus); }
.fmt.kval { background: rgba(255,255,255,.1); color: var(--text); }
.done-mark { color: var(--fairway); font-weight: 800; }
.locked-row { display: flex; gap: 8px; align-items: center; padding: 12px 16px; border-top: 1px solid rgba(201,162,75,.14); font-size: 13px; color: var(--dim); }
.locked-row svg { width: 16px; height: 16px; flex: none; }

.nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; justify-content: center;
  padding: 10px max(12px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
  background: linear-gradient(180deg, rgba(7,18,29,0), rgba(7,18,29,.94) 40%); }
.nav-in { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; width: 100%; max-width: 480px; padding: 5px; border-radius: 20px; background: rgba(18,38,58,.95); border: 1px solid var(--line); }
.nav button { border: 0; background: transparent; border-radius: 15px; padding: 7px 4px; font-weight: 700; font-size: 12px; color: var(--dim); cursor: pointer; display: grid; justify-items: center; gap: 2px; }
.nav button svg { width: 20px; height: 20px; }
.nav button[aria-pressed="true"] { background: var(--linne); color: var(--natt); }

.panel { padding: 14px 16px; border-radius: 18px; background: rgba(12,26,40,.85); border: 1px solid var(--line); display: grid; gap: 10px; }
.panel h3 { margin: 0; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--massing); font-weight: 800; }
.slotrow { display: grid; gap: 6px; }
.tierrow { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid rgba(201,162,75,.12); }
.tierrow:first-of-type { border-top: 0; }
.tierrow svg { width: 26px; height: 26px; color: var(--massing-ljus); }
.tierrow b { font-size: 14.5px; }
.tierrow small { display: block; color: var(--dim); font-size: 12.5px; line-height: 1.35; }
.pips5 { display: inline-flex; gap: 3px; margin-left: 6px; vertical-align: 1px; }
.pips5 i { width: 7px; height: 7px; transform: rotate(45deg); background: rgba(255,255,255,.14); }
.pips5 i.on { background: var(--massing); }
.sbtn { border: 1px solid var(--line); background: rgba(255,255,255,.04); border-radius: 999px; padding: 8px 14px; font-weight: 800; font-size: 13px; cursor: pointer; white-space: nowrap; min-height: 38px; }
.sbtn.buy { background: linear-gradient(180deg, var(--massing-ljus), var(--massing)); color: #20180a; border: 0; }
.sbtn.on { background: var(--linne); color: var(--natt); border: 0; }
.sbtn:disabled { opacity: .45; cursor: default; }
.table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.table td, .table th { padding: 8px 6px; text-align: left; border-top: 1px solid rgba(201,162,75,.12); }
.table th { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--massing); border-top: 0; font-weight: 800; }
.table td.num, .table th.num { text-align: right; }
.table tr.me td { background: rgba(201,162,75,.16); color: var(--massing-ljus); font-weight: 800; }
.table tr.rival td:nth-child(2)::after { content: " · rival"; color: var(--flaggrod); font-size: 11px; font-weight: 800; }
.table tr.cut td { border-top: 2px dashed var(--flaggrod); }
.nat { color: var(--dim); font-size: 11px; font-weight: 700; margin-left: 4px; }
.stats4 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.stats4 div { padding: 10px; border-radius: 12px; background: rgba(255,255,255,.04); font-size: 12px; color: var(--dim); }
.stats4 b { display: block; font-family: var(--font-display); font-size: 22px; color: var(--text); font-variant-numeric: tabular-nums; }
.achrow { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid rgba(201,162,75,.12); }
.achrow .m { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.06); color: rgba(255,255,255,.3); }
.achrow.done .m { background: radial-gradient(circle at 35% 30%, #fff1c2, var(--massing) 60%, #8a6418); color: var(--natt); }
.achrow b { font-size: 14px; } .achrow small { display: block; color: var(--dim); font-size: 12.5px; }

/* ---------- career: play additions ---------- */
.hud-title .back { width: 30px; height: 30px; margin-right: 6px; vertical-align: 2px; display: inline-grid; }
.hud-title .back svg { width: 16px; height: 16px; }
.status { font-size: 12px; font-weight: 800; padding: 3px 9px; border-radius: 999px; background: rgba(201,162,75,.2); color: var(--massing-ljus); white-space: nowrap; font-variant-numeric: tabular-nums; }
.status.up { background: rgba(111,163,91,.3); color: #cfe9b8; }
.status.down { background: rgba(200,64,47,.3); color: #ffc9bd; }
.mod { margin-left: 8px; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; background: rgba(110,140,175,.35); color: #dbe7f5; }
.questbar { margin-top: 6px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 6px 12px; border-radius: 12px; background: rgba(18,38,58,.85); border: 1px dashed var(--line); font-size: 13px; }
.questbar .qk { font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--massing); }
.questbar b { color: var(--massing-ljus); font-variant-numeric: tabular-nums; }
.questbar.ok { border-style: solid; border-color: var(--fairway); }
.questbar.ok .qk { color: var(--fairway); font-size: 15px; }
.specials { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.specials .club { min-height: 44px; grid-template-columns: auto minmax(0, 1fr); justify-items: start; align-items: center; text-align: left; padding: 6px 10px; }
.club { position: relative; }
.club em { position: absolute; top: -6px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--massing); color: #20180a; font-style: normal; font-weight: 800; font-size: 11px; display: grid; place-items: center; }
.card.hint, .club.hint, .stock.hint .back { animation: hintpulse 1s ease-in-out infinite; }
@keyframes hintpulse { 50% { box-shadow: 0 0 0 3px #8ef0de, 0 0 22px rgba(142,240,222,.8); filter: drop-shadow(0 0 10px rgba(142,240,222,.9)); } }
.card.back { background: radial-gradient(circle at 50% 50%, rgba(201,162,75,.55) 0 7%, transparent 8%), repeating-linear-gradient(45deg, rgba(201,162,75,.2) 0 2px, transparent 2px 8px), var(--natt-2); filter: none; box-shadow: inset 0 0 0 2px rgba(201,162,75,.4), 0 6px 12px rgba(6,12,20,.45); cursor: default; }
.card.back > * { visibility: hidden; }
.card.big.wild { box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 0 0 2.5px #8ef0de, 0 0 20px rgba(142,240,222,.6), 0 10px 22px rgba(0,0,0,.5); }

/* ---------- sheets ---------- */
.bigplace { font-family: var(--font-display); font-weight: 650; font-style: italic; font-size: 72px; line-height: .9; text-align: center; color: transparent;
  background: linear-gradient(100deg, #a8781f 0%, #f6e2a6 40%, #fff6d8 50%, #c9a24b 62%, #8f6418 100%); background-size: 240% 100%; -webkit-background-clip: text; background-clip: text; animation: shimmer 2.4s ease-out forwards; }
.money { text-align: center; font-size: 22px; font-weight: 800; color: var(--massing-ljus); font-variant-numeric: tabular-nums; }
.note { text-align: center; color: var(--text); }
.questres { display: flex; gap: 8px; align-items: center; justify-content: center; font-size: 14px; }
.questres.ok b { color: var(--fairway); } .questres.no b { color: var(--dim); }
.solve { border-radius: 12px; background: rgba(255,255,255,.04); padding: 10px 12px; font-size: 13.5px; display: grid; gap: 6px; }
.solve summary { cursor: pointer; font-weight: 700; color: var(--massing-ljus); }
.solve ol { margin: 6px 0 0; padding-left: 20px; display: grid; gap: 4px; color: var(--dim); }
.solve .r { color: var(--text); font-weight: 700; }
.field { width: 100%; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.06); color: var(--text); padding: 12px 14px; font: inherit; font-size: 16px; }
.small { font-size: 13px; color: var(--dim); }
.pick { display: grid; gap: 6px; max-height: 50vh; overflow-y: auto; }
.pick button { display: flex; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.04); text-align: left; cursor: pointer; }

/* compact play screen for short viewports (in-app browsers, phones with a quest bar) — toggled by fit() */
.play.tight #h-eyebrow { display: none; }
.play.tight .hud-title { font-size: 21px; }
.play.tight .hud-r { gap: 2px; }
.play.tight .strokes b { font-size: 24px; }
.play.tight .questbar { padding: 4px 10px; font-size: 12px; }
.play.tight .bottom { display: flex; flex-wrap: wrap; gap: 6px; }
.play.tight .tray { flex: 1 0 100%; padding: 7px 10px 7px 8px; gap: 10px; border-radius: 14px; }
.play.tight .stock { width: 42px; height: 58px; margin: 0 4px 12px 0; }
.play.tight .stock .l { bottom: -16px; font-size: 10px; }
.play.tight .card.big { width: 50px; height: 70px; padding-top: 6px; }
.play.tight .card.big .rk { font-size: 27px; }
.play.tight .card.big .su { width: 20px; height: 20px; }
.play.tight .coach b { font-size: 16px; }
.play.tight .coach span { font-size: 12px; line-height: 1.3; }
.play.tight #clubs { flex: 4 1 0; min-width: 0; gap: 5px; }
.play.tight #specials { flex: var(--n, 3) 1 0; min-width: 0; gap: 5px; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); }
.play.tight .club, .play.tight .specials .club { min-height: 0; padding: 6px 2px 5px; grid-template-columns: none; justify-items: center; text-align: center; border-radius: 11px; gap: 1px; }
.play.tight .club svg { width: 18px; height: 18px; }
.play.tight .club b { font-size: 11px; white-space: nowrap; }
.play.tight .club small { display: none; }

/* Thin symmetric trim in the course's colour: the edge of the screen is the frame. */
.course-wrap { box-shadow: 0 0 0 3px var(--trim, #7fb08a), 0 10px 26px rgba(0,0,0,.4); }

/* Postcards: shown at the start of a hole, behind the result, and collected in a book. No text in the image. */
.postcard { position: fixed; inset: 0; margin: 0; z-index: 65; background: #10202a center / cover no-repeat; opacity: 0; pointer-events: none; transition: opacity .35s ease; }
.postcard.show { opacity: 1; pointer-events: auto; cursor: pointer; }
.postcard figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 18px 22px; color: #fff; font-family: var(--font-display); font-size: 26px; font-weight: 650; background: linear-gradient(to top, rgba(4,10,16,.72), rgba(4,10,16,0)); }
.overlay.with-card { background: linear-gradient(rgba(5,12,20,.5), rgba(5,12,20,.5)), var(--card-bg) center / cover no-repeat; }
.book { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.book button { position: relative; aspect-ratio: 9 / 16; border: 0; border-radius: 8px; padding: 0; overflow: hidden; color: #fff; font: 600 11px/1.2 var(--font-ui); text-align: left; background: #1a2c3a center / cover no-repeat; }
.book button span { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 6px 6px; background: linear-gradient(to top, rgba(4,10,16,.8), rgba(4,10,16,0)); }
.book button.locked { background-image: none; cursor: default; color: #9fb0bb; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.book button.locked svg { position: absolute; top: 38%; left: 50%; width: 20px; height: 20px; margin-left: -10px; opacity: .6; }
.book-course { margin: 6px 0 2px; font-weight: 700; }

/* ---------- The painted look (Wordajong): one hole at a time, see applyPainted in game.js ---------- */
.backdrop { display: none; position: fixed; inset: 0; z-index: -1; overflow: hidden; background: #0d2a2c; }
.backdrop-on .backdrop { display: block; }
.backdrop-on { background: #0d2a2c; }
.backdrop i { position: absolute; inset: -12px; background: center top / cover no-repeat; }
.backdrop #bd-far { animation: drift-far 40s ease-in-out infinite alternate; }
.backdrop #bd-mid { animation: drift-mid 40s ease-in-out infinite alternate; }
.backdrop #bd-near { animation: drift-near 40s ease-in-out infinite alternate; }
@keyframes drift-far { to { transform: translateX(-3px); } }
@keyframes drift-mid { to { transform: translateX(-6px); } }
@keyframes drift-near { to { transform: translateX(-10px); } }
@media (prefers-reduced-motion: reduce) { .backdrop i { animation: none !important; } }

/* Cards: Wordajong's tiles. A light face, a thick edge underneath, a shadow, serif ink. */
.play.painted { --ink: #12383a; --ink-red: #c43e1c; --edge: #b39467; }
.play.painted .card {
  color: var(--ink);
  background: linear-gradient(145deg, rgba(255,255,255,.55) 0%, transparent 40%), var(--paper, none) center / 128px, linear-gradient(180deg, #fff8e8, #f3e7c8);
  box-shadow: inset 0 0 0 1px #c8ad7f, 0 2px 0 var(--edge), 2px 5px 7px rgba(0,0,0,.42);
}
.play.painted .card.red { color: var(--ink-red); }
/* Covered: the same card in shade, with the shadow of the card on top across its lower part */
.play.painted .card.cov {
  color: var(--ink);
  background: linear-gradient(to top, rgba(20,16,8,.5), rgba(20,16,8,0) 42%), linear-gradient(rgba(58,44,24,.36), rgba(58,44,24,.36)), var(--paper, none) center / 128px, linear-gradient(180deg, #fff8e8, #f3e7c8);
  box-shadow: inset 0 0 0 1px #8a7450, 0 2px 0 #6f5c3d, 2px 5px 7px rgba(0,0,0,.42);
}
.play.painted .card.cov.red { color: #6e1a06; }
/* Playable: glows warm yellow like the windows in the paintings */
.play.painted .card.play { box-shadow: inset 0 0 0 1px #e8b64c, 0 2px 0 var(--edge), 0 0 0 2px #ffd36b, 0 0 16px 2px rgba(255,196,84,.85), 0 8px 12px rgba(0,0,0,.45); animation: glow-win 2.2s ease-in-out infinite; }
@keyframes glow-win { 50% { box-shadow: inset 0 0 0 1px #e8b64c, 0 2px 0 var(--edge), 0 0 0 2px #ffe59a, 0 0 26px 4px rgba(255,196,84,1), 0 8px 12px rgba(0,0,0,.45); } }
.play.painted .card.flag { box-shadow: inset 0 0 0 1px #c8ad7f, 0 2px 0 var(--edge), 0 0 0 2px var(--flaggrod), 0 8px 12px rgba(0,0,0,.45); }
.play.painted .card.flag.cov { box-shadow: inset 0 0 0 1px #8a7450, 0 2px 0 #6f5c3d, 0 0 0 2px var(--flaggrod), 0 8px 12px rgba(0,0,0,.45); }
.play.painted .card.back { background: var(--card-back, none) center / cover, linear-gradient(160deg, #1d4a4a, #123335); }
.play.painted .stock .back { opacity: 0; }
.play.painted .stock { background: var(--card-back, none) center / cover, linear-gradient(160deg, #1d4a4a, #123335); border-radius: 7px; box-shadow: inset 0 0 0 1px #c8ad7f, 3px 3px 0 #0a1622, 0 6px 10px rgba(0,0,0,.5); }

/* The board lies open on the painting: no frame */
.play.painted .course-wrap { background: none; box-shadow: none; border: 0; border-radius: 0; overflow: visible; }
.app.glow .play.painted .course-wrap { box-shadow: none; filter: drop-shadow(0 0 14px rgba(241,190,110,.7)); }
.backdrop-on:has(#play[hidden]) .backdrop { display: none; }
/* Wordajong's scrim over its game background, here also holding the HUD at the top */
.backdrop::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(10,18,17,.5) 0, rgba(10,18,17,.28) 11%, rgba(10,18,17,.42) 60%, rgba(10,18,17,.72) 100%); }
.play.painted .hud { text-shadow: 0 1px 3px rgba(0,0,0,.7); }
.play.painted .hud-sub { color: var(--text); }
.backdrop #bd-near { z-index: 1; }
.play.painted .coach { padding-right: 46px; position: relative; }
.play.painted .coach::after { content: ""; position: absolute; right: 0; top: 50%; width: 42px; height: 42px; margin-top: -21px; border-radius: 50%; background: var(--seal, none) center / cover; box-shadow: 0 0 0 1.5px var(--massing), 0 3px 6px rgba(0,0,0,.45); }
.boss { display: grid; justify-items: center; gap: 6px; margin: 8px 0; }
.boss img { width: 112px; height: 112px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--massing), 0 6px 14px rgba(0,0,0,.5); }
.boss figcaption { font-family: var(--font-display); font-weight: 650; font-size: 16px; }
.play.painted .hud .eyebrow { color: #fff3d6; text-shadow: 0 1px 3px rgba(0,0,0,.9); }
.play.painted .pips i { box-shadow: 0 0 2px rgba(0,0,0,.7); }
/* A hole painted as one image: the board has no surface of its own, nothing drifts, and only the HUD gets a scrim */
.ground-on .backdrop i { animation: none; }
.ground-on #bd-mid, .ground-on #bd-near { display: none; }
.backdrop #bd-hole { inset: auto; display: none; background-size: 100% 100%; }
.ground-on .backdrop #bd-hole { display: block; }
.ground-on .backdrop::after { background: linear-gradient(rgba(10,18,17,.5), rgba(10,18,17,0) 84px); }
.ground-on .backdrop #bd-far { filter: blur(14px); }

/* Map, XP and perks */
.xpbar { height: 6px; border-radius: 3px; background: rgba(255,255,255,.12); overflow: hidden; margin: 4px 0 2px; }
.xpbar i { display: block; height: 100%; background: var(--massing); }
.nexthole { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 16px 18px; border: 0; border-radius: 20px; cursor: pointer; text-align: left; color: #20180a; background: linear-gradient(180deg, var(--massing-ljus), var(--massing)); box-shadow: 0 8px 20px rgba(0,0,0,.35); }
.nexthole > span { display: grid; gap: 1px; }
.nexthole b { font-family: var(--font-display); font-size: 23px; line-height: 1.1; }
.nexthole small { font-size: 13px; }
.nexthole .go { font-size: 19px; }
.mapband { border-radius: 18px; overflow: hidden; border: 1px solid var(--line); background: rgba(12,26,40,.85); }
.nodes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; padding: 10px; }
.node { display: grid; justify-items: center; gap: 1px; min-height: 58px; padding: 6px 2px; border-radius: 12px; border: 1px solid var(--line); background: rgba(18,38,58,.85); cursor: pointer; color: var(--text); }
.node b { font-family: var(--font-display); font-size: 18px; line-height: 1.1; }
.node small { font-size: 10.5px; color: var(--massing-ljus); }
.node svg { width: 15px; height: 15px; color: var(--dim); }
.node:disabled { opacity: .45; cursor: default; }
.node.now { border-color: var(--massing-ljus); box-shadow: 0 0 12px rgba(241,200,120,.5); }
.stars { display: inline-flex; gap: 1px; font-size: 12px; line-height: 1; }
.stars i { font-style: normal; color: rgba(255,255,255,.22); }
.stars i.on { color: var(--massing-ljus); }
.term + .center .stars { font-size: 28px; gap: 4px; }
.perks { display: grid; gap: 8px; margin: 10px 0; }
.perk { display: grid; gap: 2px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: rgba(18,38,58,.85); text-align: left; color: var(--text); }
button.perk { cursor: pointer; }
.perk b { font-family: var(--font-display); font-size: 17px; }
.perk span { font-size: 13px; color: var(--dim); }
.perk small { font-size: 11px; color: var(--massing-ljus); }

/* Card variants: drawn in code, on every card style */
.card .vmark { position: absolute; left: 3px; bottom: 2px; font-size: 12px; line-height: 1; }
.card.v-gold { box-shadow: inset 0 0 0 1.5px #d9a93a, inset 0 0 8px rgba(217,169,58,.55), 2px 3px 6px rgba(0,0,0,.35) !important; }
.card.v-gold .vmark { color: #b8861d; }
.card.v-star .vmark { color: #c9711d; font-size: 14px; }
.card.v-wild .vmark { color: #7a3fa8; font-size: 14px; }
.card.v-wild { box-shadow: inset 0 0 0 1.5px #9a6bc4, 2px 3px 6px rgba(0,0,0,.35) !important; }
.card.v-key .vmark, .card.v-lock .vmark { color: #1d5f66; font-size: 15px; }
.card.shut.v-lock::after, .card.shut.v-frost::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
.card.shut.v-lock::after { background: repeating-linear-gradient(135deg, rgba(20,40,44,.2) 0 4px, rgba(20,40,44,0) 4px 9px); box-shadow: inset 0 0 0 2px #1d5f66; }
.card.shut.v-frost::after { background: linear-gradient(160deg, rgba(190,230,245,.72), rgba(140,195,225,.5)); box-shadow: inset 0 0 0 1.5px #bfe6f5; }
.card.v-frost .vmark { z-index: 2; color: #2f7fa5; font-size: 14px; }
.card.v-twice .vmark { color: #8a3b1e; font: 800 12px/1 var(--font-ui); }
.card.v-twice { box-shadow: inset 0 0 0 2px #b0623c, 2px 3px 6px rgba(0,0,0,.35) !important; }
.card.v-twice.hit { box-shadow: inset 0 0 0 2px #e0a47f, 2px 3px 6px rgba(0,0,0,.35) !important; filter: saturate(.75); }
.card.v-tone .vmark { color: #5d3a78; font-size: 14px; }
.card.v-tone { box-shadow: inset 0 0 0 2px #7f5aa0, 2px 3px 6px rgba(0,0,0,.35) !important; }
.card.v-long .vmark { color: #1d5f66; font: 800 11px/1 var(--font-ui); }
.card.v-long { box-shadow: inset 0 0 0 2px #2d7f88, 2px 3px 6px rgba(0,0,0,.35) !important; }
.card.v-storm .vmark { color: #a2591a; font: 800 12px/1 var(--font-ui); }
.card.v-storm { box-shadow: inset 0 0 0 2px #d08a2e, 2px 3px 6px rgba(0,0,0,.35) !important; }
.card.v-storm.burnt { box-shadow: inset 0 0 0 2px #8a7a66, 2px 3px 6px rgba(0,0,0,.35) !important; }
.card.back .vmark { display: none; }
.play.painted .card.back { color: transparent; }
.play.painted .card.back svg { opacity: 0; }
.floater.gold { color: var(--massing-ljus); }
.wholinks { display: flex; flex-wrap: wrap; gap: 4px 12px; }

/* ---------- the guide ---------- */
.g-ring { position: fixed; z-index: 80; border-radius: 14px; pointer-events: none; opacity: 0;
  box-shadow: 0 0 0 3px var(--massing-ljus), 0 0 22px 6px rgba(241,217,154,.55), 0 0 0 200vmax rgba(5,12,20,.6);
  transition: left .3s ease, top .3s ease, width .3s ease, height .3s ease, box-shadow .3s ease; animation: gpulse 1.6s ease-in-out infinite; }
.g-ring.soft { box-shadow: 0 0 0 3px var(--massing-ljus), 0 0 22px 6px rgba(241,217,154,.55), 0 0 0 200vmax rgba(5,12,20,.28); }
@keyframes gpulse { 50% { outline: 3px solid rgba(241,217,154,.35); outline-offset: 6px; } }
.g-box { position: fixed; z-index: 85; display: grid; gap: 8px; padding: 14px 16px 16px; border-radius: 18px; color: var(--blacka);
  background: var(--linen), linear-gradient(160deg, #fbf7ee, #ebe2cd); box-shadow: 0 18px 50px rgba(0,0,0,.55), 0 0 0 1px rgba(201,162,75,.6); }
.g-box.in { animation: up .3s cubic-bezier(.2,.8,.2,1); }
.g-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.g-head .eyebrow { color: #8a6418; }
.g-quit { border: 0; background: none; padding: 4px 0; color: #6e624c; font-size: 12.5px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.g-title { font-family: var(--font-display); font-weight: 650; font-size: 22px; line-height: 1.1; color: var(--natt); }
.g-text { font-size: 15px; line-height: 1.45; color: #2c2a26; }
.g-text b { color: var(--natt); }
.g-minis { display: flex; gap: 8px; align-items: center; margin: 8px 0; }
.g-minis i { font-style: normal; font-size: 13px; color: #6e624c; font-weight: 700; }
.g-minis .card.mini, .g-minis .card.mini span { color: var(--blacka); }
.g-minis .card.mini.red, .g-minis .card.mini.red span { color: var(--kort-rod); }
.g-box .primary { min-height: 46px; }
.g-wait { font-size: 13px; font-weight: 800; color: #8a6418; display: flex; gap: 8px; align-items: center; }
.g-wait::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--massing); animation: gdot 1s ease-in-out infinite; }
@keyframes gdot { 50% { transform: scale(1.6); opacity: .5; } }
.guidebtn { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px 14px; border-radius: 16px; text-align: left; cursor: pointer;
  border: 1px solid rgba(241,217,154,.55); background: linear-gradient(110deg, rgba(201,162,75,.28), rgba(18,38,58,.85)); }
.guidebtn svg { width: 40px; height: 40px; color: var(--massing-ljus); }
.guidebtn b { display: block; font-family: var(--font-display); font-weight: 650; font-size: 18px; }
.guidebtn small { color: var(--dim); font-size: 12.5px; line-height: 1.35; }

/* ---------- levels and perks ---------- */
.lc-badge { width: 54px; height: 54px; flex: none; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); font-weight: 650; font-size: 26px; color: var(--natt);
  background: radial-gradient(circle at 35% 30%, #fff1c4, var(--massing-ljus) 35%, var(--massing) 70%, #8a6418); box-shadow: 0 0 0 3px rgba(241,217,154,.35), 0 0 22px rgba(241,200,120,.35); }
.lc-badge.big { width: 92px; height: 92px; font-size: 46px; animation: lvpop .7s cubic-bezier(.2,1.6,.4,1) backwards; }
@keyframes lvpop { 0% { transform: scale(0) rotate(-30deg); } }
.levelwrap { display: grid; gap: 8px; }
.levelcard { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: center; padding: 14px 16px; border-radius: 20px; text-align: left; cursor: pointer; position: relative;
  border: 1px solid rgba(241,217,154,.5); background: linear-gradient(120deg, rgba(201,162,75,.32), rgba(18,38,58,.9) 70%); box-shadow: 0 10px 28px rgba(0,0,0,.3); }
.lc-body { display: grid; gap: 5px; min-width: 0; }
.lc-body > b { font-family: var(--font-display); font-weight: 650; font-size: 20px; line-height: 1.1; }
.lc-bar { display: block; height: 12px; border-radius: 999px; background: rgba(255,255,255,.1); overflow: hidden; box-shadow: inset 0 0 0 1px rgba(241,217,154,.25); }
.lc-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--massing), var(--massing-ljus)); box-shadow: 0 0 10px rgba(241,200,120,.6); }
.lc-next { font-size: 13px; color: var(--linne); }
.lc-next b { color: var(--massing-ljus); }
.lc-more { position: absolute; top: 12px; right: 14px; font-size: 12px; font-weight: 700; color: var(--massing-ljus); text-decoration: underline; text-underline-offset: 3px; }
.pf-menu { display: grid; gap: 8px; margin: 12px 0; }
button.who { border: 0; padding: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
button.who b i { font-style: normal; font-size: 13px; color: var(--massing-ljus); }
.hub-top { gap: 8px; padding-bottom: 14px; }
.loginbtns { display: grid; gap: 8px; margin: 14px 0; }
.loginbtns a { display: flex; align-items: center; justify-content: center; text-decoration: none; }
a.linkbtn, a.sbtn { display: inline-block; color: inherit; text-decoration: none; }
a.linkbtn { text-decoration: underline; }
.lc-perks { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 4px; }
.pchip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(241,217,154,.45); background: rgba(201,162,75,.16); color: var(--massing-ljus); font: 700 12px/1.2 var(--font-ui); white-space: nowrap; }
button.pchip { cursor: pointer; }
.pchip.used { opacity: .45; text-decoration: line-through; }
.pchip.lv { background: rgba(18,38,58,.9); color: var(--linne); padding-left: 3px; }
.pchip.lv b { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--massing-ljus); color: var(--natt); font-family: var(--font-display); font-size: 12px; }
.perkrow { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 4px 0 0; }
.perkrow::-webkit-scrollbar { display: none; }
.play.tight .perkrow { padding-top: 2px; }
.play.tight .pchip { padding: 2px 8px; font-size: 11px; }
.club .pk { position: absolute; top: -6px; left: -4px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: var(--massing-ljus); color: var(--natt); font-style: normal; font-size: 11px; box-shadow: 0 0 8px rgba(241,200,120,.6); }
.club.boosted { border-color: rgba(241,217,154,.5); }
.coach.armed { padding: 6px 10px; border-radius: 12px; background: rgba(201,162,75,.18); box-shadow: inset 0 0 0 1px rgba(241,217,154,.5); }
.coach.armed b { color: var(--massing-ljus); }
.coach.armed span { color: var(--linne); }
.perk .pk-eff { font-size: 13px; color: var(--linne); padding-top: 4px; }
.perk .pk-eff b { font-family: var(--font-ui); font-size: 14px; color: var(--massing-ljus); }
.perk.dim { opacity: .75; }
button.perk { cursor: pointer; }
button.perk:hover, button.perk:focus-visible { border-color: var(--massing-ljus); }
.sheet.levelup { background: radial-gradient(120% 60% at 50% 0%, rgba(201,162,75,.35), transparent 60%), linear-gradient(180deg, #17304a, #0d1d2e); }
.lvburst { display: grid; place-items: center; padding-top: 4px; }
.xptable td { font-size: 13.5px; }
.xpbox { display: grid; gap: 7px; padding: 12px 14px; border-radius: 16px; background: rgba(12,26,40,.9); border: 1px solid rgba(241,217,154,.35); }
.xb-head { display: flex; align-items: center; gap: 10px; }
.xb-head .lc-badge { width: 38px; height: 38px; font-size: 18px; }
.xb-t { flex: 1; min-width: 0; font-size: 13px; font-weight: 700; color: var(--dim); font-variant-numeric: tabular-nums; }
.xb-gain { font-family: var(--font-display); font-weight: 650; font-size: 22px; color: var(--massing-ljus); }
.xb-bar { display: flex; height: 12px; border-radius: 999px; background: rgba(255,255,255,.1); overflow: hidden; }
.xb-bar i { height: 100%; }
.xb-old { background: var(--massing); }
.xb-new { background: linear-gradient(90deg, var(--massing-ljus), #fff6d8); box-shadow: 0 0 10px var(--massing-ljus); transition: width .8s cubic-bezier(.2,.8,.2,1); }
.xb-next { font-size: 13px; color: var(--linne); min-height: 1.2em; }
.xb-next b { color: var(--massing-ljus); }
.xpbox.up { animation: xpup 1s ease; border-color: var(--massing-ljus); }
.xpbox.up .lc-badge { animation: lvpop .6s cubic-bezier(.2,1.6,.4,1); }
@keyframes xpup { 30% { box-shadow: 0 0 0 3px var(--massing-ljus), 0 0 30px rgba(241,200,120,.7); } }
.g-minis .card.mini .tag, .steps .card.mini .tag { display: inline-flex; top: -12px; right: -34px; transform: scale(.85); color: #fff; }
.g-minis .card.mini .tag, .steps .card.mini .tag span { color: #fff; }
.minis, .g-minis { padding-right: 30px; padding-top: 8px; }
.g-acts { display: flex; gap: 14px; }
.g-hide { border: 0; background: none; padding: 4px 0; color: #6e624c; font-size: 12.5px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.g-more { border: 0; background: none; padding: 0; color: #8a6418; font: inherit; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.g-box.doing { padding: 10px 14px 12px; gap: 5px; }
.g-box.doing .g-title { font-size: 19px; }
.g-box.doing .g-text { font-size: 14.5px; line-height: 1.4; }
.g-box.min { padding: 0; background: none; box-shadow: none; }
.g-show { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 8px 12px; border-radius: 999px; border: 0; cursor: pointer; text-align: left;
  background: var(--linen), linear-gradient(160deg, #fbf7ee, #ebe2cd); color: var(--natt); box-shadow: 0 8px 24px rgba(0,0,0,.5), 0 0 0 1px rgba(201,162,75,.6); }
.g-show .eyebrow { color: #8a6418; }
.g-show b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-open { font-size: 12.5px; font-weight: 800; color: #8a6418; text-decoration: underline; }

/* ---------- hub header: one card for name, coins, level, XP and perks ---------- */
.hub-top { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 14px 16px 12px; align-items: stretch;
  background: linear-gradient(130deg, rgba(201,162,75,.22), rgba(18,38,58,.92) 60%); border-color: rgba(241,217,154,.4); }
.ht-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.ht-row .purse span:first-child { font-size: 18px; }
.ht-level { display: grid; gap: 6px; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; color: var(--text); }
.ht-xp { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; font-weight: 700; color: var(--dim); font-variant-numeric: tabular-nums; }
.ht-how { color: var(--massing-ljus); text-decoration: underline; text-underline-offset: 3px; }
.hub-top .lc-perks { padding: 0; }
.hub-top .wholinks { padding-top: 2px; border-top: 1px solid rgba(201,162,75,.15); padding-top: 8px; }
.hub-body { display: grid; gap: 12px; }
.hub-body > * { min-width: 0; }
.nexthole { width: 100%; }
.nexthole .go { display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px; border-radius: 999px; background: rgba(32,24,10,.88); color: var(--massing-ljus); font-family: var(--font-ui); font-size: 16px; }
.guidebtn { width: 100%; }
.course-head .small { white-space: nowrap; }
.ev-head { padding: 10px 16px; }
.ev-head h3 { font-size: 19px; }
.ev-head .eyebrow { font-size: 10px; }
.section-h { padding-top: 10px; }
/* on the other tabs the header keeps name, coins and the bar only */
.hub-top.compact { gap: 8px; padding-bottom: 14px; }
.hub-top.compact .lc-next, .hub-top.compact .lc-perks, .hub-top.compact .wholinks, .hub-top.compact .ht-how { display: none; }