.play-container{min-height:100vh;display:flex;flex-direction:column}*{-webkit-user-select:inherit;user-select:inherit}body{-webkit-user-select:none;user-select:none}input{-webkit-user-select:unset;user-select:unset}.play-page:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.05'/%3E%3C/svg%3E");pointer-events:none;z-index:1}.play-container>nav{position:relative}.play-main{flex:1;display:flex;flex-direction:column;align-items:stretch;justify-content:center;padding:30px 20px 50px;position:relative;z-index:2}.play-main:before{content:"";position:absolute;top:0;left:0;right:0;height:10px;background:repeating-linear-gradient(90deg,var(--gold) 0px,var(--gold) 16px,var(--red) 16px,var(--red) 32px)}.play-shell{width:100%;max-width:520px;margin:0 auto}.play-shell play-frame .play-frame-inner{padding:30px 24px 34px}#app{max-width:1200px;margin:0 auto}#app.in-room>nav{display:none}#app.in-room .play-main{padding:30px 20px 50px;justify-content:flex-start}#app.in-room header-bar{display:flex;flex-direction:row;justify-content:space-between;align-items:center;background:var(--navy);padding:12px 20px;border-bottom:3px solid var(--gold)}#app.in-room header-bar .header-left{flex-direction:column;align-items:flex-start;gap:2px;min-width:0}#app.in-room header-bar .header-title-row{gap:6px}#app.in-room header-bar .header-right{position:static;display:flex;flex-shrink:0}#app.in-room header-bar h1{font-size:1.3rem}#app.in-room header-bar .tagline{display:none}.mode-selection{text-align:center;max-width:460px;width:100%;margin:0 auto}.mode-selection h1{font-family:Alfa Slab One,cursive;font-size:2.4rem;color:var(--red);margin-bottom:8px;text-transform:uppercase;text-shadow:2px 2px 0 var(--red-dark)}.play-subtitle{font-family:Oswald,sans-serif;color:var(--navy);text-transform:uppercase;letter-spacing:2px;margin-bottom:26px;font-size:.95rem}.mode-buttons{display:flex;flex-direction:column;gap:16px}.mode-btn{display:flex;flex-direction:column;align-items:center;padding:24px;background:#fffef9;border:3px solid var(--navy);border-radius:var(--border-radius);cursor:pointer;transition:all .15s ease;box-shadow:4px 4px 0 var(--navy);text-decoration:none}.mode-btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--navy)}.mode-btn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--navy)}.mode-btn-icon{font-size:2.5rem;margin-bottom:10px}.mode-btn-title{font-family:Oswald,sans-serif;font-size:1.2rem;text-transform:uppercase;letter-spacing:1px;color:var(--navy);margin-bottom:5px}.mode-btn-desc{font-size:.9rem;color:var(--brown)}.mode-btn.create-btn{border-color:var(--red)}.mode-btn.create-btn .mode-btn-title{color:var(--red)}.view,.room-content{display:none}.view.active{display:block}.form-header{text-align:center;margin-bottom:20px}.form-header h2{font-family:Alfa Slab One,cursive;font-size:1.6rem;color:var(--red);margin-bottom:5px;text-transform:uppercase}.form-header p{font-family:Oswald,sans-serif;color:var(--navy);font-size:.9rem;text-transform:uppercase;letter-spacing:1px}.back-to-modes{display:inline-flex;align-items:center;gap:6px;color:var(--navy);text-decoration:none;font-family:Oswald,sans-serif;font-size:.9rem;text-transform:uppercase;letter-spacing:1px;transition:color .25s ease}.back-to-modes:hover{color:var(--red)}header-bar{display:none}header-bar .header-left{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0}header-bar .header-title-row{display:flex;align-items:center;gap:6px}header-bar .header-right{display:flex;align-items:center;gap:12px}header-bar h1{font-family:Alfa Slab One,cursive;font-size:1.3rem;color:var(--gold);margin:0;transition:font-size .2s ease;-webkit-text-fill-color:var(--gold);background:none}header-bar .tagline{display:none}header-bar .btn-leave{font-family:Oswald,sans-serif;background:var(--red);color:#fff;padding:8px 12px;border-radius:4px;border:2px solid var(--red-dark);display:flex;align-items:center;justify-content:center;text-transform:uppercase;font-size:.75rem;letter-spacing:1px}header-bar .btn-leave:hover{background:var(--red-dark);transform:none}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .2s ease}.modal-content{background:var(--surface);border-radius:var(--border-radius);box-shadow:0 8px 32px #00000080;max-width:420px;width:90%;max-height:80vh;overflow-y:auto;animation:slideUp .2s ease}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--surface-light)}.modal-header h2{font-size:1.1rem;margin:0}.modal-close-btn{background:none;border:none;color:var(--text-muted);font-size:1.5rem;cursor:pointer;padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:6px;box-shadow:none}.modal-close-btn:hover{background:var(--surface-light);color:var(--text);transform:none;box-shadow:none}.qr-modal-overlay{cursor:pointer}.qr-modal-body{display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--surface);border:3px solid var(--navy);box-shadow:4px 4px 0 var(--navy);padding:24px;animation:slideUp .2s ease;width:min(80vw,80vh);aspect-ratio:1 / 1}.qr-modal-body .qr-canvas{border:3px solid var(--navy);box-shadow:3px 3px 0 var(--navy);width:100%!important;height:auto!important}.qr-modal-body .qr-hint{margin-top:16px;font-family:Oswald,sans-serif;font-size:.85rem;text-transform:uppercase;letter-spacing:1px;color:var(--text-muted)}.modal-content dice-config{margin-bottom:0}.modal-content dice-config .dice-config{border-radius:0;box-shadow:none}room-join,room-create{display:block}room-join .form-group,room-create .form-group{margin-bottom:20px}room-join label,room-create label{display:block;margin-bottom:8px;font-family:Oswald,sans-serif;color:var(--navy);font-size:.9rem;text-transform:uppercase;letter-spacing:1px}room-join .room-id-group{overflow:hidden}room-join .dice-hint,room-create .dice-hint{font-family:Lora,serif;font-size:.8rem;color:var(--text-muted);font-weight:400;text-transform:none;letter-spacing:0}room-join .dice-input-container{display:flex;justify-content:center;gap:10px;-webkit-user-select:none;user-select:none}room-join .dice-hint{text-align:center;margin-top:10px}room-join .room-dice{width:50px;height:50px;border:3px solid var(--navy);border-radius:6px;padding:2px;box-shadow:3px 3px 0 var(--navy);cursor:pointer;transition:transform .15s ease,box-shadow .15s ease;-webkit-user-select:none;user-select:none;touch-action:none}room-join .room-dice svg{width:100%;height:100%;display:block;pointer-events:none}room-join .room-dice:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--navy)}room-join .room-dice:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--navy)}room-join .room-dice.flipping{animation:diceFlip .2s ease}@keyframes diceFlip{0%{transform:rotateX(0)}50%{transform:rotateX(90deg)}to{transform:rotateX(0)}}room-join .join-buttons,room-create .join-buttons{display:flex;gap:12px}room-create .btn-create{flex:1;padding:16px;font-size:1rem;font-weight:600}room-join .btn-join{flex:1;padding:16px;font-size:1rem;font-weight:600;background:var(--cream);color:var(--navy);border-color:var(--navy)}room-join .btn-join:hover{background:var(--surface-light)}room-create .dice-config-group{margin-bottom:20px}room-view .room-content{display:flex;flex-direction:column;gap:20px}room-view .main-area{display:flex;flex-direction:column;gap:24px}dice-config{display:block;margin-bottom:16px}dice-config .dice-config{padding:16px}dice-config .dice-sets-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}dice-config .config-label{color:var(--text-muted);font-size:.9rem}dice-config .add-set-btn{padding:6px 12px;font-size:.85rem;background:var(--secondary-color);border-radius:6px}dice-config .add-set-btn:disabled{opacity:.5;cursor:not-allowed}dice-config .dice-sets-list{display:flex;flex-direction:column;gap:10px}dice-config .dice-set-row{display:flex;align-items:center;gap:12px;padding:8px 12px;background:var(--surface-light);border-radius:8px}dice-config .dice-set-row button{aspect-ratio:1;display:flex;line-height:0;flex-direction:column;justify-content:center;align-items:center}dice-config .color-picker{position:relative}dice-config .color-btn{width:32px;height:32px;padding:0;border-radius:6px;border:2px solid rgba(255,255,255,.2);cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:none}dice-config .color-btn:hover{border-color:#fff6;transform:none;box-shadow:none}dice-config .color-dropdown-arrow{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid rgba(0,0,0,.5)}dice-config .color-dropdown{display:none;position:absolute;margin-top:4px;padding:8px;background:var(--surface);border-radius:8px;box-shadow:0 4px 12px #0006;z-index:1100;flex-wrap:wrap;width:113px;gap:6px}dice-config .color-dropdown.open{display:flex}dice-config .color-option{width:28px;height:28px;padding:0;border-radius:4px;border:2px solid transparent;cursor:pointer;box-shadow:none;border:2px solid oklch(from attr(data-color type(<color>)) calc(l - .3) c h);background-color:attr(data-color type(<color>))}dice-config .color-option:hover{transform:scale(1.1);box-shadow:none}dice-config .color-option.selected{border-color:#fff}dice-config .count-controls{display:flex;align-items:center;gap:8px;flex:1}dice-config .config-btn{font-family:Arial,Helvetica,sans-serif;width:32px;height:32px;padding:0;font-size:1.2rem;font-weight:700;border-radius:6px}dice-config .config-value{font-size:1.1rem;font-weight:600;min-width:24px;text-align:center}dice-config .remove-set-btn{width:28px;height:28px;padding:0;font-size:1.2rem;background:var(--danger);border-radius:6px;line-height:1}dice-config .remove-set-btn:hover{background:#dc2626}dice-history{display:block}dice-history .history-list{max-height:300px;overflow-y:auto}dice-history .history-item{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--surface-light);animation:slideIn .3s ease}dice-history .history-item:last-child{border-bottom:none}@keyframes slideIn{0%{opacity:0;transform:translate(-10px)}to{opacity:1;transform:translate(0)}}dice-history .history-item .username{font-weight:600;color:var(--primary-color);white-space:nowrap}dice-history .history-item .username.self{color:var(--secondary-color)}dice-history .history-dice{display:flex;align-items:center;gap:4px;flex-wrap:wrap}dice-history .history-dice-group{display:flex;align-items:center;gap:3px;padding:2px 4px;background:#ffffff0d;border-radius:4px;border-left:3px solid var(--group-color, var(--primary-color))}dice-history .history-die{width:24px;height:24px;border-radius:4px;padding:2px;box-shadow:0 1px 3px #0003;display:inline-flex}dice-history .history-die svg{width:100%;height:100%}dice-history .history-die-wrapper{position:relative;display:inline-flex}dice-history .history-die-wrapper.dimmed{opacity:.3}dice-history .history-item.multi-holder{flex-direction:column;align-items:flex-start;gap:6px}dice-history .history-set-entry{display:flex;align-items:center;gap:8px;width:100%}dice-history .set-indicator{width:8px;height:8px;border-radius:50%;flex-shrink:0}dice-history .empty-message{color:var(--text-muted);text-align:center;padding:20px}dice-history h3{margin-bottom:16px;font-size:1rem;color:var(--text-muted)}peer-list{display:block}peer-list .card{padding:12px 16px}peer-list .card h3{display:none}peer-list .peer-list-content{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}peer-list .peer-item{display:flex;align-items:center;gap:8px;padding:6px 12px 6px 6px;background:var(--surface-light);border-radius:20px;border:2px solid transparent;transition:border-color .2s ease}peer-list .peer-item.can-drop{cursor:pointer}peer-list .peer-item.can-drop:hover{background:var(--surface)}peer-list .peer-avatar-container{position:relative;width:28px;height:28px}peer-list .peer-dice-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:1.1rem;z-index:1}peer-list .peer-avatar.holding{opacity:.08}peer-list .peer-avatar{width:28px;height:28px;border-radius:50%;background:var(--primary-color);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:.75rem}peer-list .peer-avatar.self{background:var(--secondary-color)}peer-list .peer-name{font-size:.9rem}peer-list .peer-name.self:after{content:" (you)";color:var(--text-muted);font-size:.8rem}peer-list .peer-status{width:6px;height:6px;border-radius:50%;background:var(--success)}peer-list .peer-status.connecting{background:var(--warning);animation:pulse 1s infinite}peer-list .peer-status.disconnected{background:var(--danger)}peer-list .peer-status.reconnecting{animation:pulse-reconnect 2s infinite}peer-list .peer-status.reconnecting-with-peers{animation:pulse-reconnect-peers 2s infinite}@keyframes pulse-reconnect{0%,to{background:var(--danger)}50%{background:var(--warning)}}@keyframes pulse-reconnect-peers{0%,to{background:var(--success)}50%{background:var(--warning)}}peer-list .empty-message{color:var(--text-muted);text-align:center;padding:10px;font-size:.9rem}.landing-content{display:flex;flex-direction:column;gap:48px}.static-page{max-width:800px;margin:0 auto;padding:20px}.static-page-header{text-align:center;margin-bottom:40px}.static-page-header h1{font-family:Alfa Slab One,cursive;font-size:2.5rem;margin-bottom:8px;color:var(--red);text-transform:uppercase;text-shadow:2px 2px 0 var(--red-dark)}.static-page-header .subtitle{font-family:Oswald,sans-serif;color:var(--navy);font-size:1rem;text-transform:uppercase;letter-spacing:2px}.back-link{display:inline-flex;align-items:center;gap:8px;color:var(--primary-color);text-decoration:none;font-size:.95rem;margin-bottom:24px;transition:color .2s ease}.back-link:hover{color:var(--secondary-color)}.static-content{background:var(--surface);border:3px solid var(--navy);border-radius:var(--border-radius);padding:32px;box-shadow:4px 4px 0 var(--navy)}.static-content h2{font-family:Oswald,sans-serif;font-size:1.3rem;text-transform:uppercase;margin-top:32px;margin-bottom:16px;color:var(--navy)}.static-content h2:first-child{margin-top:0}.static-content h3{font-family:Oswald,sans-serif;font-size:1rem;text-transform:uppercase;margin-top:24px;margin-bottom:12px;color:var(--navy)}.static-content p{margin-bottom:16px;line-height:1.7;color:var(--text-muted)}.static-content ul,.static-content ol{margin-bottom:16px;padding-left:24px}.static-content li{margin-bottom:8px;line-height:1.6;color:var(--text-muted)}.static-content a{color:var(--primary-color);text-decoration:none}.static-content a:hover{text-decoration:underline}.static-content .highlight-box{background:var(--gold);border:3px solid var(--brown);padding:16px 20px;margin:24px 0;border-radius:0}.static-content .highlight-box p{margin-bottom:0;color:var(--navy);font-weight:500}.static-content .last-updated{font-size:.85rem;color:var(--text-muted);margin-top:32px;padding-top:16px;border-top:1px solid var(--surface-light)}.faq-list{display:flex;flex-direction:column;gap:16px}.faq-item{background:var(--surface-light);border-radius:var(--border-radius);overflow:hidden}.faq-question{width:100%;background:none;border:none;padding:20px;text-align:left;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-size:1rem;font-weight:600;color:var(--text);transition:background .2s ease;box-shadow:none}.faq-question:hover{background:#ffffff0d;transform:none;box-shadow:none}.faq-icon{font-size:1.2rem;transition:transform .2s ease}.faq-item.open .faq-icon{transform:rotate(45deg)}.faq-answer{display:none;padding:0 20px 20px}.faq-item.open .faq-answer{display:block}.faq-answer p{margin-bottom:0}@media(max-width:480px){header-bar{margin-bottom:24px}header-bar h1{font-size:2.5rem}header-bar .tagline{font-size:1rem}.card{padding:16px}room-join .room-dice{width:46px;height:46px}room-join .dice-input-container{gap:6px}room-create .btn-create,room-join .btn-join{padding:14px;font-size:1rem}.static-page-header h1{font-size:2rem}.static-content{padding:20px}}dice-drag-pickup{display:block;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}dice-drag-pickup .drag-pickup-container{display:flex;flex-direction:column;align-items:center;padding:20px;touch-action:none;border-radius:12px;transition:box-shadow .2s ease}dice-drag-pickup .drag-pickup-container.dragging{box-shadow:inset 0 0 16px #0030491a}dice-drag-pickup .drag-pickup-container.cancelled{box-shadow:inset 0 0 16px #c1121f26}dice-drag-pickup .dice-display{display:flex;justify-content:center;gap:24px;flex-wrap:wrap;min-height:90px;align-items:center;padding:16px}dice-drag-pickup .dice-set-group{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;align-items:center}dice-drag-pickup .die-wrapper{width:60px;height:60px;flex-shrink:0;position:relative;display:flex;align-items:center;justify-content:center}dice-drag-pickup dice-die{transition:transform .15s ease,opacity .15s ease}dice-drag-pickup dice-die.picked-up{transform:scale(1.15) translateY(-8px);z-index:10}dice-drag-pickup dice-die.not-picked{opacity:.5}dice-drag-pickup dice-die.placeholder{opacity:.5}dice-drag-pickup dice-die.placeholder.picked-up{transform:scale(1.15) translateY(-8px);opacity:1;z-index:10}dice-drag-pickup dice-die.placeholder.not-picked{opacity:.3}dice-drag-pickup .hint{text-align:center;font-size:.85rem;color:var(--text-muted);margin-top:16px;-webkit-user-select:none;user-select:none;min-height:1.5em}dice-drag-pickup .hint.active{color:var(--navy);font-weight:600}dice-drag-pickup .hint.cancelled{color:var(--red)}dice-drag-pickup .total{font-family:Oswald,sans-serif;font-size:1.2rem;color:var(--navy);margin-top:16px;opacity:0;transition:opacity .3s ease}dice-drag-pickup .total.visible{opacity:1}toast-container{position:fixed;top:16px;left:50%;transform:translate(-50%);z-index:2000;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;width:90%;max-width:420px}.toast{display:flex;align-items:center;gap:10px;width:100%;padding:12px 16px;background:var(--navy);color:var(--cream);border:2px solid var(--red-dark);box-shadow:3px 3px 0 var(--red-dark);font-family:Lora,serif;font-size:.9rem;line-height:1.4;pointer-events:auto;animation:toastIn .25s ease}.toast-warning{border-color:var(--brown);box-shadow:3px 3px 0 var(--brown)}.toast-info{border-color:var(--navy);box-shadow:3px 3px 0 var(--navy)}.toast-dismiss{flex-shrink:0;background:none;border:none;color:var(--cream);font-size:1.2rem;cursor:pointer;padding:0 2px;line-height:1;opacity:.7;box-shadow:none}.toast-dismiss:hover{opacity:1;background:none;transform:none;box-shadow:none}.toast-message{flex:1}.toast-exit{animation:toastOut .2s ease forwards}@keyframes toastIn{0%{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}@keyframes toastOut{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-12px)}}.inline-error{color:var(--red);font-family:Lora,serif;font-size:.85rem;margin-top:12px;text-align:center}.username-hint{color:var(--red);font-family:Lora,serif;font-size:.8rem;margin-top:6px}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-6px)}40%{transform:translate(6px)}60%{transform:translate(-4px)}80%{transform:translate(4px)}}input.shake{animation:shake .4s ease;border-color:var(--red)}