*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #090704;--panel-bg: #0f0c08;--panel-border: #3a2600;--text: #cfc0a0;--text-muted: #7a6840;--accent: #c8900a;--accent-dim: #3a1e00;--hp-color: #44cc55;--xp-color: #4488cc;--tier-trash: #888;--tier-common: #c8b8a0;--tier-uncommon: #44cc44;--tier-rare: #4488ff;--tier-epic: #cc44ff;--tier-legendary:#ffaa00}body{background:var(--bg);color:var(--text);font-family:Segoe UI,system-ui,sans-serif;font-size:13px;height:100vh;overflow:hidden}.screen{height:100vh;width:100vw}.hidden{display:none!important}.creation-container{align-items:center;display:flex;flex-direction:column;gap:12px;justify-content:center;min-height:100vh;padding:32px 16px}.game-title{color:var(--accent);font-family:Georgia,Book Antiqua,Palatino,serif;font-size:2.4rem;font-weight:700;letter-spacing:.06em;text-shadow:0 0 32px rgba(200,144,10,.5)}.game-logo{width:min(480px,90vw);height:auto;display:block;margin:0 auto 12px;image-rendering:crisp-edges}.game-subtitle{color:var(--text-muted);margin-bottom:8px}.creation-form{background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:6px;box-shadow:0 0 0 1px #c8900a0f,inset 0 1px #c8900a0a;display:flex;flex-direction:column;gap:20px;max-width:680px;padding:24px;width:100%}.form-row{display:flex;flex-direction:column;gap:8px}.form-row label{color:var(--text-muted);font-size:11px;letter-spacing:.1em;text-transform:uppercase}input[type=text],input[type=email],input[type=password]{background:var(--bg);border:1px solid var(--panel-border);border-radius:4px;color:var(--text);font-size:14px;outline:none;padding:8px 12px;transition:border-color .15s;width:100%}input[type=text]:focus,input[type=email]:focus,input[type=password]:focus{border-color:var(--accent)}.option-grid{display:flex;flex-wrap:wrap;gap:6px}.option-btn{background:var(--bg);border:1px solid var(--panel-border);border-radius:4px;color:var(--text);cursor:pointer;font-size:12px;padding:6px 12px;transition:all .12s}.option-btn:hover{border-color:var(--accent);color:var(--accent)}.option-btn.selected{background:var(--accent-dim);border-color:var(--accent);color:#e8d080}.option-desc{color:var(--text-muted);font-size:12px;min-height:18px}.creation-actions{display:flex;gap:10px}#import-area{display:flex;flex-direction:column;gap:8px}#import-area textarea{background:var(--bg);border:1px solid var(--panel-border);border-radius:4px;color:var(--text);font-family:monospace;font-size:11px;padding:8px;resize:vertical}.login-container{align-items:center;display:flex;flex-direction:column;gap:16px;justify-content:center;min-height:100vh;padding:32px 16px}.login-form{background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:6px;box-shadow:0 0 0 1px #c8900a0f;display:flex;flex-direction:column;gap:12px;max-width:360px;padding:24px;width:100%}.login-form-title{color:#e8d080;font-family:Georgia,Book Antiqua,Palatino,serif;font-size:16px;font-weight:600;margin-bottom:4px}.login-form input[type=text],.login-form input[type=email],.login-form input[type=password]{background:var(--bg);border:1px solid var(--panel-border);border-radius:4px;color:var(--text);font-size:14px;outline:none;padding:8px 12px;transition:border-color .15s;width:100%}.login-form input:focus{border-color:var(--accent)}.auth-error{color:#e04040;font-size:12px}.btn-google{align-items:center;background:#fff;border:none;border-radius:4px;color:#333;display:flex;font-size:14px;font-weight:600;gap:10px;justify-content:center;max-width:360px;padding:10px 20px;transition:opacity .12s;width:100%}.btn-google:hover{opacity:.9}.btn-link{background:none;border:none;color:var(--accent);font-size:12px;font-weight:400;padding:4px 0;text-align:center;text-decoration:underline}.btn-link:hover{color:#e8c060}.login-divider{align-items:center;color:var(--text-muted);display:flex;font-size:11px;gap:10px;max-width:360px;width:100%}.login-divider:before,.login-divider:after{background:var(--panel-border);content:"";flex:1;height:1px}.btn{border:none;border-radius:4px;cursor:pointer;font-size:13px;font-weight:600;padding:9px 18px;transition:all .12s}.btn:disabled{cursor:not-allowed;opacity:.4}.btn-primary{background:linear-gradient(180deg,#e6b020,#c8900a 60%,#a07000);border:1px solid #7a5000;box-shadow:inset 0 1px #ffdc6433;color:#1a0e00;text-shadow:0 1px 0 rgba(255,220,80,.3)}.btn-primary:hover:not(:disabled){background:linear-gradient(180deg,#f0c030,#d8a820 60%,#b08010);border-color:#9a6810}.btn-secondary{background:#160f08;border:1px solid var(--panel-border);color:var(--text-muted)}.btn-secondary:hover{border-color:var(--accent);color:var(--accent)}.btn-sm{font-size:11px;padding:5px 10px}.game-layout{display:grid;grid-template-columns:240px 1fr 268px;height:100vh;overflow:hidden}.panel{background:var(--panel-bg);border-right:1px solid var(--panel-border);display:flex;flex-direction:column;overflow:hidden}.panel-right{border-left:1px solid var(--panel-border);border-right:none}.panel-section{border-bottom:1px solid var(--panel-border);padding:10px 12px}.panel-title{color:var(--accent);font-family:Georgia,Book Antiqua,Palatino,serif;font-size:10px;font-weight:700;letter-spacing:.14em;margin-bottom:6px;text-transform:uppercase}.label{color:var(--text-muted);font-size:11px}.char-card{border-bottom:1px solid var(--panel-border);display:flex;gap:10px;padding:10px 12px}#portrait-canvas{border:1px solid #5a3800;border-radius:5px;box-shadow:0 0 8px #c8900a2e,inset 0 0 0 1px #c8900a0f;display:block;flex-shrink:0}.char-card-info{display:flex;flex:1;flex-direction:column;gap:3px;min-width:0}.char-name{color:#e8d080;font-family:Georgia,Book Antiqua,Palatino,serif;font-size:14px;font-weight:700;overflow:hidden;text-overflow:ellipsis;text-shadow:0 0 14px rgba(200,144,10,.35);white-space:nowrap}.char-sub{color:var(--text-muted);font-size:11px}.char-level-line{align-items:baseline;display:flex;font-size:12px;gap:4px;margin-top:1px}.char-time{color:var(--text-muted);font-size:10px;margin-left:6px}.bar-compact{align-items:center;display:flex;gap:4px;margin-top:2px}.bar-lbl-sm{color:var(--text-muted);font-size:10px;min-width:14px}.bar-wrap-sm{flex:1;position:relative}.bar{border-radius:2px;height:14px;transition:width .35s;width:0%}.bar-hp{background:var(--hp-color);box-shadow:0 0 5px #44cc5573}.bar-xp{background:var(--xp-color)}.bar-val{color:#ffffffeb;font-size:9px;line-height:1;position:absolute;right:3px;top:50%;transform:translateY(-50%);text-shadow:0 0 3px rgba(0,0,0,.95)}.quick-stats{border-bottom:1px solid var(--panel-border);display:flex;gap:6px;padding:6px 12px;flex-wrap:wrap}.qs-pill{color:var(--text);font-size:12px}.qs-pill span{color:#e8d080;font-weight:600}.realm-label{border-bottom:1px solid var(--panel-border);color:var(--text-muted);font-size:11px;padding:4px 12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.equip-section{flex:1;overflow-y:auto}#equip-list{display:flex;flex-direction:column;gap:3px}.equip-row{align-items:center;background:var(--bg);border:1px solid transparent;border-radius:3px;cursor:default;display:flex;gap:7px;padding:4px 6px;transition:border-color .12s}.equip-row.filled{border-color:#2a1800}.equip-row:hover{border-color:var(--panel-border)}.equip-row[data-item-id]:hover{cursor:default}.equip-icon{flex-shrink:0;font-size:13px;line-height:1;text-align:center;width:18px}.equip-text{flex:1;min-width:0}.equip-slot-name{color:var(--text-muted);display:block;font-size:9px;letter-spacing:.08em;text-transform:uppercase}.equip-item-name{display:block;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.equip-empty{color:var(--text-muted);font-size:11px;font-style:italic}.canvas-wrap{align-items:center;background:#050402;display:flex;flex-direction:column;justify-content:center;overflow:hidden;position:relative}#game-canvas{display:block;image-rendering:pixelated}#combat-flash{animation:flash .35s ease-in-out infinite alternate;background:#c832321a;top:0;right:0;bottom:0;left:0;pointer-events:none;position:absolute}@keyframes flash{0%{opacity:0}to{opacity:1}}#zone-transition{background:#000;top:0;right:0;bottom:0;left:0;opacity:0;pointer-events:none;position:absolute;transition:opacity .3s ease;z-index:800}#zone-transition.active{opacity:1}.inventory-section{max-height:38vh;overflow-y:auto}.log-section{flex:1;min-height:0;overflow-y:auto}.inv-bag{background:#130e08;border:2px solid #3a2600;border-radius:4px;display:grid;gap:3px;grid-template-columns:repeat(5,1fr);padding:5px}.inv-slot{aspect-ratio:1;background:#0a0804;border-color:#1a1008 #3a2800 #3a2800 #1a1008;border-style:solid;border-width:2px;border-radius:2px;cursor:default;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;position:relative;transition:border-color .1s}.inv-slot.filled{border-color:#2a1e08 #4a3810 #4a3810 #2a1e08}.inv-slot.filled:hover{border-color:#4a3808 #6a5820 #6a5820 #4a3808}.inv-slot .slot-icon{font-size:16px;line-height:1;pointer-events:none}.inv-slot .slot-name{color:#dcc896a6;font-size:7px;line-height:1.2;margin-top:1px;max-width:100%;overflow:hidden;padding:0 2px;pointer-events:none;text-align:center;text-overflow:ellipsis;white-space:nowrap}.inv-slot.tier-trash{background:#100e0c}.inv-slot.tier-common{background:#14100a}.inv-slot.tier-uncommon{background:#0c1208}.inv-slot.tier-rare{background:#080c14}.inv-slot.tier-epic{background:#100814}.inv-slot.tier-legendary{background:#18120a}.tier-trash{color:var(--tier-trash)}.tier-common{color:var(--tier-common)}.tier-uncommon{color:var(--tier-uncommon)}.tier-rare{color:var(--tier-rare)}.tier-epic{color:var(--tier-epic)}.tier-legendary{color:var(--tier-legendary)}.log-title-combat{color:#c82}.log-title-events{color:#c8a050}#combat-log-list,#events-log-list{display:flex;flex-direction:column-reverse;gap:1px}.log-entry{color:var(--text-muted);font-size:11px;line-height:1.55;padding:1px 0}.log-entry.log-combat{color:#c84}.log-entry.log-loot{color:#79c}.log-entry.log-level{color:#c8f;font-weight:600}.log-entry.log-town{color:#6a6}.log-entry.log-death{color:#e04040;font-weight:600}.log-entry.log-equip{color:#8fa}.btn-danger{background:#7a1414;border:1px solid #600c0c;color:#faa}.btn-danger:hover{background:#a02020}.panel-actions{display:flex;gap:6px;flex-wrap:wrap}.panel-monetize{display:flex;flex-direction:column;gap:6px;margin-top:auto}.btn-ad{background:linear-gradient(180deg,#2a1e00,#1c1400);border:1px solid #5a3800;color:#e8c060;font-size:11px;font-weight:600;text-align:left;transition:all .12s;width:100%}.btn-ad:hover:not(:disabled){background:linear-gradient(180deg,#3a2a00,#2a1c00);border-color:var(--accent);color:#ffe090}.btn-ad:disabled{color:#5a4820;opacity:1}.btn-tip{background:linear-gradient(180deg,#0f180e,#0a1009);border:1px solid #2a4020;color:#80aa70;font-size:11px;font-weight:600;text-align:left;transition:all .12s;width:100%}.btn-tip:hover{border-color:#6c5;color:#ada}.qs-shards{color:#e8d080}.qs-shards span{color:#ffe060;font-weight:700}.roster-container{align-items:center;display:flex;flex-direction:column;gap:16px;height:100vh;overflow-y:auto;padding:40px 16px 60px}.roster-list{display:flex;flex-direction:column;gap:10px;max-width:680px;width:100%}.roster-empty-msg{color:var(--text-muted);font-size:13px;margin-top:-4px}.roster-card{align-items:center;background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:8px;cursor:pointer;display:flex;gap:14px;padding:14px 16px;transition:border-color .15s,background .15s,box-shadow .15s}.roster-card:hover{background:#160f08;border-color:var(--accent);box-shadow:0 0 14px #c8900a26}.roster-avatar{align-items:center;border-radius:50%;color:#fff;display:flex;flex-shrink:0;font-size:22px;font-weight:700;height:52px;justify-content:center;text-shadow:0 1px 4px rgba(0,0,0,.5);width:52px}.roster-info{flex:1;min-width:0}.roster-name{color:#e8d080;font-family:Georgia,serif;font-size:15px;font-weight:700}.roster-sub{color:var(--text-muted);font-size:12px;margin-top:1px}.roster-stats{color:var(--text);font-size:12px;margin-top:5px}.roster-meta{color:var(--text-muted);font-size:11px;margin-top:2px}.roster-btns{display:flex;flex-direction:column;flex-shrink:0;gap:5px}.roster-new-card{align-items:center;background:transparent;border:2px dashed var(--panel-border);border-radius:8px;cursor:pointer;display:flex;flex-direction:column;gap:6px;justify-content:center;padding:20px;transition:border-color .15s,background .15s}.roster-new-card:hover{background:#160f08;border-color:var(--accent)}.roster-new-plus{color:var(--accent);font-size:28px;line-height:1}.roster-new-label{color:var(--text-muted);font-size:13px}.lb-wrap{border:1px solid var(--panel-border);border-radius:8px;background:var(--panel-bg);box-shadow:0 0 0 1px #c8900a0d;max-width:680px;padding:16px 20px 20px;width:100%}.lb-title-row{align-items:center;display:flex;justify-content:space-between;margin-bottom:12px}.lb-title{color:var(--accent);font-family:Georgia,Book Antiqua,Palatino,serif;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}.lb-sort-btns{display:flex;gap:4px}.lb-sort-btn{background:transparent;border:1px solid var(--panel-border);border-radius:3px;color:var(--text-muted);cursor:pointer;font-size:11px;font-weight:600;padding:3px 10px;transition:all .12s}.lb-sort-btn:hover{border-color:var(--accent);color:var(--text)}.lb-sort-active{background:var(--accent-dim);border-color:var(--accent);color:#e8d080}.lb-header,.lb-row{display:grid;grid-template-columns:28px 1fr 40px 60px 110px;gap:6px;align-items:center;padding:4px 6px}.lb-header{border-bottom:1px solid var(--panel-border);color:var(--text-muted);font-size:10px;letter-spacing:.08em;margin-bottom:2px;padding-bottom:6px;text-transform:uppercase}.lb-row{border-radius:3px;font-size:12px;transition:background .1s}.lb-row:nth-child(2n){background:#c8900a06}.lb-row:hover{background:#c8900a0f}.lb-col-rank{color:var(--text-muted);font-size:11px;text-align:right}.lb-col-hero{align-items:center;display:flex;gap:7px;min-width:0;overflow:hidden}.lb-col-num{color:var(--text);text-align:right}.lb-col-realm{color:var(--text-muted);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lb-rank-num{color:var(--text-muted);font-size:11px;text-align:right}.lb-sort-col{color:#e8d080}.lb-muted{color:var(--text-muted)}.lb-dot{border-radius:50%;flex-shrink:0;height:8px;width:8px}.lb-status,.lb-unconfigured{color:var(--text-muted);font-size:12px;padding:12px 6px;text-align:center}.lb-unconfigured{font-style:italic}.item-tooltip{background:#0c0904;border:1px solid #5a3800;border-radius:5px;box-shadow:0 6px 24px #000000eb,inset 0 1px #c8900a14;font-size:12px;max-width:220px;min-width:160px;padding:9px 11px;pointer-events:none;position:fixed;z-index:9999}.tt-name{font-family:Georgia,serif;font-size:13px;font-weight:700;margin-bottom:2px}.tt-tier{font-size:10px;letter-spacing:.08em;margin-bottom:6px;opacity:.85;text-transform:uppercase}.tt-divider{border:none;border-top:1px solid #3a2600;margin:5px 0}.tt-stat{color:#b0a080;font-size:11px;line-height:1.7}.tt-stat span{color:#e8d080;font-weight:600}.tt-flavour{color:#c0a060;font-size:11px;font-style:italic;line-height:1.5;opacity:.9;max-width:200px}@media (max-width: 768px){body{overflow-y:auto;height:auto}.screen{height:auto;min-height:100vh}.game-layout{grid-template-columns:1fr;height:auto;overflow:visible}.canvas-wrap{aspect-ratio:4/3;order:-1;overflow:hidden}.panel-left{order:0}.panel-right{order:1}.panel{border-right:none;border-bottom:1px solid var(--panel-border);overflow:visible;height:auto}.panel-right{border-left:none;border-top:1px solid var(--panel-border);border-bottom:none}.equip-section{flex:none;overflow-y:visible;height:auto}.inventory-section{max-height:none}.log-section{flex:none;overflow-y:visible}.panel-right{padding-bottom:60px}.log-section{order:-1}.inventory-section{order:0}.btn,.option-btn{min-height:44px}.lb-sort-btn{min-height:44px;padding:8px 14px}.roster-card{padding:16px}.roster-new-card{padding:24px}}