*,*:before,*:after{box-sizing:border-box}.header{position:relative;display:flex;align-items:center;justify-content:center;margin-bottom:1.5em}.config-icon-btn,.dice-icon-btn{position:absolute;background:transparent;border:none;color:var(--color-icon-btn);padding:.6em;line-height:0;border-radius:50%;min-height:44px;min-width:44px;display:flex;align-items:center;justify-content:center}.config-icon-btn{right:0}.dice-icon-btn{left:0}.wakelock-icon-btn{position:absolute;right:3em;background:transparent;border:none;color:var(--color-icon-btn);padding:.6em;line-height:0;border-radius:50%;min-height:44px;min-width:44px;display:flex;align-items:center;justify-content:center}button.wakelock-icon-btn:hover,.config-icon-btn:hover,.dice-icon-btn:hover{background:var(--color-icon-btn-hover-bg);color:var(--color-icon-btn-hover)}:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--color-section-bg: #333;--color-modal-bg: #222;--color-modal-text: #fff;--color-border: #444;--color-table-header-bg: #222;--color-icon-btn: rgba(255,255,255,.6);--color-icon-btn-hover-bg: rgba(255,255,255,.1);--color-icon-btn-hover: #fff}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;min-width:320px;min-height:100vh}h1{font-size:clamp(1.8rem,6vw,3.2em);line-height:1.1}#app{max-width:1280px;margin:0 auto;padding:2rem;text-align:center}.hp-controls{display:flex;align-items:center;justify-content:center;gap:1rem}.hp-controls button{flex:1}.hp-display{display:flex;flex-direction:column;align-items:center;gap:.15em}.hp-temp{font-size:.8em;opacity:.7}.hp-section,.spell-section,.currency-section{background:var(--color-section-bg);border-radius:12px;padding:1.5em;margin-bottom:2em;box-shadow:0 2px 8px #0003;width:100%;max-width:500px;margin-left:auto;margin-right:auto;display:block}.hp-section h2,.spell-section h2,.currency-section h2{margin-top:0}.hp-section button,.spell-section button,.currency-section button{margin:0 .5em}.spell-list{width:100%;margin-top:.5em;display:flex;flex-direction:column;gap:.75em}.spell-list-row{display:flex;flex-direction:column;gap:.4em;padding-bottom:.75em;border-bottom:1px solid var(--color-border)}.spell-list-row:last-child{border-bottom:none;padding-bottom:0}.spell-row-info{display:flex;align-items:center;gap:.75em;justify-content:space-between}.spell-level-badge{width:2em;height:2em;border-radius:50%;background:#b7770d;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.95em;flex-shrink:0}.spell-dots{display:flex;flex-wrap:wrap;gap:.35em;align-items:center;justify-content:flex-end}.spell-dot{width:.75em;height:.75em;border-radius:50%;display:inline-block}.spell-dot.available{background:#b7770d}.spell-dot.used{background:transparent;border:2px solid #b7770d;opacity:.35}.spell-row-actions{display:flex;gap:.5em}.spell-row-actions button{flex:1}.depleted{opacity:.4}.config-section,.hp-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--color-modal-bg);color:var(--color-modal-text);border-radius:12px;box-shadow:0 4px 16px #0006;padding:2em;min-width:320px;width:90vw;max-width:420px;z-index:1000;display:flex}.config-content{width:100%}.hp-modal .stepper{justify-content:center;margin-bottom:1.5em}.btn-danger{background:#c0392b}.btn-danger:hover{background:#a93226}.btn-heal{background:#27ae60}.btn-heal:hover{background:#1e8449}.btn-temp{background:#2980b9}.btn-temp:hover{background:#2471a3}.currency-rows{display:flex;flex-direction:column;gap:.4em;margin-bottom:1em}.currency-row{display:flex;align-items:center;justify-content:space-between}.currency-label{display:flex;align-items:center;gap:.5em;flex:1}.currency-coin{width:.9em;height:.9em;border-radius:50%;display:inline-block;flex-shrink:0;box-shadow:inset 0 -2px 3px #0000004d}.currency-controls{display:flex;align-items:center;border-radius:8px;overflow:hidden}.currency-controls button{width:2.5em;height:2.5em;min-height:unset;padding:0;border-radius:0}.currency-input{min-width:3em;width:3em;text-align:center;background:transparent;border:none;border-bottom:1px solid var(--color-border);color:inherit;font:inherit;font-size:1em;padding:.1em 0}.currency-input:focus{outline:none;border-bottom-color:#646cff}.currency-total{border-top:1px solid var(--color-border);padding-top:.75em;text-align:right;opacity:.7;font-size:.95em}.dice-history{display:flex;flex-direction:column;gap:.4em;margin-bottom:1em;min-height:2em}.dice-history-empty{opacity:.4;font-size:.9em}.dice-history-row{display:flex;align-items:center;justify-content:space-between;padding:.3em 0;border-bottom:1px solid var(--color-border)}.dice-history-row:last-child{border-bottom:none}.dice-history-left{display:flex;align-items:center;gap:.5em}.dice-history-die{opacity:.5;font-size:.9em;min-width:2.5em}.dice-history-row.latest .dice-history-die{opacity:1;font-weight:700}.dice-history-badge{font-size:.7em;background:#7d3c98;color:#fff;border-radius:4px;padding:.1em .4em}.dice-history-total{font-size:1.3em;font-weight:700}.dice-history-row.latest .dice-history-total{font-size:1.6em;color:#a855f7}.dice-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--color-modal-bg);color:var(--color-modal-text);border-radius:12px;box-shadow:0 4px 16px #0006;padding:2em;width:90vw;max-width:420px;z-index:1000}.dice-buttons{display:flex;flex-wrap:wrap;justify-content:center;gap:.5em;margin-bottom:1em}.die-btn{background:#7d3c98;min-width:3.5em}.die-btn:hover{background:#6c3483}.hp-temp-row{display:flex;justify-content:center;gap:.75em;margin-top:.75em}.hp-temp-row button{flex:1;white-space:nowrap}.btn-rest{background:#b7770d}.btn-rest:hover{background:#9e6a0c}.config-section h3{margin-top:0}.config-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:1em}.config-slots-grid{display:flex;flex-direction:column;gap:.5em;margin-bottom:1em}.config-slot-item{display:flex;align-items:center;justify-content:space-between}.stepper{display:flex;align-items:center;gap:.5em}.stepper span{min-width:2em;text-align:center}.stepper-input{min-width:3em;width:3em;text-align:center;background:transparent;border:none;border-bottom:1px solid var(--color-border);color:inherit;font:inherit;font-size:1em;padding:.1em 0}.stepper-input:focus{outline:none;border-bottom-color:#646cff}.stepper button{padding:.6em 1em}.config-actions{display:flex;justify-content:center;gap:1em;margin-top:1.5em}button{border-radius:8px;border:none;padding:.75em 1.3em;font-size:1.05em;font-weight:500;font-family:inherit;background:#646cff;color:#fff;cursor:pointer;transition:background .2s;min-height:44px;touch-action:manipulation}button:hover{background:#535bf2}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}button:disabled{pointer-events:none;opacity:.5}.notes-section{background:var(--color-section-bg);border-radius:12px;padding:1.5em;margin-bottom:2em;width:100%;max-width:500px;margin-left:auto;margin-right:auto}.notes-section h2{margin-top:0}.notes-textarea{width:100%;min-height:8em;background:var(--color-modal-bg);color:var(--color-modal-text);border:1px solid var(--color-border);border-radius:8px;padding:.75em;font-family:inherit;font-size:.95em;line-height:1.5;resize:vertical;box-sizing:border-box}.notes-textarea:focus{outline:none;border-color:#646cff}.setup-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60vh;gap:1em}.setup-subtitle{opacity:.7;margin:0}.setup-form{display:flex;flex-direction:column;gap:1em;width:100%;max-width:340px;align-items:stretch}.setup-name-input{font-size:1.1em;padding:.75em 1em;border-radius:8px;border:1px solid var(--color-border);background:var(--color-modal-bg);color:var(--color-modal-text);font-family:inherit;outline:none;width:100%}.setup-name-input:focus{border-color:#646cff}.setup-stepper{justify-content:center;font-size:1.5em}.setup-stepper span{min-width:3em}@media(max-width:600px){:root{font-size:18px}#app{padding:1rem}}@media(prefers-color-scheme:light){:root{color:#213547;background-color:#fff;--color-section-bg: #f0f0f0;--color-modal-bg: #f8f8f8;--color-modal-text: #213547;--color-border: #ddd;--color-table-header-bg: #e4e4e4;--color-icon-btn: rgba(0,0,0,.4);--color-icon-btn-hover-bg: rgba(0,0,0,.08);--color-icon-btn-hover: #000}a:hover{color:#747bff}}