/* AURA FARM — neon on wet concrete. The city is the canvas; this is the glass on top of it. No backdrop-filter, no
   large CSS filters (a founder's Chrome greys out on heavy compositing): glows are text-shadow and box-shadow only. */
:root { --ink: #0e001e; --cyan: #7df9ff; --pink: #ff2e88; --gold: #ffd34d; --red: #ff2d55; --warm: #ffd9a8; --dim: #b9a8d6;
  --mono: ui-monospace, "SF Mono", Menlo, monospace; --sys: -apple-system, "Hiragino Sans", "Noto Sans JP", "Noto Sans Thai", "Apple SD Gothic Neo", system-ui, sans-serif;
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px); }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: var(--ink); color: #fff; font: 600 16px/1.4 var(--sys); overflow: hidden; overscroll-behavior: none; user-select: none; -webkit-user-select: none; }
#city { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; display: block; }
.mute { position: fixed; z-index: 30; top: calc(10px + var(--safe-t)); right: 12px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); background: rgba(14,0,30,.6); color: #fff; display: grid; place-items: center; padding: 0; }
.mute svg { width: 20px; height: 20px; }
/* while farming, Morrow's painted eye owns the top-right corner (the coins fly into it): the sound button moves left */
body.playing .mute { right: auto; left: 12px; width: 36px; height: 36px; } body.playing .hud { padding-right: 0; padding-left: 44px; }
.screen { position: fixed; inset: 0; z-index: 10; display: flex; flex-direction: column; padding: calc(16px + var(--safe-t)) 18px calc(18px + var(--safe-b)); }
.kicker { margin: 0; font: 800 11px var(--mono); letter-spacing: .2em; color: var(--cyan); text-shadow: 0 0 10px rgba(125,249,255,.6); }

/* the title: over the city, at the top */
.title { justify-content: flex-start; gap: 10px; background: linear-gradient(180deg, rgba(14,0,30,.82) 0%, rgba(14,0,30,.2) 46%, rgba(14,0,30,0) 60%, rgba(14,0,30,.85) 86%); }
.title h1 { margin: 4px 0 0; font: 900 clamp(54px, 17vw, 84px)/.92 var(--sys); letter-spacing: -.03em; color: #fff; text-shadow: 3px 0 0 rgba(255,46,136,.85), -3px 0 0 rgba(0,229,255,.85), 0 0 34px rgba(255,46,136,.6); }
.glitch { animation: glitch 3.2s steps(1) infinite; }
@keyframes glitch { 0%, 92%, 100% { transform: none; clip-path: none; } 93% { transform: translateX(-4px); clip-path: inset(10% 0 55% 0); } 95% { transform: translateX(5px); clip-path: inset(50% 0 20% 0); } 97% { transform: translateX(-2px); } }
.tagline { margin: 0; font: 800 19px/1.3 var(--sys); max-width: 22em; text-shadow: 0 2px 12px rgba(0,0,0,.8); }
.friend { margin: 0; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--gold); background: rgba(255,211,77,.12); font-weight: 800; }
.rule { margin: auto 0 0; font-size: 14.5px; color: #e9ddff; text-shadow: 0 1px 8px #000; }
.go { min-height: 60px; border: 0; border-radius: 16px; background: linear-gradient(90deg, var(--pink), #b026ff); color: #fff; font: 900 20px var(--sys); letter-spacing: .02em; cursor: pointer; box-shadow: 0 0 0 1px rgba(255,255,255,.25) inset, 0 12px 34px rgba(255,46,136,.5); }
.go:active { transform: scale(.98); }
.ghost { min-height: 50px; border-radius: 14px; border: 1.5px solid rgba(255,255,255,.3); background: rgba(14,0,30,.55); color: #fff; font: 800 16px var(--sys); cursor: pointer; }
.fine { margin: 0; font-size: 12px; color: var(--dim); text-align: center; }

/* the farm */
.play { padding-bottom: calc(12px + var(--safe-b)); pointer-events: none; }
.play > * { pointer-events: auto; }
.hud { display: flex; gap: 8px; padding-right: 50px; }
.chip { white-space: nowrap; padding: 6px 10px; border-radius: 999px; font: 800 13px var(--mono); background: rgba(14,0,30,.72); border: 1px solid rgba(255,255,255,.18); }
.chip.decay { color: var(--red); border-color: rgba(255,45,85,.5); }
.chip.fee { color: var(--gold); border-color: rgba(255,211,77,.45); }
.toast { position: absolute; left: 14px; right: 14px; top: calc(56px + var(--safe-t)); z-index: 5; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 16px; background: rgba(28,6,46,.92); border: 1px solid rgba(255,46,136,.6); box-shadow: 0 10px 30px rgba(0,0,0,.5); font-weight: 800; animation: toastIn .28s cubic-bezier(.2,1.4,.4,1); }
.toast .eye { flex: none; width: 26px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 50% 50%, #000 0 22%, var(--red) 23% 48%, #fff 49%); }
@keyframes toastIn { from { transform: translateY(-30px); opacity: 0; } }
.trend { position: absolute; left: 0; right: 0; top: 30%; z-index: 6; display: grid; justify-items: center; gap: 6px; padding: 16px; background: linear-gradient(90deg, rgba(255,0,140,.0), rgba(255,0,140,.85) 20%, rgba(255,0,140,.85) 80%, rgba(255,0,140,0)); animation: trendIn .5s steps(4) both; }
.trend b { font: 900 clamp(26px, 8vw, 38px)/1 var(--sys); letter-spacing: .02em; text-shadow: 3px 0 0 rgba(0,229,255,.8); }
.trend span { font: 800 15px var(--sys); }
@keyframes trendIn { 0% { transform: scaleY(0); } 50% { transform: scaleY(1.2) skewX(-8deg); } 100% { transform: none; } }
.real { margin-top: auto; display: grid; grid-template-columns: 1.2fr 1fr 1.2fr; gap: 8px; padding: 8px 10px; border-radius: 12px; background: rgba(14,0,30,.55); opacity: .72; font: 700 11px var(--mono); color: var(--dim); }
.real small { display: block; letter-spacing: .14em; font-size: 9.5px; margin-bottom: 3px; }
.real .bar { display: block; height: 6px; border-radius: 3px; background: rgba(255,255,255,.12); overflow: hidden; } .real .bar b { display: block; height: 100%; width: 100%; background: var(--warm); transition: width .3s; }
.real .debt { color: #ffb4b4; font-size: 14px; } .dots { letter-spacing: 3px; font-size: 14px; color: var(--warm); }
.cards { margin-top: 10px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.card { position: relative; min-height: 118px; padding: 10px 8px; border-radius: 16px; border: 1.5px solid rgba(125,249,255,.55); background: linear-gradient(170deg, rgba(40,10,70,.94), rgba(14,0,30,.94)); color: #fff; display: grid; align-content: start; justify-items: center; gap: 4px; text-align: center; cursor: pointer; box-shadow: 0 0 18px rgba(125,249,255,.18), 0 10px 20px rgba(0,0,0,.4); overflow: hidden; animation: deal .3s cubic-bezier(.2,1.4,.4,1) both; }
.card:nth-child(2) { animation-delay: .04s; } .card:nth-child(3) { animation-delay: .08s; }
@keyframes deal { from { transform: translateY(24px) rotate(-3deg); opacity: 0; } }
.card .k { font: 900 34px/1 "Hiragino Mincho ProN", "Yu Mincho", serif; color: var(--cyan); text-shadow: 0 0 14px rgba(125,249,255,.7); }
.card b { font: 900 13.5px/1.15 var(--sys); }
.card small { font: 800 11px var(--mono); color: #ffb4b4; }
.card .cd { position: absolute; inset: 0; background: conic-gradient(rgba(14,0,30,.78) var(--cd, 0%), transparent 0); pointer-events: none; }
.card.drop { border-color: var(--gold); background: linear-gradient(170deg, rgba(110,60,0,.95), rgba(40,10,0,.95)); box-shadow: 0 0 26px rgba(255,211,77,.55); animation: deal .3s both, dropPulse .7s ease-in-out infinite; }
.card.drop .k { color: var(--gold); text-shadow: 0 0 18px rgba(255,211,77,.9); } .card.drop small { color: var(--gold); }
@keyframes dropPulse { 50% { transform: scale(1.04); } }
.card.pop { animation: pop .22s ease-out; } @keyframes pop { 50% { transform: scale(.92); } }
.neighbor { margin: 10px auto 0; display: flex; align-items: center; gap: 10px; padding: 8px 14px; border: 0; border-radius: 999px; background: rgba(255,217,168,.06); color: rgba(255,217,168,.42); font: 700 12.5px var(--sys); cursor: pointer; touch-action: none; transition: color .3s, background .3s; }
.neighbor .ring { width: 18px; height: 18px; border-radius: 50%; background: conic-gradient(var(--warm) var(--p, 0%), rgba(255,217,168,.2) 0); }
.neighbor.holding { color: var(--warm); background: rgba(255,217,168,.18); }

.chip.asc { font-family: 'Hiragino Mincho ProN', 'Yu Mincho', serif; font-size: 15px; padding: 4px 10px; color: #1a0a00; background: var(--gold); border-color: var(--gold); }
.cards.locked { opacity: .35; filter: none; pointer-events: none; }
/* Morrow's offer: both buttons are Morrow's */
.offer { position: absolute; left: 14px; right: 14px; top: 22%; z-index: 7; display: grid; gap: 8px; padding: 16px 14px 18px; border-radius: 20px; overflow: hidden;
  background: linear-gradient(170deg, rgba(60,0,30,.97), rgba(14,0,30,.97)); border: 1.5px solid var(--red); box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset, 0 0 40px rgba(255,45,85,.45), 0 20px 50px rgba(0,0,0,.6);
  animation: offerIn .32s cubic-bezier(.2,1.5,.4,1); }
@keyframes offerIn { from { transform: translateY(24px) scale(.94); opacity: 0; } }
.okick { margin: 0; display: flex; align-items: center; gap: 8px; font: 800 11px var(--mono); letter-spacing: .18em; color: #ff8aa5; }
.okick .eye { flex: none; width: 24px; height: 14px; border-radius: 50%; background: radial-gradient(circle, #000 0 22%, var(--red) 23% 48%, #fff 49%); }
.otitle { font: 900 clamp(22px, 7vw, 30px)/1.05 var(--sys); text-shadow: 2px 0 0 rgba(0,229,255,.7); }
.osub { margin: 0; color: #f1e4ff; font-size: 15px; }
.opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
.opt { min-height: 74px; padding: 10px 8px; border-radius: 14px; border: 1.5px solid rgba(255,255,255,.28); background: rgba(255,255,255,.07); color: #fff; display: grid; gap: 4px; align-content: center; text-align: center; cursor: pointer; touch-action: manipulation; }
.opt b { font: 900 15px/1.15 var(--sys); } .opt small { font: 800 11px/1.3 var(--mono); color: var(--gold); }
.opt:active { transform: scale(.97); background: rgba(255,46,136,.25); }
.otimer { position: absolute; left: 0; bottom: 0; height: 4px; width: 100%; background: var(--red); transform-origin: left; }
@keyframes otimer { to { transform: scaleX(0); } }
:lang(th) .okick { letter-spacing: 0; }

/* the result */
.end > * { flex-shrink: 0; }
.end { overflow-y: auto; gap: 10px; background: linear-gradient(180deg, rgba(14,0,30,.55), rgba(14,0,30,.94) 34%); user-select: text; -webkit-user-select: text; }
.end.offline { background: linear-gradient(180deg, rgba(60,30,20,.2), rgba(40,22,18,.92) 34%); }
.arch { margin: 6px 0 0; font: 900 clamp(34px, 11vw, 54px)/1 var(--sys); letter-spacing: -.02em; text-shadow: 3px 0 0 rgba(255,46,136,.8), -3px 0 0 rgba(0,229,255,.8); }
.end.offline .arch { text-shadow: 0 0 30px rgba(255,217,168,.6); color: var(--warm); }
.etitle { margin: 0; font: 900 20px var(--sys); } .esub { margin: 0; color: #e9ddff; }
.stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
.stat { padding: 6px 5px 7px; border-radius: 10px; display: grid; align-content: space-between; gap: 2px; text-align: center; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); }
.stat small { display: block; font: 700 8.5px/1.15 var(--mono); letter-spacing: .02em; color: var(--dim); text-transform: uppercase; overflow-wrap: anywhere; } .stat b { font: 900 clamp(12px, 3.9vw, 16px) var(--mono); letter-spacing: -.03em; white-space: nowrap; }
.backend { padding: 12px 14px; border-radius: 14px; background: #04000a; border: 1px solid rgba(0,229,255,.35); font: 600 12.5px/1.55 var(--mono); color: #8affc1; }
.backend b { display: block; color: var(--cyan); letter-spacing: .18em; font-size: 11px; margin-bottom: 6px; }
.backend pre { margin: 0; white-space: pre-wrap; font: inherit; }
.backend pre.warm { color: var(--warm); font: 700 14px/1.6 var(--sys); } .backend pre.warm:not(:empty) { margin-top: 10px; padding-top: 10px; border-top: 1px dashed rgba(255,217,168,.3); }
.ghost.vid { border-color: rgba(125,249,255,.55); color: var(--cyan); }
.ghost.vid.ready { background: rgba(125,249,255,.16); color: #fff; }
.go.ascend { background: linear-gradient(90deg, #ffd34d, #ff9d00); color: #1a0a00; font-size: 16px; min-height: 56px; box-shadow: 0 0 0 1px rgba(255,255,255,.4) inset, 0 10px 30px rgba(255,170,0,.45); }
.rc .quote { font-style: italic; color: #f3e9ff; }
.row { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; } .door:not(.nightdoor) { display: block; padding: 14px; border-radius: 14px; background: rgba(255,217,168,.12); color: var(--warm); text-decoration: none; font-weight: 800; text-align: center; }
.rc { padding: 12px 14px; border-radius: 12px; border: 1px dashed rgba(255,255,255,.25); font-size: 13.5px; color: #ddd; } .rc b { color: var(--gold); font: 800 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; } .rc p { margin: 6px 0 0; }
/* letter-spacing pulls Thai vowels and tone marks off their consonants; CJK headlines need no tracking either */
html:lang(ko) { word-break: keep-all; } html:lang(ja) { line-break: strict; }
:lang(th) .kicker, :lang(th) .real small, :lang(th) .stat small, :lang(th) .backend b, :lang(th) .rc b, :lang(th) .trend b,
:lang(ja) .title h1, :lang(ko) .title h1, :lang(th) .title h1, :lang(ja) .arch, :lang(ko) .arch, :lang(th) .arch { letter-spacing: 0; }
:lang(th) .arch, :lang(th) .title h1 { line-height: 1.25; }
@media (prefers-reduced-motion: reduce) { .glitch, .card, .card.drop, .toast, .trend, .offer { animation: none !important; } }
:lang(ja) .rc .quote, :lang(ko) .rc .quote, :lang(th) .rc .quote { font-style: normal; }

/* the night, the compare, the fence, Riku (2026-10-26) */
.night { margin: 6px 0 0; font: 800 12px var(--mono); letter-spacing: .12em; color: var(--gold); text-shadow: 0 0 10px rgba(255,211,77,.5); }
.riku { margin: 0; padding: 12px 14px; border-radius: 14px; background: rgba(255,217,168,.1); border: 1px solid rgba(255,217,168,.4); color: var(--warm); font: 800 15px/1.4 var(--sys); }
.cmp { padding: 12px 14px; border-radius: 14px; background: rgba(14,0,30,.6); border: 1px solid rgba(125,249,255,.35); }
.cmp > b { display: block; font: 800 11px var(--mono); letter-spacing: .16em; color: var(--cyan); margin-bottom: 8px; }
.cmprow { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cmprow small { display: block; font: 700 11px var(--mono); color: var(--dim); } .cmprow span { font: 900 15px/1.15 var(--sys); }
.fence { padding: 14px; border-radius: 16px; background: linear-gradient(180deg, rgba(255,217,168,.14), rgba(255,217,168,.04)); border: 1px solid rgba(255,217,168,.45); }
.fence > b { display: block; font: 900 22px var(--sys); letter-spacing: .06em; color: var(--warm); }
.fence > p { margin: 4px 0 10px; font: 700 14px/1.35 var(--sys); color: #fff3e4; }
.planks { display: flex; flex-wrap: wrap; gap: 6px; }
.planks span { position: relative; padding: 14px 10px 8px; min-width: 64px; border-radius: 4px 4px 2px 2px; background: linear-gradient(180deg, #c08a55, #8a5a33); color: #2a1408; font: 900 14px/1.1 var(--sys);
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.18), 0 2px 0 rgba(0,0,0,.35); clip-path: polygon(0 10px, 50% 0, 100% 10px, 100% 100%, 0 100%); }
.planks span:nth-child(odd) { transform: rotate(-1.5deg); } .planks span:nth-child(even) { transform: rotate(1.2deg); }
.planks span small { display: block; margin-top: 3px; font: 800 9.5px var(--mono); color: rgba(42,20,8,.75); }
.planks span.me { background: linear-gradient(180deg, #ffe08a, #d9a441); }
.planks span.empty { background: repeating-linear-gradient(180deg, rgba(255,217,168,.25) 0 6px, transparent 6px 10px); color: var(--warm); }
.sign { display: flex; gap: 8px; margin-top: 12px; }
.sign input { flex: 1; min-width: 0; min-height: 50px; padding: 0 12px; border-radius: 12px; border: 1.5px solid var(--warm); background: rgba(14,0,30,.7); color: #fff; font: 800 17px var(--sys); user-select: text; -webkit-user-select: text; }
.sign .go { min-height: 50px; font-size: 16px; padding: 0 14px; background: linear-gradient(90deg, #d9a441, #c06a2a); }
html[lang=ja] .title h1, html[lang=ko] .title h1 { font-size: clamp(46px, 14vw, 72px); word-break: keep-all; line-break: strict; }
.opt .pic { display: block; width: 56px; height: 56px; margin: 0 auto 6px; color: var(--gold); filter: drop-shadow(0 0 10px rgba(255,211,77,.45)); }
.opt .pic svg { width: 100%; height: 100%; display: block; }
#ofB .pic { color: #ff8aa5; filter: drop-shadow(0 0 10px rgba(255,45,85,.45)); }
.best { padding: 14px 16px; border-radius: 14px; background: rgba(255,45,85,.12); border: 1.5px solid rgba(255,45,85,.55); }
.best b { display: block; font: 800 11px var(--mono); letter-spacing: .16em; color: #ff8aa5; margin-bottom: 6px; } .best p { margin: 0; font: 900 19px/1.3 var(--sys); }
.arcart { display: block; width: calc(100% + 36px); margin: calc(-16px - var(--safe-t)) -18px 0; height: min(34vh, 125vw); object-fit: cover; object-position: 50% 30%; -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent); mask-image: linear-gradient(180deg, #000 70%, transparent); }
.arcart + .kicker { margin-top: -48px; position: relative; }

/* one ending screen (games lift 11-11): the painting, the label, five numbers, THE share, the face and the door. The rest folds. */
.end .go#share { min-height: 58px; }
.end .ghost { min-height: 46px; font-size: 15px; } .end .go.ascend { min-height: 46px; font-size: 14px; padding: 0 8px; }
.more { border-radius: 14px; border: 1px solid rgba(255,255,255,.18); background: rgba(14,0,30,.5); }
.more summary { list-style: none; padding: 10px 14px; font: 800 12px var(--mono); letter-spacing: .06em; color: var(--dim); cursor: pointer; display: flex; justify-content: space-between; gap: 10px; }
.more summary::-webkit-details-marker { display: none; } .more summary::after { content: "＋"; color: var(--cyan); } .more[open] summary::after { content: "－"; }
.more[open] { padding: 0 10px 10px; } .more[open] summary { margin: 0 -10px; } .more > :not(summary) { margin-top: 10px; } .more .ghost { display: block; width: 100%; }
.more.warm { border-color: rgba(255,217,168,.6); } .more.warm summary { color: var(--warm); }
/* wide screens: the ending is a phone-wide column over the city */
.end { padding-left: max(18px, calc(50vw - 230px)); padding-right: max(18px, calc(50vw - 230px)); }
.arcart { width: auto; margin-left: calc(-1 * max(18px, calc(50vw - 230px))); margin-right: calc(-1 * max(18px, calc(50vw - 230px))); }
@media (min-width: 700px) { .arcart { margin-left: 0; margin-right: 0; border-radius: 0 0 18px 18px; height: 38vh; } }
.end .door { margin-top: auto; }
@media (max-height: 640px) {
  .end { gap: 7px; } .arcart { height: 24vh; } .end .esub { display: none; } .end .go#share { min-height: 50px; font-size: 18px; } .end .ghost, .end .go.ascend { min-height: 40px; }
  .more summary { padding: 7px 12px; } .end > .fine { display: none; } .stat { padding: 4px 3px 5px; }
}
.more .store { display: block; padding: 12px; border-radius: 14px; background: rgba(255,217,168,.12); color: var(--warm); text-decoration: none; font-weight: 800; text-align: center; }
/* depth and light on the ending (games lift 11-11; --dx/--dy from shared/depth.js): the painting drifts inside its frame, a neon light slides over it */
.arcart { object-position: calc(50% + var(--dx, 0) * 7%) calc(30% + var(--dy, 0) * 7%); }
.end::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 42vh; pointer-events: none; background: radial-gradient(48% 62% at calc(50% + var(--dx, 0) * 32%) calc(38% + var(--dy, 0) * 18%), rgba(255,150,225,.24), rgba(255,150,225,0) 70%); }
.end.offline::before { background: radial-gradient(48% 62% at calc(50% + var(--dx, 0) * 32%) calc(38% + var(--dy, 0) * 18%), rgba(255,226,170,.3), rgba(255,226,170,0) 70%); }