:root{--bg-gradient: linear-gradient(135deg, #6e8efb, #a777e3);--bg-color: transparent;--text-color: white;--text-opacity: 1;--text-opacity-secondary: .8;--primary-color: #007bff;--primary-hover: #0056b3;--overlay-bg: rgba(0, 0, 0, .5);--overlay-bg-dark: rgba(0, 0, 0, .8);--overlay-bg-darker: rgba(0, 0, 0, .9);--bottom-bar-bg: rgba(0, 0, 0, .9);--border-color: rgba(255, 255, 255, .3);--border-color-light: rgba(255, 255, 255, .1);--shadow-color: rgba(0, 0, 0, .3);--shadow-color-dark: rgba(0, 0, 0, .6);--button-text-opacity: 1;--logo-opacity: 1}[data-theme=dark]{--bg-gradient: none;--bg-color: #000000;--text-color: white;--text-opacity: .9;--text-opacity-secondary: .7;--primary-color: #1e3a8a;--primary-hover: #1e40af;--overlay-bg: rgba(20, 20, 20, .95);--overlay-bg-dark: rgba(15, 15, 15, .95);--overlay-bg-darker: rgba(10, 10, 10, .95);--bottom-bar-bg: rgba(10, 10, 10, .95);--border-color: rgba(255, 255, 255, .2);--border-color-light: rgba(255, 255, 255, .05);--shadow-color: rgba(0, 0, 0, .5);--shadow-color-dark: rgba(0, 0, 0, .8);--button-text-opacity: .85;--logo-opacity: .7}body{font-family:Arial,sans-serif;margin:0;padding:0;background:var(--bg-gradient);background-color:var(--bg-color);color:rgba(255,255,255,var(--text-opacity));overflow:hidden;height:100vh}.container{display:flex;flex-direction:column;height:100vh}.header-wrapper{min-height:92px;z-index:10}.header{text-align:center;padding:1rem 5rem 1rem 12rem;background-color:var(--overlay-bg);z-index:10;transition:all .4s ease;min-height:40px;position:relative}.header.no-result{min-height:40px}.header.has-result{min-height:60px}.logo-container{transition:all .4s ease}.logo-text{position:absolute;top:10px;left:50%;transform:translate(-50%);max-height:120px;width:auto;transition:all .4s ease;opacity:var(--logo-opacity)}.logo-only{position:relative;display:inline-block;vertical-align:middle;max-height:60px;width:auto;margin-right:1rem;transition:all .4s ease;opacity:var(--logo-opacity)}.result-container{transition:all .4s ease;display:flex;align-items:center;justify-content:center;flex-wrap:wrap}h1{margin:0;font-size:2.5rem;text-shadow:2px 2px 4px rgba(0,0,0,.3);transition:all .4s ease;display:inline-block}.dice-container{flex:1;position:relative;overflow:hidden}#dice-box{width:100%;height:100%;display:block;position:relative;z-index:1;outline:none}#dice-box canvas{width:100%!important;height:100%!important;display:block!important;outline:none}.controls{display:flex;flex-direction:column;gap:0;padding:0 1rem 1rem;background-color:var(--overlay-bg);z-index:10;overflow-y:auto;max-height:50vh}.controls>div{display:flex;justify-content:space-between;align-items:center}.modifiers{display:flex;justify-content:center;gap:2rem;flex-wrap:wrap;background-color:transparent;padding:1.5rem;border-radius:0;border:none;margin-top:0;position:relative}.advantage-controls,.modifier-controls{display:flex;align-items:center;gap:.5rem}.modifier-controls{align-items:center}.modifier-btn{background-color:#6c757d;color:#fff;border:none;width:30px;height:30px;padding:0;border-radius:50%;cursor:pointer;font-size:1.2rem;display:flex;align-items:center;justify-content:center}.modifier-btn:hover{background-color:#5a6268}.modifier-clear-btn{background-color:#6c757d;color:#fff;border:none;padding:.25rem .75rem;border-radius:6px;cursor:pointer;font-size:.85rem;display:flex;align-items:center;justify-content:center;gap:.25rem;margin-left:.5rem;transition:background-color .2s ease}.modifier-clear-btn:hover{background-color:#5a6268}.modifier-display{min-width:40px;text-align:center;font-weight:700;font-size:1.2rem}.toggle-buttons{display:flex;gap:.25rem}.toggle-btn{background-color:#ffffff1a;color:#fff;border:1px solid rgba(255,255,255,.3);border-radius:4px;padding:.5rem 1rem;cursor:pointer;transition:all .3s;font-size:.9rem}.toggle-btn:hover{background-color:#fff3}.toggle-btn.active{background-color:var(--primary-color);border-color:var(--primary-color)}label{font-weight:700;margin-right:.5rem}.dice-values{display:flex;gap:2rem;font-size:1.5rem;font-weight:700}.hope-value{color:#4caf50}.fear-value{color:#f44336}.advantage-value{color:#90ee90}.disadvantage-value{color:#ffb3b3}button{background-color:var(--primary-color);color:rgba(255,255,255,var(--button-text-opacity));border:none;padding:.75rem 1.5rem;font-size:1.2rem;border-radius:5px;cursor:pointer;transition:background-color .3s;box-shadow:0 4px 6px var(--shadow-color)}button:hover{background-color:var(--primary-hover)}button:disabled{opacity:.5;cursor:not-allowed}.result{font-size:1.5rem;font-weight:700;text-align:center}.roll-history-panel{position:fixed;z-index:1000;background-color:#000000e6;border-radius:10px;transition:transform .3s ease,opacity .3s ease,visibility 0s linear .3s;opacity:0;visibility:hidden}.roll-history-panel.visible{opacity:1;visibility:visible;transition:transform .3s ease,opacity .3s ease,visibility 0s linear 0s}@media (max-width: 768px){.roll-history-panel{bottom:0;left:0;right:0;max-height:70vh;border-radius:15px 15px 0 0;transform:translateY(100%)}.roll-history-panel.visible{transform:translateY(0)}}@media (min-width: 769px){.roll-history-panel{top:5rem;right:1rem;width:250px;max-height:calc(100vh - 10rem);transform:translate(100%)}.roll-history-panel.visible{transform:translate(0)}}.dark-mode-toggle{position:absolute;top:1rem;right:4.5rem;background-color:var(--overlay-bg-dark);color:rgba(255,255,255,var(--text-opacity));border:2px solid var(--border-color);border-radius:8px;width:44px;height:44px;font-size:1.4rem;cursor:pointer;z-index:30;transition:all .3s ease;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px var(--shadow-color);text-align:center}.dark-mode-toggle:hover{background-color:var(--overlay-bg-darker);border-color:#ffffff80;box-shadow:0 4px 12px #0006}.dark-mode-toggle:active{transform:translateY(0);box-shadow:0 2px 6px var(--shadow-color)}.history-toggle{position:absolute;top:1rem;right:1rem;background-color:var(--overlay-bg-dark);color:rgba(255,255,255,var(--text-opacity));border:2px solid var(--border-color);border-radius:8px;width:44px;height:44px;font-size:1.1rem;font-weight:700;cursor:pointer;z-index:30;transition:all .3s ease;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px var(--shadow-color);text-align:center}.history-toggle:hover{background-color:#000000e6;border-color:#ffffff80;box-shadow:0 4px 12px #0006}.history-toggle:active{transform:translateY(0);box-shadow:0 2px 6px #0000004d}.roll-history h3{margin-top:0;font-size:1.2rem;opacity:.8}.history-item{padding:.75rem;border-bottom:1px solid rgba(255,255,255,.1);font-size:.9rem;transition:opacity .3s ease}.history-item:last-child{border-bottom:none}@media (min-width: 769px){.history-item{padding:.5rem;margin-bottom:.5rem;border-radius:5px}.history-item:last-child{margin-bottom:0}}.history-item:nth-child(4){opacity:1}.history-item:nth-child(5){opacity:.9}.history-item:nth-child(6){opacity:.8}.history-item:nth-child(7){opacity:.7}.history-item:nth-child(8){opacity:.6}.history-item:nth-child(9){opacity:.5}.history-item:nth-child(10){opacity:.4}.history-item:nth-child(11){opacity:.3}.history-item:nth-child(12){opacity:.2}.history-item:nth-child(13){opacity:.1}.history-item:hover{opacity:1!important}.history-item .dice-values{display:flex;gap:1rem}.history-item .hope{color:#4caf50}.history-item .fear{color:#f44336}.history-item .advantage{color:#90ee90}.history-item .disadvantage{color:#ffb3b3}.history-item .outcome{font-weight:700}.history-icon{height:20px;width:20px;display:inline-block;color:#fff!important;filter:brightness(0) invert(1)}[x-cloak]{display:none!important}.session-toggle-container{margin-top:1rem;text-align:center}.session-toggle-btn{background-color:#000c;color:#fff;border:2px solid rgba(255,255,255,.3);border-radius:8px;padding:.5rem 1rem;font-size:.9rem;cursor:pointer;transition:all .3s ease;box-shadow:0 2px 8px #0000004d}.session-toggle-btn:hover{background-color:#000000e6;border-color:#ffffff80;box-shadow:0 4px 12px #0006}.session-panel{position:fixed;z-index:40;background:linear-gradient(135deg,#14141efa,#0a0a14fa);border:1px solid rgba(255,255,255,.15);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);transition:transform .3s ease,opacity .3s ease,visibility 0s linear .3s;opacity:0;visibility:hidden;display:flex;flex-direction:column}.session-panel.visible{opacity:1;visibility:visible;transition:transform .3s ease,opacity .3s ease,visibility 0s linear 0s}@media (max-width: 768px){.session-panel{bottom:0;left:0;right:0;max-height:80vh;border-radius:20px 20px 0 0;transform:translateY(100%);box-shadow:0 -8px 32px #0009}.session-panel.visible{transform:translateY(0)}}@media (min-width: 769px){.session-panel{top:50%;left:50%;width:90%;max-width:450px;max-height:85vh;border-radius:16px;padding:2rem;transform:translate(-50%,-50%) scale(.95);box-shadow:0 20px 60px #000c,0 8px 32px #0006,inset 0 1px #ffffff1a;overflow-y:auto}.session-panel.visible{transform:translate(-50%,-50%) scale(1)}}.desktop-dialog-close{position:absolute;top:1rem;right:1rem;width:36px;height:36px;padding:0;background:#ffffff14;color:#fffc;border:1px solid rgba(255,255,255,.15);border-radius:50%;font-size:1.2rem;line-height:1;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;font-family:inherit;backdrop-filter:blur(10px)}.desktop-dialog-close:hover{background:#ffffff26;border-color:#ffffff4d;color:#fff;transform:scale(1.05)}.desktop-multiplayer-button{position:fixed;top:1rem;left:1rem;z-index:20}.multiplayer-top-btn{padding:.75rem 1.25rem;background:#000c;color:#fff;border:2px solid rgba(255,255,255,.2);border-radius:8px;font-size:.9rem;cursor:pointer;transition:all .3s ease;font-family:inherit;display:flex;align-items:center;gap:.5rem;box-shadow:0 2px 8px #0000004d}.multiplayer-top-btn:hover{background:#000000e6;border-color:#fff6;box-shadow:0 4px 12px #0006}.session-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#0009;z-index:35;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);transition:opacity .3s ease,visibility 0s linear .3s;opacity:0;visibility:hidden}.session-backdrop.visible{opacity:1;visibility:visible;transition:opacity .3s ease,visibility 0s linear 0s}.session-panel .dialog-header{padding:1rem;border-bottom:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;align-items:center;flex-shrink:0}.session-panel .dialog-header h3{margin:0;color:#fff;font-size:1.2rem}.session-panel .dialog-close{background:none;border:none;color:#ffffffb3;font-size:1.2rem;cursor:pointer;padding:.25rem;line-height:1}.session-panel .dialog-close:hover{color:#fff}.session-panel .dialog-content{padding:1rem;overflow-y:auto;flex:1}@media (min-width: 769px){.session-panel .dialog-header{padding:0 0 1rem;border-bottom:none}.session-panel .dialog-close{display:none}.session-panel .dialog-content{padding:0}}.session-panel h3{margin-top:0;margin-bottom:1.5rem;color:#fff;font-size:1.4rem;font-weight:600;text-align:center;background:linear-gradient(135deg,#fff,#e0e0e0);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.session-input{margin-bottom:1.25rem}.session-input:last-child{margin-bottom:0}.player-name-input,.session-id-input{width:100%;padding:1rem;border:1px solid rgba(255,255,255,.2);border-radius:12px;background:#ffffff14;color:#fff;font-size:1rem;box-sizing:border-box;transition:all .3s ease;backdrop-filter:blur(10px)}.player-name-input::placeholder,.session-id-input::placeholder{color:#fff9}.player-name-input:focus,.session-id-input:focus{outline:none;border-color:#007bff;background:#ffffff1f;box-shadow:0 0 0 3px #007bff33}.session-btn{width:100%;padding:1rem;margin-bottom:.75rem;border:1px solid rgba(255,255,255,.2);border-radius:12px;font-size:1rem;cursor:pointer;transition:all .3s ease;font-weight:600;backdrop-filter:blur(10px);position:relative;overflow:hidden}.create-btn{background:linear-gradient(135deg,#28a745,#20c997);color:#fff;border-color:#28a74580}.create-btn:hover:not(:disabled){background:linear-gradient(135deg,#218838,#1fa886);box-shadow:0 8px 25px #28a7454d}.join-btn{background:linear-gradient(135deg,#007bff,#0056b3);color:#fff;border-color:#007bff80}.join-btn:hover:not(:disabled){background:linear-gradient(135deg,#0056b3,#004085);box-shadow:0 8px 25px #007bff4d}.leave-btn{background:linear-gradient(135deg,#dc3545,#c82333);color:#fff;border-color:#dc354580}.leave-btn:hover{background:linear-gradient(135deg,#c82333,#bd2130);box-shadow:0 8px 25px #dc35454d}.session-btn:disabled{opacity:.5;cursor:not-allowed}.session-actions{display:flex;gap:.75rem;justify-content:flex-end;margin-top:1.5rem}.session-actions .session-btn{flex:1;margin-bottom:0}.secondary-btn{background:linear-gradient(135deg,#6c757d,#5a6268);color:#fff;border-color:#6c757d80}.secondary-btn:hover:not(:disabled){background:linear-gradient(135deg,#5a6268,#545b62);box-shadow:0 8px 25px #6c757d4d}.desktop-only{display:block}@media (max-width: 768px){.desktop-only{display:none}.session-actions{display:block}.session-actions .session-btn{width:100%;margin-bottom:.75rem}}.join-divider{text-align:center;margin:1rem 0;color:#fff9;font-style:italic}.session-error{background-color:#dc354533;border:1px solid #dc3545;border-radius:4px;padding:.5rem;margin-top:.5rem;color:#dc3545;font-size:.9rem;text-align:center}.room-title{color:#fff;font-size:1.2rem;font-weight:600}.room-name-line{margin-bottom:.5rem}.room-code-line{margin-bottom:.5rem;display:flex;align-items:center;gap:2rem}.room-code-label{color:#ffffffb3;font-size:.9rem;font-weight:500}.room-title .room-friendly-name{background:linear-gradient(135deg,#fff,#e0e7ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.room-title .room-code{color:#fff;font-family:Courier New,monospace;font-size:.9rem;font-weight:600;letter-spacing:.5px}.room-hidden{color:#ffffffb3;font-style:italic;cursor:pointer}.room-hidden:hover{color:#fff}.qr-code-float{position:absolute;top:2rem;right:2rem;background:#fff;padding:.5rem;border-radius:8px;box-shadow:0 4px 12px #0003}@media (max-width: 768px){.qr-code-float{top:1rem;right:1rem}}.qr-code{width:80px;height:80px;display:block;border-radius:4px}.room-controls{margin-bottom:1.5rem}.session-id-hidden{color:#ffffffb3;cursor:pointer;padding:.5rem;border-radius:4px;transition:all .2s ease}.session-id-hidden:hover{background:#ffffff1a;color:#fff}.players-section{margin-bottom:1.5rem}.players-section h4{margin:0 0 1rem;color:#ffffffe6;font-size:1rem;font-weight:600;padding-bottom:.5rem;border-bottom:1px solid rgba(255,255,255,.1)}.connection-status{display:flex;align-items:center;gap:.5rem;font-size:.85rem;font-weight:500;padding:.25rem .75rem;border-radius:12px;transition:all .2s ease}.connection-status.connected{background:#22c55e1a;color:#22c55e}.connection-status.connecting{background:#fbbf241a;color:#fbbf24}.connection-status.disconnected,.connection-status.error{background:#ef44441a;color:#ef4444;transition:all .2s ease;border:1px solid transparent}.session-id-hidden:hover{background-color:#fff3;border-color:#ffffff4d;transform:scale(1.05)}.copy-btn{background:#34d39926;border:1px solid rgba(52,211,153,.3);color:#10b981;padding:.5rem 1rem;border-radius:6px;cursor:pointer;font-size:.9rem;font-weight:500;transition:all .2s ease}.copy-btn:hover{background:#34d39940;border-color:#34d39980;color:#fff}.copy-btn:active{background:#34d3994d}.player-item{display:flex;justify-content:space-between;align-items:center;padding:.5rem 0;border-bottom:1px solid rgba(255,255,255,.05);font-size:.9rem;color:#ffffffe6}.player-item:last-child{border-bottom:none}.player-item.self{font-weight:600;color:#6e8efb}.streamer-mode-toggle{margin-bottom:.75rem}.toggle-switch{display:flex;align-items:center;gap:.75rem;cursor:pointer;padding:.5rem;border-radius:6px;transition:background-color .3s ease}.toggle-switch:hover{background-color:#ffffff0d}.toggle-switch input[type=checkbox]{display:none}.toggle-slider{position:relative;display:inline-block;width:50px;height:24px;background-color:#fff3;border-radius:24px;transition:background-color .3s ease;border:1px solid rgba(255,255,255,.3)}.toggle-slider:before{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;background-color:#fff;border-radius:50%;transition:transform .3s ease;box-shadow:0 2px 4px #0003}.toggle-switch input:checked+.toggle-slider{background-color:orange;border-color:orange}.toggle-switch input:checked+.toggle-slider:before{transform:translate(26px)}.toggle-label{color:#fff;font-size:.9rem;font-weight:500;user-select:none}.streamer-indicator{color:orange;font-size:.8rem;margin-left:.5rem;padding:.25rem .5rem;background-color:#ffa5001a;border-radius:4px;border:1px solid rgba(255,165,0,.3)}.player-item .inactive{color:#ffffff80;font-style:italic;font-size:.8rem}.player-name-line{font-size:.8rem;color:#007bff;font-weight:500;margin-bottom:.25rem;padding-bottom:.125rem}.roll-details{display:flex;justify-content:space-between;gap:1rem}.mobile-bottom-bar,.mobile-history-tap-area{display:none}@media (max-width: 768px){.dark-mode-toggle{display:none}.mobile-history-tap-area{display:block;position:absolute;inset:0;z-index:10;cursor:pointer;-webkit-tap-highlight-color:rgba(255,255,255,.1)}.desktop-controls{display:none}.mobile-bottom-bar{display:block;position:fixed;bottom:0;left:0;right:0;background:transparent;z-index:30}.bottom-button-bar{display:flex;align-items:center;justify-content:space-between;padding:.75rem;background-color:var(--bottom-bar-bg)}.bottom-left,.bottom-center,.bottom-right{display:flex;align-items:center;justify-content:center}.bottom-left,.bottom-right{flex:1}.bottom-center{flex:2}.bottom-section-btn{background-color:#ffffff1a;color:#fff;border:2px solid rgba(255,255,255,.3);border-radius:8px;padding:.75rem;cursor:pointer;transition:all .3s ease;width:100%;max-width:100px;box-shadow:none}.bottom-section-btn:hover{background-color:#fff3;border-color:#ffffff80;box-shadow:none}.bottom-section-btn.active{background-color:var(--primary-color);border-color:var(--primary-color);box-shadow:none}.section-btn-content{display:flex;flex-direction:column;align-items:center;gap:.25rem}.section-btn-icon{font-size:1.2rem;height:20px;filter:brightness(0) invert(1);transition:filter .3s ease}.section-btn-text{font-size:.8rem;font-weight:500}.section-btn-value{font-size:.7rem;background-color:#fff3;padding:.125rem .375rem;border-radius:10px;min-width:20px}.roll-button-container{position:relative;display:flex;align-items:center;justify-content:center}.bottom-roll-button{background-color:var(--primary-color);color:rgba(255,255,255,var(--button-text-opacity));border:none;padding:1rem 2rem;font-size:1.2rem;font-weight:700;border-radius:8px;cursor:pointer;box-shadow:none;transition:all .3s ease;width:100%;max-width:160px}.bottom-roll-button:hover:not(:disabled){background-color:#0056b3;box-shadow:none}.bottom-roll-button:disabled{opacity:.6;cursor:not-allowed}.multiplayer-indicator{position:absolute;bottom:-8px;right:-8px;background-color:#000c;color:#fff;border:2px solid rgba(255,255,255,.3);border-radius:20px;padding:.25rem .5rem;font-size:.8rem;cursor:pointer;display:flex;align-items:center;gap:.25rem;transition:all .3s ease;min-width:24px;height:24px;justify-content:center}.multiplayer-indicator:hover{background-color:#000000e6;border-color:#ffffff80;transform:scale(1.1)}.multiplayer-indicator.connected{border-color:#28a745}.multiplayer-indicator.connecting{border-color:#ffc107}.multiplayer-indicator.disconnected,.multiplayer-indicator.error{border-color:#dc3545}.player-count{font-weight:700;font-size:.75rem}.roll-type-selector.mobile-controls{background:transparent;padding:.5rem;padding-bottom:0}.roll-type-selector.mobile-controls .roll-type-btn{background:#0000004d;color:rgba(255,255,255,var(--button-text-opacity));padding:.75rem 1rem;border-radius:8px 8px 0 0;cursor:pointer;transition:all .3s ease;font-weight:500;min-width:70px;text-align:center;border:none;border-top:4px solid rgba(255,255,255,.3);position:relative;flex:1;font-size:.9rem}.roll-type-selector.mobile-controls .roll-type-btn:hover{background:#ffffff1a;border-top:4px solid rgba(200,200,200,.6)}.roll-type-selector.mobile-controls .roll-type-btn.check-tab:hover,.roll-type-selector.mobile-controls .roll-type-btn.damage-tab:hover,.roll-type-selector.mobile-controls .roll-type-btn.gm-tab:hover{background:#ffffff1a;border-top:4px solid rgba(200,200,200,.6);box-shadow:none}.roll-type-selector.mobile-controls .roll-type-btn:disabled{opacity:.5;cursor:not-allowed}.mobile-base-dice-controls{background:#000000e6;padding:.75rem 1rem 0}.base-dice-row{display:flex;align-items:center;justify-content:space-around}.dice-count-controls{display:flex;align-items:center;gap:.75rem}.dice-control-btn{background-color:#6c757d;color:#fff;border:none;width:40px;height:40px;border-radius:50%;cursor:pointer;font-size:1.2rem;font-weight:700;display:flex;align-items:center;justify-content:center;box-shadow:none;transition:background-color .3s}.dice-control-btn:hover:not(:disabled){background-color:#5a6268}.dice-control-btn:disabled{opacity:.5;cursor:not-allowed}.dice-count-display{min-width:40px;text-align:center;font-weight:700;font-size:1.3rem;color:#fff}.mobile-dice-select{background:#ffffff1a;color:#fff;border:1px solid rgba(255,255,255,.3);border-radius:6px;padding:.5rem .75rem;font-size:1.2rem;font-weight:500;min-width:80px}.mobile-dice-select option{background:#2c2c2c;color:#fff}.mobile-dice-select:focus{outline:none;border-color:#ff6b35;box-shadow:0 0 5px #ff6b3580}.roll-type-selector.mobile-controls .roll-type-btn.check-tab.active{background:#000000e6;border-top:4px solid #4caf50;color:rgba(255,255,255,var(--button-text-opacity));box-shadow:none}.roll-type-selector.mobile-controls .roll-type-btn.check-tab:active{border:none;border-top:4px solid #4caf50}.roll-type-selector.mobile-controls .roll-type-btn.damage-tab.active{background:#000000e6;border-top:4px solid #ff6b35;color:rgba(255,255,255,var(--button-text-opacity));box-shadow:none}.roll-type-selector.mobile-controls .roll-type-btn.damage-tab:active{border:none;border-top:4px solid #ff6b35}.roll-type-selector.mobile-controls .roll-type-btn.gm-tab.active{background:#000000e6;border-top:4px solid #8e44ad;color:rgba(255,255,255,var(--button-text-opacity));box-shadow:none}.roll-type-selector.mobile-controls .roll-type-btn.gm-tab:active{border:none;border-top:4px solid #8e44ad}.mobile-dialog{position:fixed;bottom:120px;left:.5rem;right:.5rem;background-color:#000000f2;border-radius:12px 12px 0 0;border:2px solid rgba(255,255,255,.2);box-shadow:0 -4px 16px #00000080;z-index:35;max-height:60vh;overflow-y:auto}.dialog-header{display:flex;justify-content:space-between;align-items:center;padding:1rem;border-bottom:1px solid rgba(255,255,255,.2)}.dialog-header h3{margin:0;color:#fff;font-size:1.2rem}.dialog-close{background:none;border:none;color:#fff;font-size:1.5rem;cursor:pointer;padding:0;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background-color .2s}.dialog-close:hover{background-color:#ffffff1a}.dialog-content{padding:1rem}.dialog-section{margin-bottom:1.5rem}.dialog-section:last-child{margin-bottom:0}.dialog-section label{display:block;color:#fff;font-weight:500;margin-bottom:.5rem}.modifier-controls-dialog{display:flex;align-items:center;justify-content:center;gap:1rem}.modifier-btn-dialog{background-color:#6c757d;color:#fff;border:none;width:50px;height:50px;border-radius:50%;cursor:pointer;font-size:1.5rem;font-weight:700;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 4px #0003;transition:background-color .3s}.modifier-btn-dialog:hover{background-color:#5a6268}.modifier-display-dialog{min-width:60px;text-align:center;font-weight:700;font-size:1.5rem;color:#fff}.clear-all-btn{background-color:#6c757d;color:#fff;border:none;padding:.75rem 1.5rem;border-radius:8px;cursor:pointer;font-size:1rem;font-weight:500;width:100%;transition:background-color .3s}.clear-all-btn:hover{background-color:#5a6268}.action-btn{background-color:#ffffff1a;color:#fff;border:2px solid rgba(255,255,255,.3);border-radius:8px;padding:1rem;cursor:pointer;width:100%;display:flex;align-items:center;gap:1rem;font-size:1rem;transition:all .3s}.action-btn:hover{background-color:#fff3;border-color:#ffffff80}.action-btn-icon{height:24px;width:24px}.action-btn-icon img,img.action-btn-icon{filter:brightness(0) invert(1)}.roll-history-panel .dialog-header{padding:1rem;border-bottom:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;align-items:center}.roll-history-panel .dialog-header h3{margin:0;color:#fff;font-size:1.1rem}.roll-history-panel .dialog-close{background:none;border:none;color:#ffffffb3;font-size:1.2rem;cursor:pointer;padding:.25rem;line-height:1}.roll-history-panel .dialog-close:hover{color:#fff}.roll-history-panel .dialog-content{padding:1rem;overflow-y:auto;flex:1}.empty-history{text-align:center;color:#ffffffb3;padding:2rem;font-style:italic}.history-list{max-height:calc(70vh - 4rem);overflow-y:auto}.dialog-backdrop{position:fixed;inset:0;background-color:#0000004d;z-index:34}.dice-container{margin-bottom:135px}.history-toggle{display:none}.logo-text{max-height:100px;top:5px}.logo-only{max-height:40px;margin-right:.5rem}h1{font-size:2rem}.result-container{flex-direction:column;gap:.5rem}.toast-container{top:4rem;left:1rem;right:1rem;transform:none;max-width:none}.header{padding:1rem}.header.no-result{min-height:35px}.header.has-result{min-height:70px}.desktop-multiplayer-button,.desktop-dialog-close{display:none!important}}@media (max-width: 480px){.container{padding:0}.bottom-section-btn{padding:.5rem;max-width:80px}.section-btn-icon{font-size:1rem}.section-btn-text{font-size:.7rem}.bottom-roll-button{padding:.875rem 1.5rem;font-size:1.1rem;max-width:140px}.multiplayer-indicator{bottom:-6px;right:-6px;padding:.2rem .4rem;font-size:.7rem;min-width:20px;height:20px}.player-count{font-size:.65rem}.dialog-header{padding:.75rem}.dialog-header h3{font-size:1.1rem}.dialog-content{padding:.75rem}.modifier-btn-dialog{width:45px;height:45px;font-size:1.3rem}.modifier-display-dialog{font-size:1.3rem;min-width:50px}.action-btn{padding:.875rem;font-size:.9rem}.action-btn-icon{height:20px;width:20px}.action-btn-icon img,img.action-btn-icon{filter:brightness(0) invert(1)}h1{font-size:1.75rem}.session-panel{padding:1rem}.dice-container{margin-bottom:135px}.mobile-dialog{bottom:120px}}@media (min-width: 769px){.roll-history-panel{right:1rem;padding:1rem;display:flex;flex-direction:column}.roll-history-panel .dialog-header{padding:0 0 1rem;border-bottom:none;flex-shrink:0}.roll-history-panel .dialog-close{display:none}.roll-history-panel .dialog-content{padding:0;flex:1;overflow:hidden}.history-list{max-height:calc(100vh - 12rem)}}.toast-container{position:fixed;top:6rem;left:50%;transform:translate(-50%);z-index:1000;pointer-events:none;display:flex;flex-direction:column;gap:.5rem;max-width:90vw}.toast{background:#000000e6;color:#fff;padding:.75rem 1rem;border-radius:.5rem;border-left:4px solid #007bff;box-shadow:0 4px 12px #0000004d;font-size:.9rem;max-width:400px;word-wrap:break-word;animation:toastSlideIn .3s ease-out;pointer-events:auto}.toast.success{border-left-color:#28a745}.toast.warning{border-left-color:#ffc107}.toast.error{border-left-color:#dc3545}.toast.info{border-left-color:#17a2b8}.toast.roll{border-left-color:#6f42c1;background:linear-gradient(135deg,#6f42c1e6,#8a2be2e6)}.toast-content{display:flex;flex-direction:column;gap:.25rem}.toast-player{font-weight:700;color:#87ceeb;font-size:.8rem}.toast-result{font-size:1rem;line-height:1.2}.toast-dice{font-size:.8rem;opacity:.8;display:flex;gap:.5rem;margin-top:.25rem}.toast-dice .hope{color:#4caf50}.toast-dice .fear{color:#f44336}.toast-dice .advantage{color:#2196f3}.toast-dice .disadvantage{color:#ff9800}@keyframes toastSlideIn{0%{opacity:0;transform:translateY(-20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes toastSlideOut{0%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(-20px) scale(.95)}}.toast.removing{animation:toastSlideOut .3s ease-in forwards}.roll-type-selector{margin-bottom:0;border-bottom:none;padding-bottom:0;position:relative;z-index:5}.roll-type-buttons{display:flex;gap:4px;justify-content:center;align-items:center}.roll-type-btn{background:#0000004d;color:rgba(255,255,255,var(--button-text-opacity));padding:.75rem 1.25rem;border-radius:8px 8px 0 0;cursor:pointer;transition:all .3s ease;font-weight:700;min-width:90px;text-align:center;border:none;border-top:4px solid rgba(255,255,255,.3);position:relative}.roll-type-btn:hover{background:#fff3;border-top:4px solid rgba(200,200,200,.6);box-shadow:0 4px 8px #0003}.roll-type-selector.desktop-controls .roll-type-btn.check-tab.active{background:#00000080;border-top:4px solid #4caf50;box-shadow:0 0 15px #4caf504d;z-index:10}.roll-type-selector.desktop-controls .roll-type-btn.check-tab:active{border:none;border-top:4px solid #4caf50}.roll-type-selector.desktop-controls .roll-type-btn.check-tab.active:after{content:"";position:absolute;bottom:-2px;left:-2px;right:-2px;height:2px;background:transparent;z-index:11}.roll-type-selector.desktop-controls .roll-type-btn.damage-tab.active{background:#00000080;border-top:4px solid #ff6b35;box-shadow:0 0 15px #ff6b354d;z-index:10}.roll-type-selector.desktop-controls .roll-type-btn.damage-tab:active{border:none;border-top:4px solid #ff6b35}.roll-type-selector.desktop-controls .roll-type-btn.damage-tab.active:after{content:"";position:absolute;bottom:-2px;left:-2px;right:-2px;height:2px;background:transparent;z-index:11}.roll-type-selector.desktop-controls .roll-type-btn.gm-tab.active{background:#00000080;border-top:4px solid #8e44ad;box-shadow:0 0 15px #8e44ad4d;z-index:10}.roll-type-selector.desktop-controls .roll-type-btn.gm-tab:active{border:none;border-top:4px solid #8e44ad}.roll-type-selector.desktop-controls .roll-type-btn.gm-tab.active:after{content:"";position:absolute;bottom:-2px;left:-2px;right:-2px;height:2px;background:transparent;z-index:11}.roll-type-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.damage-controls{display:flex;flex-direction:column;gap:1rem}.damage-main-controls{display:flex;flex-wrap:wrap;gap:3rem;align-items:center;justify-content:space-evenly}.dice-selection{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}.dice-count-controls{display:flex;align-items:center}.dice-type-selector{flex:1;min-width:80px}.dice-type-selector select,.dice-select{background:#000;color:#fff;border:1px solid rgba(255,255,255,.3);border-radius:4px;padding:.5rem;font-size:1.2rem;width:100%}.dice-type-selector select option,.dice-select option{background:#2c2c2c;color:#fff}.dice-type-selector select:focus,.dice-select:focus{outline:none;border-color:#4caf50;box-shadow:0 0 5px #4caf5080}.bonus-die-controls{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}.bonus-die-controls label{display:flex;align-items:center;gap:.5rem}.bonus-die-controls select{font-size:1.2rem}.damage-options{display:flex;gap:2rem;flex-wrap:wrap}.damage-options label{display:flex;align-items:center;gap:.5rem;cursor:pointer}.damage-options input[type=checkbox],.bonus-die-controls input[type=checkbox]{width:1.2rem;height:1.2rem;accent-color:#4caf50}.check-controls,.gm-controls{display:flex;justify-content:center;align-items:center;gap:3rem}@media (max-width: 768px){.roll-type-buttons{flex-direction:row;gap:.25rem}.roll-type-btn{flex:1;padding:.75rem .5rem;font-size:.9rem;min-width:auto}}.main-result{margin-bottom:.25rem}.result-text{font-size:1rem;font-weight:500}.roll-breakdown{font-size:.8rem;color:#ffffffb3;line-height:1.2;text-align:right}.breakdown-text{font-style:italic}.critical-text{color:#e74c3c;font-weight:700;font-style:normal}.resistance-text{color:#3498db;font-weight:700;font-style:normal}.history-item.roll-type-damage{border-left:3px solid #ff6b35}.history-item.roll-type-gm{border-left:3px solid #8e44ad}.history-item.roll-type-check{border-left:3px solid #4caf50}.toast-dice .damage{color:#ff6b35}.toast-dice .gm{color:#8e44ad}.toast-dice .critical{color:#e74c3c;font-weight:700}.toast-dice .resistance{color:#3498db;font-weight:700}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(1.1)}}.connection-waiting{animation:pulse 2s ease-in-out infinite}::view-transition-old(roll-type-content),::view-transition-new(roll-type-content){animation-duration:.3s;animation-timing-function:ease-out}::view-transition-old(roll-type-content){animation-name:slide-out-left}::view-transition-new(roll-type-content){animation-name:slide-in-right}@keyframes slide-out-left{0%{transform:translate(0);opacity:1}to{transform:translate(-20px);opacity:0}}@keyframes slide-in-right{0%{transform:translate(20px);opacity:0}to{transform:translate(0);opacity:1}}.dialog-overlay{view-transition-name:mobile-dialog}::view-transition-old(mobile-dialog),::view-transition-new(mobile-dialog){animation-duration:.25s;animation-timing-function:ease-out}::view-transition-old(mobile-dialog){animation-name:slide-down-out}::view-transition-new(mobile-dialog){animation-name:slide-up-in}@keyframes slide-down-out{0%{transform:translateY(0);opacity:1}to{transform:translateY(20px);opacity:0}}@keyframes slide-up-in{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.session-panel{view-transition-name:session-panel}.session-join,.session-info{view-transition-name:session-content}::view-transition-old(session-panel),::view-transition-new(session-panel){animation-duration:.3s;animation-timing-function:ease-out}::view-transition-old(session-panel){animation-name:scale-fade-out}::view-transition-new(session-panel){animation-name:scale-fade-in}::view-transition-old(session-content),::view-transition-new(session-content){animation-duration:.25s;animation-timing-function:ease-out}::view-transition-old(session-content){animation-name:slide-out-left}::view-transition-new(session-content){animation-name:slide-in-right}@keyframes scale-fade-out{0%{transform:scale(1);opacity:1}to{transform:scale(.95);opacity:0}}@keyframes scale-fade-in{0%{transform:scale(.95);opacity:0}to{transform:scale(1);opacity:1}}.roll-history-panel{view-transition-name:history-panel}::view-transition-old(history-panel),::view-transition-new(history-panel){animation-duration:.3s;animation-timing-function:ease-out}::view-transition-old(history-panel){animation-name:slide-out-right}::view-transition-new(history-panel){animation-name:slide-in-left}@keyframes slide-out-right{0%{transform:translate(0);opacity:1}to{transform:translate(20px);opacity:0}}@keyframes slide-in-left{0%{transform:translate(20px);opacity:0}to{transform:translate(0);opacity:1}}.gm-options{display:flex;gap:2rem;flex-wrap:wrap}.gm-options label{display:flex;align-items:center;gap:.5rem;cursor:pointer}.gm-options input[type=checkbox]{width:1.2rem;height:1.2rem;accent-color:#8e44ad}.dialog-checkbox-group{display:flex;justify-content:center}.dialog-checkbox-label{display:flex;align-items:center;gap:.5rem;cursor:pointer}.dialog-checkbox-label input[type=checkbox]{width:1.2rem;height:1.2rem;accent-color:#8e44ad}.keyboard-help-overlay{position:fixed;inset:0;background-color:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px}.keyboard-help-dialog{background-color:#000000b3;border:2px solid rgba(255,255,255,.3);border-radius:10px;max-width:500px;width:100%;max-height:80vh;overflow-y:auto;box-shadow:0 10px 30px #0000004d}.keyboard-help-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px 16px;border-bottom:1px solid rgba(255,255,255,.1)}.keyboard-help-header h3{margin:0;color:var(--text-color);font-size:1.5rem;font-weight:600}.close-dialog-btn{background:none;border:none;font-size:1.5rem;color:var(--text-color);cursor:pointer;padding:4px 8px;border-radius:4px;transition:background-color .2s}.close-dialog-btn:hover{background-color:#ffffff1a}.keyboard-help-content{padding:20px 24px 24px}.shortcut-section{margin-bottom:24px}.shortcut-section:last-child{margin-bottom:0}.shortcut-section h4{margin:0 0 12px;color:var(--accent-color);font-size:1.1rem;font-weight:600}.shortcut-item{display:flex;align-items:center;gap:12px;margin-bottom:8px;padding:4px 0}.shortcut-item:last-child{margin-bottom:0}.shortcut-item kbd{background:var(--accent-color);color:var(--bg-color);padding:4px 8px;border-radius:6px;font-family:monospace;font-size:.9rem;font-weight:600;min-width:32px;text-align:center;box-shadow:0 2px 4px #0003}.shortcut-item span{color:var(--text-color);font-size:.95rem}@media (max-width: 768px){.keyboard-help-overlay{padding:16px}.keyboard-help-dialog{max-height:85vh}.keyboard-help-header{padding:16px 20px 12px}.keyboard-help-header h3{font-size:1.3rem}.keyboard-help-content{padding:16px 20px 20px}.shortcut-section{margin-bottom:20px}.shortcut-item{gap:10px;margin-bottom:10px}.shortcut-item kbd{min-width:28px;padding:3px 6px;font-size:.85rem}.shortcut-item span{font-size:.9rem}}.desktop-github-link{position:fixed;bottom:0;left:0;z-index:10}.desktop-github-link a{display:inline-flex;align-items:center;justify-content:center;color:#fff3;text-decoration:none;transition:all .3s ease;padding:8px;border-radius:0}.desktop-github-link:hover a{color:#ffffffe6;background-color:#ffffff1a}.desktop-version-display{position:fixed;bottom:0;right:16px;color:#ffffff80;font-size:.75rem;font-family:monospace;pointer-events:none;z-index:10}.version-info{margin-top:20px;padding-top:20px;border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;align-items:center;color:#ffffff80;font-size:.75rem;font-family:monospace}.github-link-mobile{color:#fff9;text-decoration:none;transition:color .2s ease;display:flex;align-items:center}.github-link-mobile:hover{color:#ffffffe6}@media (max-width: 768px){.desktop-version-display,.desktop-github-link{display:none}}