/* Game feel layer · loaded last. Targeted fixes for phone layout, readable panels, tactile controls. */
:root{--gf-gold:#ffd27a;--gf-gold-deep:#a8782a;--gf-up:#58d39a;--gf-down:#ff8473;--gf-ink:#10232d}
/* Brand never truncates */
header .brand{white-space:nowrap;font-size:clamp(12px,3.4vw,16px)!important;letter-spacing:.06em}
/* ---------- Stat meters: tidy 3×2 grid on phones ---------- */
.nation-metrics>div{position:relative;min-width:0}
.nation-metrics>div>span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nation-metrics>div>b{font-variant-numeric:tabular-nums;transition:color .3s}
.nation-metrics i{transition:width .9s cubic-bezier(.2,.9,.3,1)}
@media(max-width:640px){
 .nation-metrics{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px 12px!important;padding:12px 14px!important}
 .nation-metrics>div>span{font-size:10px!important;letter-spacing:.08em}
 .nation-metrics>div>b{font-size:22px!important}
 .nation-metrics>div>b small{font-size:10px;opacity:.55}
}
.nation-metrics>div.gf-up>b{color:var(--gf-up)!important}
.nation-metrics>div.gf-down>b{color:var(--gf-down)!important}
.gf-float{position:absolute;right:0;top:-4px;font:800 13px/1 RepublicText,Arial,sans-serif;padding:3px 6px;border-radius:8px;pointer-events:none;animation:gfFloat 1.6s ease-out forwards;z-index:3}
.gf-float.up{background:#1f6b48;color:#c9ffe3}.gf-float.down{background:#7a2a22;color:#ffd9d2}
@keyframes gfFloat{0%{opacity:0;transform:translateY(8px) scale(.7)}15%{opacity:1;transform:translateY(0) scale(1.1)}30%{transform:scale(1)}100%{opacity:0;transform:translateY(-22px)}}
/* ---------- Building points: a readable pill over the header art ---------- */
.nation-treasury{background:#0b1d27c7;backdrop-filter:blur(6px);border:1px solid #ffd27a55!important;border-radius:14px!important;padding:5px 12px!important;text-align:right}
.nation-treasury>span{color:#ffe6ad!important;letter-spacing:.12em}
.nation-treasury>b{color:var(--gf-gold)!important;font-variant-numeric:tabular-nums;display:inline-block}
.nation-treasury.gf-bump>b{animation:gfBump .6s cubic-bezier(.2,1.6,.4,1)}
@keyframes gfBump{40%{transform:scale(1.35);color:#fff}}
/* ---------- Choice cards: tactile, clear selected state ---------- */
.nation-decision{cursor:pointer;border-radius:16px!important;transition:transform .12s,box-shadow .2s,border-color .2s,background .2s!important;-webkit-tap-highlight-color:transparent}
.nation-decision:active{transform:scale(.98)}
.nation-decision:has(input:checked){background:linear-gradient(#fff8e2,#fbecc4)!important;border:2px solid #d9a23e!important;box-shadow:0 0 0 4px #ffd27a40,0 8px 20px #a8782a33!important}
.nation-decision:has(input:checked) .nation-choice-letter{background:#d9a23e!important;color:#fff!important;transform:scale(1.08)}
.nation-choice-letter{transition:transform .2s,background .2s}
.nation-decisions:has(input:checked) .nation-decision:not(:has(input:checked)){opacity:.72}
.nation-effect-tags small.gain{background:#e1f4e6!important;border-color:#9fd2ae!important;color:#1d6a3e!important}
/* ---------- Confirm bar: sticks above the bottom nav while you read the choices ---------- */
.nation-confirm-bar{position:sticky;bottom:calc(84px + env(safe-area-inset-bottom));z-index:20;border-radius:16px!important;box-shadow:0 10px 30px #0b1d2740;transition:transform .25s}
@media(min-width:641px){.nation-confirm-bar{bottom:16px}}
.nation-confirm-bar small:empty{display:none}
#nationConfirmDecision,.nation-enact{min-height:54px;border-radius:14px!important;font-size:16px!important;font-weight:800!important;transition:transform .08s,box-shadow .2s}
#nationConfirmDecision:not(:disabled),.nation-enact:not(:disabled){background:linear-gradient(#ffd98a,#e7b558)!important;color:#2a1d08!important;border:0!important;box-shadow:0 4px 0 var(--gf-gold-deep),0 10px 22px #e7b55855!important;animation:gfReady 1.8s ease-in-out infinite}
#nationConfirmDecision:not(:disabled):active,.nation-enact:not(:disabled):active{transform:translateY(3px);box-shadow:0 1px 0 var(--gf-gold-deep)!important;animation:none}
@keyframes gfReady{50%{box-shadow:0 4px 0 var(--gf-gold-deep),0 0 0 6px #ffd27a30,0 10px 26px #e7b55877}}
/* ---------- Budget panel: was dark text on a dark card ---------- */
details.nation-budget{background:#14313d!important;border:1px solid #ffffff1f!important}
details.nation-budget>summary,.nation-shell details.nation-budget>summary{color:#ffe3a0!important}
details.nation-budget>summary>span,.nation-shell details.nation-budget>summary>span{color:#b9d0c8!important}
details.nation-budget[open]{background:#f6f2e3!important}
details.nation-budget[open]>summary,.nation-shell details.nation-budget[open]>summary{color:#24413a!important}.nation-shell details.nation-budget[open]>summary>span,details.nation-budget[open]>summary>span{color:#58704d!important}
/* ---------- Bottom nav: game-style tab bar ---------- */
.nation-mobile-nav button{transition:transform .15s,color .2s;-webkit-tap-highlight-color:transparent}
.nation-mobile-nav button:active{transform:scale(.9)}
.nation-mobile-nav button[aria-pressed=true]>span{display:inline-block;animation:gfTab .35s cubic-bezier(.2,1.6,.4,1)}
@keyframes gfTab{50%{transform:translateY(-4px) scale(1.2)}}
/* ---------- General button press feel ---------- */
button.primary,button.secondary{transition:transform .08s,filter .15s}
button.primary:not(:disabled):active,button.secondary:not(:disabled):active{transform:scale(.97);filter:brightness(1.05)}
@media(prefers-reduced-motion:reduce){.gf-float,.nation-treasury.gf-bump>b,#nationConfirmDecision,.nation-enact,.nation-mobile-nav button[aria-pressed=true]>span{animation:none!important}.nation-metrics i{transition:none}}