:root{font-family:Space Grotesk,Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:#eaf0ff;--bg: #0b0f16;--panel: rgba(12, 17, 25, .82);--text: #eaf0ff;--muted: #9fb2d7;--accent: #ff6b35;--accent-2: #6ee7ff;--border: rgba(255, 255, 255, .1);--shadow: 0 18px 38px rgba(0, 0, 0, .45);--color-bg-main: #0b0f16;--color-bg-panel: rgba(12, 17, 25, .82);--color-text-primary: #eaf0ff;--color-text-secondary: #9fb2d7;--color-accent-fire: #ff6b35;--color-accent-wheat: #6ee7ff;--color-border: rgba(255, 255, 255, .1);--color-btn-bg: rgba(12, 17, 25, .7);--color-btn-hover: rgba(255, 107, 53, .2)}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at 20% 10%,#182132,#0b0f16 55%);display:flex;flex-direction:column}.hidden{display:none!important}#app{width:100%;height:100vh;display:flex;flex-direction:column}#game-header{background:#080c13cc;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.05);padding:.5rem 2rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;column-gap:1.5rem;row-gap:.75rem;box-shadow:0 4px 12px #0009;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:100}.header-left{display:flex;align-items:center;gap:1rem;flex-shrink:0}.game-logo{height:40px;max-width:200px;object-fit:contain;filter:drop-shadow(0 2px 8px rgba(255,107,53,.3))}.game-title{margin:0;font-size:1.5rem;font-weight:700;background:linear-gradient(135deg,var(--color-accent-wheat),var(--color-accent-fire));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:.05em;text-shadow:0 2px 8px rgba(255,107,53,.3)}.header-stats{flex:1 1 auto;display:flex;flex-wrap:wrap;align-items:center;gap:1.1rem;min-width:0}.hud-pill{display:flex;align-items:center;gap:.35rem;padding:.1rem 0;background:transparent;border:none;font-weight:600;font-size:.95rem;color:inherit}.token-pill{cursor:pointer;padding:.2rem .35rem;border-radius:12px;transition:transform .12s ease,box-shadow .12s ease,background .12s ease}.token-pill:hover{transform:translateY(-1px);background:#ffffff0f;box-shadow:0 8px 18px #0000004d}.hud-pill-icon{font-size:1.1rem;filter:drop-shadow(0 0 2px rgba(244,208,63,.5));display:inline-flex;align-items:center;justify-content:center}.hud-pill-icon img{width:28px;height:28px;object-fit:contain;filter:drop-shadow(0 0 2px rgba(244,208,63,.5))}.hud-pill-value{font-variant-numeric:tabular-nums;color:var(--color-text-primary)}.hud-pill-value[data-label]:after{content:" " attr(data-label);font-size:.85rem;letter-spacing:.03em;text-transform:none;opacity:.85;color:var(--color-text-secondary)}.header-nav{display:flex;gap:.75rem;align-items:center;flex-shrink:0}.header-btn{padding:.5rem 1rem;background:var(--color-btn-bg);border:1px solid var(--color-border);border-radius:8px;color:var(--color-text-primary);font-size:.9rem;font-weight:600;cursor:pointer;transition:all .2s ease;letter-spacing:.03em;box-shadow:0 2px 4px #0003}.header-btn:hover{background:var(--color-btn-hover);border-color:var(--color-accent-fire);transform:translateY(-1px);box-shadow:0 4px 8px #ff6b3533;color:#fff}.header-btn:active{transform:translateY(0)}.header-btn-wallet{background:linear-gradient(135deg,#3c281ee6,#2c1e14);border-color:var(--color-accent-wheat);display:flex;align-items:center;gap:.4rem}.header-btn-wallet:hover{background:linear-gradient(135deg,#503228e6,#3c281e);border-color:var(--color-accent-fire);box-shadow:0 4px 12px #ff6b354d}#wallet-icon{font-size:1.1rem}#wallet-text{font-size:.85rem;letter-spacing:.05em}#layout{flex:1;display:flex;gap:1.5rem;align-items:stretch;padding:1rem 2rem;max-width:100%;overflow:hidden}#left-panel{width:340px;min-width:340px;display:flex;flex-direction:column;gap:1rem;overflow-y:auto;overflow-x:hidden;padding-right:.5rem}#left-panel::-webkit-scrollbar{width:6px}#left-panel::-webkit-scrollbar-track{background:#0003;border-radius:3px}#left-panel::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:3px}#left-panel::-webkit-scrollbar-thumb:hover{background:var(--color-accent-wheat)}#game-wrapper{flex:1 1 auto;display:flex;align-items:center;justify-content:center;position:relative;background:#1a120bd9;border-radius:16px;border:1px solid rgba(255,255,255,.05);padding:1rem;box-shadow:inset 0 1px #ffffff0d;min-width:0}#zoom-controls{position:absolute;right:1.5rem;bottom:1.5rem;display:flex;flex-direction:column;gap:.45rem;padding:.4rem;background:var(--color-bg-panel);border-radius:14px;border:1px solid var(--color-border);box-shadow:0 15px 30px #0000008c;z-index:10}.zoom-btn{width:42px;height:42px;border-radius:10px;border:1px solid var(--color-border);background:#231914e6;color:var(--color-text-primary);font-size:1.2rem;font-weight:700;cursor:pointer;transition:transform .15s ease,background .15s ease,border-color .15s ease}.zoom-btn:hover{background:var(--color-btn-hover);border-color:var(--color-accent-fire)}.zoom-btn:active{transform:scale(2)}#game{width:100%;height:100%;border-radius:12px;box-shadow:0 20px 50px #000000a6;border:1px solid rgba(255,255,255,.08);background:#140f0af2;image-rendering:pixelated;display:block}#ui-panel{width:340px;min-width:340px;display:flex;flex-direction:column;gap:1rem;overflow-y:auto;overflow-x:hidden;padding-right:.5rem}#ui-panel::-webkit-scrollbar{width:6px}#ui-panel::-webkit-scrollbar-track{background:#0003;border-radius:3px}#ui-panel::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:3px}#ui-panel::-webkit-scrollbar-thumb:hover{background:var(--color-accent-wheat)}.panel-block{background:var(--color-bg-panel);border-radius:18px;border:1px solid var(--color-border);padding:1rem 1.1rem;box-shadow:0 15px 30px #00000073}.panel-block h2{margin:0 0 .6rem;font-size:1rem;letter-spacing:.08em;text-transform:uppercase;color:var(--color-accent-wheat);text-shadow:0 1px 2px rgba(0,0,0,.5)}.role-control{display:flex;flex-direction:column;gap:.25rem;margin-bottom:.75rem}.role-control-header{display:flex;align-items:center;justify-content:space-between;gap:.35rem}.role-control label{font-size:.85rem;text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-secondary)}.role-slot-badge{display:inline-flex;align-items:center;gap:.25rem;padding:.15rem .5rem;border-radius:999px;border:1px solid var(--color-border);background:#ffffff0d;color:var(--color-text-secondary);font-size:.75rem}.role-control input[type=range]{width:100%;accent-color:var(--color-accent-fire)}.modal-backdrop{position:fixed;inset:0;background:#0009;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .2s ease;z-index:90}.modal{position:fixed;inset:0;display:grid;place-items:center;pointer-events:none;z-index:100}.modal-content{width:min(380px,90vw);background:var(--color-bg-panel);border:1px solid var(--color-border);border-radius:18px;box-shadow:0 18px 48px #0000008c;padding:1rem 1.1rem;color:var(--color-text-primary);transform:translateY(6px);transition:transform .2s ease,opacity .2s ease;opacity:0;position:relative}.modal-header{display:flex;align-items:center;justify-content:space-between;gap:.75rem}.modal-header h3{margin:0;font-size:1.05rem;letter-spacing:.04em}.modal-close{border:none;background:transparent;color:var(--color-text-secondary);font-size:1rem;cursor:pointer}.modal-body{margin:.8rem 0;display:flex;flex-direction:column;gap:.5rem}.modal-info{background:#6ee7ff14;border:1px solid rgba(110,231,255,.2);border-radius:10px;padding:.6rem;margin-top:.5rem;font-size:.85rem;line-height:1.4;color:var(--color-text-secondary)}.modal-row{display:flex;align-items:center;justify-content:space-between;font-size:.95rem}.conversion-visual{display:flex;align-items:center;justify-content:flex-start;gap:.6rem;margin-top:.2rem}.conversion-arrow{font-size:1.2rem;color:var(--color-text-secondary)}.token-badge{display:inline-flex;align-items:center;gap:.35rem;padding:.3rem .6rem;border-radius:10px;background:#ffffff0d;border:1px solid rgba(255,255,255,.08);font-weight:600}.token-badge .icon{font-size:1.1rem}.token-badge.hex img{width:170px;height:170px;object-fit:contain;display:block}.conversion-success-anim{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;animation:fadeOut 3.8s ease-in-out forwards;transform-style:preserve-3d;perspective:800px}.conversion-success-anim .fireworks{position:absolute;inset:0;pointer-events:none;display:grid;place-items:center}.conversion-success-anim .firework{position:absolute;width:6px;height:6px;background:radial-gradient(circle,#ffe29f,#ff7e5f 60%,transparent 65%);border-radius:50%;animation:explode .9s ease-out forwards}.conversion-success-anim .firework:nth-child(1){animation-delay:0s;transform:translate(-40px,-20px)}.conversion-success-anim .firework:nth-child(2){animation-delay:.1s;transform:translate(30px,-10px)}.conversion-success-anim .firework:nth-child(3){animation-delay:.15s;transform:translate(-10px,35px)}.conversion-success-anim .firework:nth-child(4){animation-delay:.05s;transform:translate(45px,25px)}.conversion-success-anim .firework:nth-child(5){animation-delay:.18s;transform:translate(-35px,30px)}.conversion-success-anim .firework:nth-child(6){animation-delay:.22s;transform:translate(5px,-35px)}.coin-3d{position:relative;width:170px;height:170px;transform-style:preserve-3d;animation:spinY 1.6s ease-in-out forwards;filter:drop-shadow(0 10px 25px rgba(0,0,0,.35))}.coin-3d .face{position:absolute;inset:0;display:grid;place-items:center;backface-visibility:hidden;z-index:2}.coin-3d .face img{width:170px;height:170px;object-fit:contain;border-radius:50%}.coin-3d .back{transform:rotateY(180deg) translateZ(6px)}.coin-3d .front{transform:translateZ(6px)}.coin-3d .edge{position:absolute;inset:-4px;border-radius:50%;border:4px solid rgba(255,188,80,.55);background:transparent;box-shadow:0 0 18px #ff952940;transform:translateZ(0);z-index:1}.celebrate-text{margin-top:1rem;font-weight:800;font-size:2.1rem;letter-spacing:.08em;color:#fffbe5;text-shadow:0 4px 14px rgba(0,0,0,.55);opacity:0;animation:floatUp 2.4s ease-out 1.8s forwards}@keyframes spinY{0%{transform:rotateY(0)}60%{transform:rotateY(740deg)}to{transform:rotateY(720deg)}}@keyframes explode{0%{opacity:1;transform:scale(.1);box-shadow:0 0 #fff9}70%{opacity:1;transform:scale(1);box-shadow:0 0 12px #ffc66db3}to{opacity:0;transform:scale(.3);box-shadow:0 0 #fff0}}@keyframes fadeOut{0%{opacity:1}75%{opacity:1}to{opacity:0}}@keyframes floatUp{0%{transform:translateY(12px);opacity:0}30%{opacity:1;transform:translateY(4px)}70%{opacity:1;transform:translateY(-4px)}to{transform:translateY(-12px);opacity:0}}.modal-actions{display:flex;justify-content:flex-end;gap:.5rem}.modal-actions button{padding:.45rem .8rem;border-radius:10px;border:1px solid var(--color-border);background:#ffffff0d;color:var(--color-text-primary);cursor:pointer;transition:all .2s ease}.modal-actions button:disabled{opacity:.5;cursor:not-allowed}.modal-actions button.primary{background:var(--color-accent-fire);border-color:transparent;color:#1b0f0a;font-weight:700}.modal-actions button.primary:hover:not(:disabled){background:#ff8355;transform:translateY(-1px);box-shadow:0 4px 12px #ff6b354d}.modal.modal-danger .modal-header{background:linear-gradient(135deg,#2e0f0f,#4b1a1a);color:#ffb3b3}.modal.modal-danger .modal-content{border:1px solid #5c1f1f;box-shadow:0 12px 40px #ff575733}.modal.modal-arrival .modal-header{background:linear-gradient(135deg,#12333f,#0f4c5c);color:#c4f1ff}.modal.modal-arrival .modal-content{border:1px solid rgba(110,231,255,.3);box-shadow:0 12px 40px #6ee7ff2e}.arrival-count{font-weight:800;color:#d8f3ff;margin:.2rem 0;letter-spacing:.03em}.arrival-avatars{display:flex;gap:10px;margin:.25rem 0 .5rem}.arrival-avatar{width:58px;height:58px;border-radius:14px;overflow:hidden;background:radial-gradient(circle at 30% 30%,#ffffff14,#00000059);border:1px solid rgba(110,231,255,.18);box-shadow:0 8px 20px #00000059;display:grid;place-items:center}.arrival-avatar img{width:100%;height:100%;object-fit:cover;display:block}.threat-icons{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0}.threat-icon{width:36px;height:36px;border-radius:10px;background:#221012;border:1px solid #ff7878;display:inline-flex;align-items:center;justify-content:center;font-size:18px;box-shadow:inset 0 0 12px #ff787833}.threat-count{font-weight:700;color:#ffb7b7;margin:6px 0 4px}.threat-status{border-color:#6ee7ff59;background:#6ee7ff14;color:#c7e9ff}.threat-status.success{border-color:#7dffbb73;background:#2ecc711a;color:#e8fff4}.threat-status.error{border-color:#ff787866;background:#ff787814;color:#ffd7d7}.modal:not(.hidden){pointer-events:auto}.modal:not(.hidden) .modal-content{opacity:1;transform:translateY(0)}.modal-backdrop:not(.hidden){opacity:1;pointer-events:auto}.citizen-panel{display:flex;flex-direction:column;gap:.75rem}.citizen-list{max-height:240px;overflow-y:auto;border:1px solid var(--color-border);border-radius:14px;background:#1e140f99}.citizen-row{display:flex;flex-direction:column;align-items:flex-start;gap:.1rem;width:100%;padding:.65rem .9rem;border:none;background:transparent;color:inherit;text-align:left;font:inherit;cursor:pointer;border-bottom:1px solid rgba(93,64,55,.3)}.citizen-row:last-child{border-bottom:none}.citizen-row:hover{background:#ff6b351a}.citizen-row.is-selected{background:#ff6b3526;border-left:3px solid var(--color-accent-fire)}.floating-toast{position:fixed;top:16px;right:16px;display:flex;align-items:center;gap:10px;padding:.65rem .85rem;background:#0f1b2aeb;border:1px solid rgba(110,231,255,.2);border-radius:14px;box-shadow:0 16px 38px #00000059;color:#eaf0ff;opacity:0;transform:translateY(-8px);transition:opacity .25s ease,transform .25s ease;z-index:150}.floating-toast.show{opacity:1;transform:translateY(0)}.blessing-toast .toast-icon{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,#ffffff1a,#6ee7ff29);border:1px solid rgba(110,231,255,.35);font-size:20px;box-shadow:inset 0 0 12px #6ee7ff33}.blessing-toast .toast-body{display:flex;flex-direction:column;gap:2px}.blessing-toast .toast-title{font-weight:800;letter-spacing:.04em}.blessing-toast .toast-message{color:#c7d7f5;font-size:.92rem;max-width:320px}.citizen-row-id{font-size:.8rem;color:var(--color-text-secondary);letter-spacing:.05em}.citizen-row-role{font-weight:600;letter-spacing:.04em;color:var(--color-text-primary)}.citizen-row-health{font-size:.75rem;color:var(--color-text-secondary)}.citizen-row-note{font-size:.7rem;color:#e8dcc580;line-height:1.2}.citizen-list-empty{margin:.5rem;font-size:.8rem;color:var(--color-text-secondary)}.citizen-detail{border:1px solid var(--color-border);border-radius:14px;padding:.75rem;background:#1e140fcc}.citizen-detail-header{display:flex;justify-content:space-between;gap:.5rem;align-items:flex-start;margin-bottom:.75rem}.citizen-detail-header h3{margin:0;font-size:1rem;color:var(--color-accent-wheat)}.citizen-detail-header p{margin:.2rem 0 0;font-size:.8rem;color:var(--color-text-secondary)}.citizen-detail-tags{display:flex;flex-wrap:wrap;gap:.25rem}.citizen-detail-tags span{background:#f4d03f26;color:var(--color-accent-wheat);border-radius:999px;padding:.15rem .6rem;font-size:.7rem;border:1px solid rgba(244,208,63,.3)}.citizen-detail-empty{margin:0;font-size:.85rem;color:var(--color-text-secondary)}.citizen-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem;margin-bottom:.75rem}.citizen-stat{background:#140f0ab3;border-radius:10px;padding:.45rem;display:flex;flex-direction:column;gap:.25rem;font-size:.75rem;border:1px solid rgba(93,64,55,.3)}.citizen-stat span{font-weight:500;color:var(--color-text-primary)}.citizen-stat-bar{position:relative;height:8px;border-radius:999px;background:#ffffff1a;overflow:hidden}.citizen-stat-bar div{position:absolute;top:0;left:0;bottom:0;background:linear-gradient(90deg,var(--color-accent-fire),var(--color-accent-wheat))}.citizen-stat-value{font-size:.7rem;color:var(--color-text-secondary)}.citizen-inventory{display:flex;gap:.5rem;margin-bottom:.75rem}.citizen-inventory span{background:#ffffff14;border-radius:999px;padding:.2rem .65rem;font-size:.8rem;color:var(--color-text-primary)}.citizen-history h4{margin:0 0 .4rem;font-size:.85rem;letter-spacing:.05em;text-transform:uppercase;color:var(--color-accent-wheat);opacity:.9}.citizen-history-list{list-style:none;padding:0;margin:0;max-height:160px;overflow-y:auto;display:flex;flex-direction:column;gap:.35rem}.citizen-history-list li{display:flex;gap:.4rem;font-size:.74rem;color:var(--color-text-secondary);background:#ffffff08;padding:.35rem .45rem;border-radius:8px}.citizen-history-time{font-weight:600;color:var(--color-accent-fire);min-width:3rem}.role-value{align-self:flex-end;font-size:.8rem;color:var(--color-text-primary);font-weight:600}.role-note{margin:0;font-size:.75rem;color:var(--color-text-secondary);letter-spacing:.04em}#instructions ul{list-style:disc;padding-left:1.2rem;margin:0 0 .75rem;font-size:.9rem;color:var(--color-text-primary)}#planning-panel .planning-modes{display:flex;gap:.6rem;margin-bottom:.6rem;justify-content:flex-start;flex-wrap:wrap}.planning-hex-button{position:relative;width:76px;height:86px;background:none;border:none;cursor:pointer;padding:0;opacity:.78;transition:opacity .2s ease,transform .15s ease,filter .2s ease}.planning-hex-button:hover{opacity:1;transform:scale(1.04);filter:drop-shadow(0 6px 12px rgba(0,0,0,.35))}.planning-hex-button.active{opacity:1;transform:scale(1.06)}.planning-hex-button.active:after{content:"";position:absolute;inset:-4px;background:radial-gradient(ellipse at center,rgba(255,107,53,.4) 0%,transparent 70%);clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);z-index:-1}.planning-hex-button .hex-icon{width:44px;height:44px}.hex-icon-emoji{display:grid;place-items:center;font-size:30px;line-height:1;width:44px;height:44px}.planning-build-selector{display:flex;flex-direction:column;gap:.45rem;padding:.6rem .7rem;border:1px dashed var(--color-border);border-radius:12px;background:#140f0acc}.planning-build-selector.collapsed{display:none}.planning-selector-row{display:flex;align-items:center;justify-content:space-between;gap:.5rem}.selector-label{font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-secondary)}.panel-button{width:100%;padding:.5rem .8rem;border-radius:10px;border:1px solid var(--color-border);background:#281e19d9;color:var(--color-text-primary);font-weight:600;text-transform:uppercase;color:var(--color-text-secondary)}.planning-selector-controls{display:flex;align-items:center;gap:.45rem}.planning-cycle-btn{width:34px;height:34px;border-radius:10px;border:1px solid var(--color-border);background:#281e19f2;color:var(--color-text-primary);font-weight:700;cursor:pointer;transition:background .2s ease,border-color .2s ease}.planning-cycle-btn:hover:not(:disabled){background:var(--color-btn-hover);border-color:var(--color-accent-fire)}.planning-cycle-btn:disabled{opacity:.4;cursor:not-allowed}.planning-selector-name{min-width:110px;text-align:center;font-weight:600;letter-spacing:.04em;color:var(--color-accent-wheat)}.planning-status{margin:0;font-size:.72rem;color:var(--color-text-secondary);letter-spacing:.04em}.planning-hint{margin:.65rem 0 0;font-size:.8rem;color:var(--color-text-secondary);line-height:1.4}.planning-hint-text{display:block}.planning-hint-structure{margin-top:.6rem;padding:.55rem .65rem;border-radius:10px;border:1px solid var(--color-border);background:#140f0abf;box-shadow:inset 0 0 12px #ff6b350d}#overlay p:last-of-type{margin-top:2rem;padding:.55rem .65rem;border-radius:10px;border:1px solid var(--color-border);background:#140f0abf;box-shadow:inset 0 0 12px #ff6b350d}.planning-hint-structure-title{font-weight:600;letter-spacing:.03em;color:var(--color-accent-fire)}.planning-hint-structure-summary{margin-top:.25rem;font-size:.78rem;color:var(--color-text-secondary)}.planning-hint-structure-meta{margin-top:.35rem;font-size:.75rem;color:var(--color-text-secondary);display:flex;gap:.35rem;flex-wrap:wrap}.planning-hint-structure-meta span{color:var(--color-accent-wheat);font-weight:600}.build-details{margin-top:.45rem;padding:.55rem .65rem;border-radius:10px;border:1px solid var(--color-border);background:#140f0ad9;display:flex;flex-direction:column;gap:.35rem}.build-details-summary{margin:0;font-size:.8rem;color:var(--color-text-primary)}.build-details-meta{margin:0;font-size:.76rem;color:var(--color-text-secondary);display:flex;flex-wrap:wrap;gap:.35rem}.build-details-label{color:var(--color-accent-fire);font-weight:600;text-transform:uppercase;letter-spacing:.05em;font-size:.7rem}#status-text{margin:0 0 .6rem;font-size:.85rem;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-primary)}.speed-controls{margin-bottom:.75rem;display:flex;flex-direction:column;gap:.35rem}.speed-label{font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-secondary)}.speed-button-group{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.4rem}.speed-button{padding:.4rem .6rem;font-size:.8rem}.speed-button.active{background:#ff6b3540;border-color:var(--color-accent-fire);box-shadow:0 0 16px #ff6b3540}.panel-actions{display:flex;flex-direction:column;gap:.5rem}.panel-button{width:100%;padding:.5rem .8rem;border-radius:10px;border:1px solid var(--color-border);background:#281e19d9;color:var(--color-text-primary);font-weight:600;text-transform:uppercase;letter-spacing:.05em;cursor:pointer;transition:background .2s ease,border-color .2s ease}.panel-button:hover:not(:disabled){background:var(--color-btn-hover);border-color:var(--color-accent-fire)}.panel-button:disabled{opacity:.4;cursor:not-allowed}#overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#0f0a05f2;z-index:2000;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#e8dcc5;text-align:center;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}#overlay[hidden]{display:none}#overlay h1{font-size:3.5rem;font-weight:800;margin-bottom:2rem;background:linear-gradient(135deg,#f4d03f,#ff6b35);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:0 4px 20px rgba(255,107,53,.3);letter-spacing:.05em}#overlay p{font-size:1.1rem;margin:.6rem 0;color:#a89f91;max-width:600px;line-height:1.6}#overlay p:last-of-type{margin-top:2rem;font-weight:600;color:#ff6b35;animation:pulse 2s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.6}}.citizen-portrait-bar{display:flex;gap:.5rem;padding:.5rem 1rem;background:#2c1e14e6;border-bottom:1px solid rgba(93,64,55,.5);overflow-x:auto;white-space:nowrap;height:72px;align-items:center;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.citizen-portrait-bar::-webkit-scrollbar{height:6px}.citizen-portrait-bar::-webkit-scrollbar-track{background:#0003}.citizen-portrait-bar::-webkit-scrollbar-thumb{background:#5d403780;border-radius:3px}.citizen-portrait{position:relative;width:48px;height:56px;background:#1a120bcc;border:1px solid rgba(93,64,55,.4);border-radius:6px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;flex-shrink:0}.citizen-portrait:hover{background:#ff6b3526;border-color:#ff6b35;transform:translateY(-2px)}.citizen-portrait.selected{background:#ff6b3540;border-color:#ff6b35;box-shadow:0 0 8px #ff6b3566}.portrait-icon{font-size:1.5rem;margin-bottom:2px;filter:drop-shadow(0 2px 2px rgba(0,0,0,.5))}.portrait-health-bar{width:80%;height:4px;background:#00000080;border-radius:2px;overflow:hidden;margin-bottom:2px}.health-bar-fill{height:100%;background-color:#43a047;transition:width .3s ease}.portrait-id{font-size:.65rem;color:#a89f91;font-weight:600}.citizen-portrait.blessed{border-color:#f4d03f;box-shadow:0 0 8px #f4d03f4d}.citizen-portrait.blessed:after{content:"✨";position:absolute;top:-4px;right:-4px;font-size:.7rem}.header-controls{display:flex;gap:.75rem;align-items:center;flex-shrink:0}.speed-controls-header{display:flex;gap:.4rem;align-items:center}.header-control-btn{padding:.45rem .75rem;background:var(--color-btn-bg);border:1px solid var(--color-border);border-radius:8px;color:var(--color-text-primary);font-size:.85rem;font-weight:700;cursor:pointer;transition:all .2s ease;letter-spacing:.03em;box-shadow:0 2px 4px #0003;min-width:38px;text-align:center}.header-control-btn:hover{background:var(--color-btn-hover);border-color:var(--color-accent-fire);transform:translateY(-1px);box-shadow:0 4px 8px #ff6b3533}.header-control-btn:active{transform:translateY(0)}.header-control-btn.active{background:#ff6b3540;border-color:var(--color-accent-fire);box-shadow:0 0 16px #ff6b354d}.pause-btn{font-size:1.1rem;padding:.45rem .65rem}#citizen-control-panel{position:fixed;left:16px;bottom:16px;width:320px;max-width:calc(100vw - 32px);background:#080b0feb;border:1px solid rgba(93,64,55,.6);border-radius:14px;padding:14px 16px;box-shadow:0 18px 38px #0000008c;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:var(--color-text-primary);z-index:2000}#citizen-control-panel.hidden{display:none}#citizen-control-panel .panel-header{display:flex;align-items:center;gap:.75rem;margin-bottom:.75rem}#citizen-control-panel .panel-portrait{width:56px;height:56px;border-radius:12px;background:#1a120be6;border:1px solid rgba(255,255,255,.08);display:grid;place-items:center;box-shadow:inset 0 1px #ffffff0d,0 8px 18px #0006}#citizen-control-panel .panel-role-icon{font-size:1.6rem;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}#citizen-control-panel .panel-info{display:flex;flex-direction:column;gap:.1rem;flex:1;min-width:0}#citizen-control-panel .panel-name{display:flex;align-items:center;gap:.35rem;font-weight:800;letter-spacing:.02em}#citizen-control-panel .panel-state{font-size:.95rem}#citizen-control-panel .panel-role{font-size:.95rem;color:var(--color-text-secondary)}#citizen-control-panel .panel-close-btn{background:transparent;color:var(--color-text-primary);border:1px solid rgba(255,255,255,.15);border-radius:8px;padding:.25rem .5rem;cursor:pointer;transition:all .15s ease}#citizen-control-panel .panel-close-btn:hover{background:#ffffff14;border-color:#ffffff59}#citizen-control-panel .panel-stats{display:grid;grid-template-columns:1fr 1fr;gap:.5rem .75rem;margin-bottom:.75rem}#citizen-control-panel .stat-row{display:flex;align-items:center;gap:.35rem}#citizen-control-panel .stat-icon{font-size:1rem}#citizen-control-panel .stat-bar-bg{position:relative;flex:1;height:8px;background:#ffffff14;border-radius:999px;overflow:hidden;box-shadow:inset 0 1px 2px #00000059}#citizen-control-panel .stat-bar-fill{height:100%;width:0%;border-radius:999px;transition:width .2s ease}#citizen-control-panel .panel-inventory{display:flex;gap:.65rem;margin-bottom:.75rem}#citizen-control-panel .inv-item{display:flex;gap:.3rem;align-items:center;background:#ffffff0a;padding:.35rem .55rem;border-radius:8px;border:1px solid rgba(255,255,255,.08)}#citizen-control-panel .inv-value{font-weight:700}#citizen-control-panel .panel-action{background:#ffffff08;border:1px dashed rgba(255,255,255,.12);border-radius:10px;padding:.55rem .65rem}#citizen-control-panel .action-label{font-size:.85rem;color:var(--color-text-secondary);margin-bottom:.25rem;letter-spacing:.02em}#citizen-control-panel .action-text{font-weight:700;line-height:1.4}@media(max-width:800px){#citizen-control-panel{left:8px;right:8px;width:auto;bottom:12px}#citizen-control-panel .panel-stats{grid-template-columns:1fr}}.panel-skills{margin-top:.5rem;padding:.6rem;background:#140f0a80;border-radius:10px;border:1px solid rgba(93,64,55,.3)}.skills-title{font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--color-accent-wheat);margin-bottom:.5rem;opacity:.9}.skill-row{display:grid;grid-template-columns:1.4rem 3.5rem 1fr 2rem 2.5rem;align-items:center;gap:.3rem;margin-bottom:.4rem;padding:.2rem 0}.skill-row:last-child{margin-bottom:0}.skill-icon{font-size:.9rem;text-align:center}.skill-label{font-size:.72rem;color:var(--color-text-secondary);font-weight:500}.skill-bar-bg{height:8px;background:#ffffff1a;border-radius:999px;overflow:hidden;position:relative}.skill-bar-fill{position:absolute;top:0;left:0;height:100%;border-radius:999px;transition:width .3s ease,background .3s ease}.skill-bar-fill.level-novice{background:linear-gradient(90deg,#e53935,#ff5252)}.skill-bar-fill.level-apprentice{background:linear-gradient(90deg,#fb8c00,#fdd835)}.skill-bar-fill.level-expert{background:linear-gradient(90deg,#43a047,#66bb6a)}.skill-bar-fill.level-master{background:linear-gradient(90deg,#1e88e5,#6ee7ff)}.skill-value{font-size:.72rem;font-weight:600;color:var(--color-text-primary);text-align:right;font-variant-numeric:tabular-nums}.skill-bonus{font-size:.68rem;color:#43a047;font-weight:600;text-align:right}.skill-row:hover{background:#ffffff08;border-radius:6px}.skill-row:hover .skill-label{color:var(--color-text-primary)}