:root{color-scheme:dark;--bg-top: #87d86f;--bg-bottom: #2f6e2f;--panel: rgba(26, 38, 25, .78);--panel-strong: rgba(26, 40, 28, .9);--line: rgba(219, 255, 189, .22);--line-strong: rgba(255, 246, 191, .34);--text: #fff7db;--muted: #e0efc0;--money: #ffd85f;--food: #ffad60;--pop: #8ee8ff;--shield: #b0ffe4;--warning: #ffd6a1;--shadow: 0 20px 50px rgba(9, 18, 8, .35);font-family:Trebuchet MS,Verdana,sans-serif}*{box-sizing:border-box}html,body,#root{margin:0;min-height:100%;background:radial-gradient(circle at top left,rgba(255,228,113,.28),transparent 26%),radial-gradient(circle at top right,rgba(155,255,174,.2),transparent 24%),linear-gradient(180deg,var(--bg-top) 0%,var(--bg-bottom) 100%);color:var(--text)}body{min-height:100vh}button,input{font:inherit}button{border:1px solid rgba(255,255,255,.09);background:linear-gradient(180deg,#ffce5d59,#e3714557);color:var(--text);border-radius:18px;cursor:pointer;box-shadow:0 10px 24px #351a0a33;transition:transform .12s ease,border-color .12s ease,opacity .12s ease}button:hover:not(:disabled){transform:translateY(-1px);border-color:#fff0af75}button:disabled{cursor:not-allowed;opacity:.46}.eyebrow{margin:0 0 .35rem;text-transform:uppercase;letter-spacing:.18em;color:#e7ffd2;font-size:.72rem}.join-shell{min-height:100vh;display:grid;place-items:center;padding:1.5rem}.join-card{width:min(620px,100%);padding:2rem;border-radius:34px;background:radial-gradient(circle at top right,rgba(255,222,118,.16),transparent 30%),linear-gradient(180deg,#244623f5,#163118f0);border:1px solid var(--line-strong);box-shadow:var(--shadow)}.join-card h1{margin:0 0 .8rem;font-size:clamp(2rem,3vw,3.2rem);line-height:1.02}.join-copy{margin:0 0 1.5rem;color:var(--muted);line-height:1.55;max-width:40rem}.join-form{display:grid;gap:1rem}.join-form label{display:grid;gap:.45rem;color:var(--muted)}.join-form input{width:100%;border-radius:16px;border:1px solid var(--line);background:#122412f0;color:var(--text);padding:.9rem 1rem}.join-form button{padding:1rem 1.25rem;justify-self:start}.app-shell,.game-area{min-height:100vh}.game-area{position:relative;overflow:hidden}.game-canvas{position:absolute;inset:0}.resource-ribbon{position:absolute;top:1rem;left:1rem;right:1rem;display:flex;align-items:center;gap:1rem;padding:.9rem 1rem;border-radius:26px;background:linear-gradient(180deg,#2e4c27e6,#1c3117db);border:1px solid var(--line-strong);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:10}.resource-ribbon.collapsed{padding-bottom:.75rem}.brand-block h1{margin:0;font-size:clamp(1.5rem,2vw,2rem)}.ribbon-pills{display:flex;flex:1;flex-wrap:wrap;gap:.75rem}.pill{min-width:108px;padding:.72rem .88rem;border-radius:18px;background:#12241199;border:1px solid rgba(255,255,255,.08)}button.pill{min-width:108px;padding:.72rem .88rem;text-align:left;background:#12241199;box-shadow:none}button.pill:hover:not(:disabled){transform:translateY(-1px);background:#1c361ad1}.pill span{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:#fffae1b8}.pill strong{display:block;margin-top:.2rem;font-size:1rem}.pill.money strong{color:var(--money)}.pill.food strong{color:var(--food)}.pill.pop strong{color:var(--pop)}.pill.shield strong{color:var(--shield)}.hud-toggle{padding:.85rem 1rem;white-space:nowrap}.hud-column{position:absolute;top:7.6rem;bottom:1rem;width:min(360px,calc(100vw - 2rem));display:grid;gap:.9rem;align-content:start;z-index:9}.hud-column.left{left:1rem}.hud-column.right{right:1rem}.hud-card{padding:1rem;border-radius:24px;background:linear-gradient(180deg,#20371ee6,#162715d9);border:1px solid var(--line);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.hero-card{background:radial-gradient(circle at top right,rgba(255,216,104,.18),transparent 26%),linear-gradient(180deg,#294624f0,#162814e0)}.panel-title{margin:0 0 .65rem;font-size:.95rem;text-transform:uppercase;letter-spacing:.12em;color:#eeffd7}.panel-line{margin:.3rem 0;color:var(--muted);line-height:1.45}.panel-line strong{color:var(--text)}.panel-line.warning{color:var(--warning)}.panel-line.emphasis{color:#fff8e1}.build-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem;margin-top:.65rem}.build-button,.primary-action{min-height:74px;padding:.85rem .9rem;text-align:left;display:flex;flex-direction:column;justify-content:space-between}.primary-action.large{margin-bottom:.75rem;min-height:88px}.build-button strong,.primary-action{font-weight:700}.build-button span,.primary-action span{color:#ffe698;font-size:.92rem}.build-button small{color:#fff7d9ad}.active-card{border-color:#adffd7ad;background:linear-gradient(180deg,#8effcb38,#3da46e57);box-shadow:0 12px 28px #163d2252}.action-stack,.raid-stack{display:grid;gap:.7rem}.selection-card{display:grid;gap:.55rem}.inspector-list{display:grid;gap:.18rem;padding-left:.7rem;border-left:1px solid rgba(219,255,189,.18)}.raid-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.55rem}.raid-row button{min-height:62px;padding:.7rem}.slim-hud-note{position:absolute;top:6.8rem;right:1rem;padding:.7rem .9rem;border-radius:18px;background:#1c2f18c7;border:1px solid var(--line);box-shadow:var(--shadow);z-index:9}.slim-hud-note p{margin:0;color:var(--muted)}.rotate-overlay{position:absolute;inset:0;display:grid;place-items:center;padding:1.25rem;background:#121c10db;z-index:20}.rotate-card{max-width:460px;padding:1.4rem;border-radius:26px;border:1px solid var(--line-strong);background:var(--panel-strong);text-align:center}.rotate-card h2{margin:0 0 .6rem}.rotate-card p:last-child{margin:0;color:var(--muted);line-height:1.45}@media(max-width:1180px){.resource-ribbon{flex-wrap:wrap}.hud-column{top:auto;bottom:1rem;width:calc(50vw - 1.25rem);max-height:58vh;overflow:auto}.hud-column.left{left:1rem}.hud-column.right{right:1rem}}@media(max-width:860px){.resource-ribbon{left:.75rem;right:.75rem;top:.75rem}.hud-column{left:.75rem;right:.75rem;width:auto;position:absolute}.hud-column.left{bottom:18.5rem}.hud-column.right{bottom:.75rem}.build-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:640px){.ribbon-pills{width:100%}.pill{min-width:calc(50% - .4rem)}.build-grid,.raid-row{grid-template-columns:repeat(2,minmax(0,1fr))}.build-button,.primary-action,.raid-row button{min-height:68px;font-size:.92rem}}