*{box-sizing:border-box}body{margin:0;font-family:system-ui,Hiragino Sans,sans-serif;background:#16131a;color:#eee;min-height:100vh}.screen{display:none;flex-direction:column;align-items:center;padding:2rem 1rem;min-height:100vh}.screen.active{display:flex}.title-logo{font-size:2rem;font-weight:700;letter-spacing:.05em;margin-bottom:.25rem}.title-sub{color:#aaa;margin-bottom:2rem}.btn-primary,.btn-secondary{font-size:1rem;padding:.75rem 1.5rem;border-radius:.5rem;border:none;margin:.5rem 0;cursor:pointer}.btn-primary{background:#c0392b;color:#fff}.btn-secondary{background:#333;color:#eee}.hidden{display:none!important}#combat-units{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:480px}#combat-vs{font-weight:700;color:#555;padding:0 .5rem}.combat-unit{flex:1;text-align:center;position:relative}.unit-sprite{width:4.5rem;height:4.5rem;margin:0 auto .4rem;border-radius:.75rem;display:flex;align-items:center;justify-content:center;font-size:2.25rem;background:#2a2433;border:2px solid #443c52}#combat-player .unit-sprite{background:#2a3a4a;border-color:#3a6ea5}#combat-enemy .unit-sprite{background:#3a2424;border-color:#a53a3a}.unit-name{font-size:.85rem;color:#ccc;margin-bottom:.25rem}.unit-hpbar-outer{width:90%;height:.6rem;margin:0 auto;background:#2a2530;border-radius:1rem;overflow:hidden}.unit-hpbar-inner{height:100%;background:#4caf50;transition:width .25s ease-out,background-color .25s ease-out}.unit-hptext{font-size:.75rem;color:#999;margin-top:.2rem}.unit-sprite.lunge-right{animation:lunge-right .22s ease-out}.unit-sprite.lunge-left{animation:lunge-left .22s ease-out}.unit-sprite.hit-flash{animation:hit-flash .22s ease-out}.unit-sprite.crit-flash{animation:crit-flash .32s ease-out}.unit-sprite.dodge{animation:dodge .22s ease-out}@keyframes lunge-right{0%{transform:translate(0)}50%{transform:translate(1.25rem)}to{transform:translate(0)}}@keyframes lunge-left{0%{transform:translate(0)}50%{transform:translate(-1.25rem)}to{transform:translate(0)}}@keyframes hit-flash{0%{filter:brightness(1);transform:translate(0)}20%{filter:brightness(2.5) saturate(2);transform:translate(-.3rem)}40%{transform:translate(.3rem)}to{filter:brightness(1);transform:translate(0)}}@keyframes crit-flash{0%{filter:brightness(1);transform:scale(1)}25%{filter:brightness(3) saturate(3);transform:scale(1.15)}to{filter:brightness(1);transform:scale(1)}}@keyframes dodge{0%{transform:translateY(0);opacity:1}50%{transform:translateY(-.4rem);opacity:.5}to{transform:translateY(0);opacity:1}}.dmg-popup{position:absolute;top:0;left:50%;transform:translate(-50%);font-weight:700;font-size:1.1rem;color:#ffeb3b;pointer-events:none;animation:dmg-popup .6s ease-out forwards}.dmg-popup.crit{color:#ff5252;font-size:1.4rem}.dmg-popup.miss{color:#aaa;font-size:.95rem}@keyframes dmg-popup{0%{transform:translate(-50%);opacity:1}to{transform:translate(-50%,-1.5rem);opacity:0}}#screen-combat.shake{animation:screen-shake .22s ease-out}@keyframes screen-shake{0%,to{transform:translate(0)}25%{transform:translate(-.3rem)}75%{transform:translate(.3rem)}}#combat-log{width:100%;max-width:480px;height:10rem;overflow-y:auto;background:#221e28;border-radius:.5rem;padding:1rem;margin-top:1rem;font-size:.9rem;white-space:pre-line}#btn-settings-combat{position:fixed;bottom:1rem;right:1rem;z-index:100}#class-grid,#upgrade-options,#permanent-options{display:flex;flex-direction:column;gap:.75rem;width:100%;max-width:480px}.option-card{background:#221e28;border-radius:.5rem;padding:1rem;cursor:pointer;border:2px solid transparent}.option-card:hover{border-color:#c0392b}#global-stats-bar{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;justify-content:center;gap:0;padding:6px 8px;background:#0a0a0feb;border-bottom:1px solid #444;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);box-sizing:border-box}#global-stats-bar.hidden{display:none}.stats-bar{display:flex;justify-content:center;gap:0;padding:6px 8px;background:#00000040;border:1px solid #444;border-radius:6px;width:100%;max-width:480px;box-sizing:border-box;margin:6px auto}.stats-bar .stat-cell{display:flex;flex-direction:column;align-items:center;gap:1px;flex:1}.stats-bar .stat-label{font-size:.62rem;color:#888;letter-spacing:.3px}.stats-bar .stat-value{font-size:.95rem;font-weight:700;color:#e8d5a0}body:has(#global-stats-bar:not(.hidden)) #app{padding-top:52px}.title-row{display:flex;gap:.5rem;margin:.25rem 0}.btn-small{font-size:.85rem;padding:.5rem 1rem}.settings-row{display:flex;align-items:center;gap:.75rem;width:100%;max-width:400px;margin:.75rem 0}.settings-label{width:4rem;text-align:right;font-size:.9rem;color:#ccc;flex-shrink:0}.settings-slider{flex:1;accent-color:#c0392b;height:.5rem;cursor:pointer}.settings-val{width:2.5rem;text-align:right;font-size:.9rem;color:#e8d5a0;font-weight:700}