/* 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; }
.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.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 { 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; }