:root{--unicorn-white:#fff;--unicorn-blue:#56b4e9;--dragon-yellow:#f0e442;--dragon-orange:#e69f00;--dragon-red:#d55e00;--border-color:#ccc;--panel-bg:#fff}*,:before,:after{box-sizing:border-box}body{background:#000;margin:0;font-family:sans-serif}.header{background:linear-gradient(135deg, var(--unicorn-white) 0%, var(--unicorn-white) 15%, var(--unicorn-blue) 35%, var(--dragon-yellow) 55%, var(--dragon-orange) 75%, var(--dragon-red) 90%, var(--dragon-red) 100%);border-bottom:6px solid #000;justify-content:space-between;align-items:center;padding:.75rem 1rem;display:flex}.header-left{align-items:center;gap:1rem;display:flex}.header-right{gap:.5rem;display:flex}.logo{width:40px;height:40px}.title{margin:0;font-size:1.5rem}.toggle-btn,.reset-btn{color:#fff;cursor:pointer;background:#000;border:none;border-radius:4px;padding:.5rem 1rem;font-weight:700}.reset-btn{background:#333}.toggle-btn:hover,.reset-btn:hover{opacity:.85}.game-area{background:#fff;height:calc(100vh - 80px);display:flex}.game-area.left .sidebar{order:0}.game-area.left .board{order:1}.game-area.left .info-panel{order:2}.game-area.right .sidebar{border-right:none;border-left:2px solid var(--border-color);order:2;padding:.75rem .5rem}.game-area.right .board{order:1}.game-area.right .info-panel{border-right:2px solid var(--border-color);border-left:none;order:0}.sidebar{border-right:2px solid var(--border-color);background:var(--panel-bg);flex-direction:column;align-items:center;width:120px;padding:.75rem .5rem;display:flex;overflow-y:auto}.sidebar h3{text-align:center;width:100%;margin:0 0 .5rem}.color-pin{cursor:grab;border:2px solid #333;border-radius:50%;width:36px;height:36px;margin:.5rem auto;transition:transform .1s;box-shadow:0 2px 6px #0006}.color-pin:active{cursor:grabbing;transform:scale(1.1)}.color-pin-selected{cursor:pointer;transform:scale(1.15);box-shadow:0 0 0 3px #000,0 0 0 5px #fff,0 2px 8px #00000080}.slot.slot-droppable{cursor:pointer;border-style:solid;border-color:#888}.slot.slot-droppable:hover{border-color:#000;box-shadow:0 0 0 2px #0003}.info-panel{border-left:2px solid var(--border-color);background:var(--panel-bg);width:220px;padding:1rem;font-size:.9rem;overflow-y:auto}.info-section{margin-bottom:1.5rem}.info-section h3{border-bottom:1px solid var(--border-color);margin:0 0 .5rem;padding-bottom:.25rem;font-size:1rem}.instructions-list{margin:0;padding-left:1.2rem;line-height:1.8}.instructions-list ul{margin:.25rem 0;padding-left:1rem}.peg-demo{vertical-align:middle;border-radius:50%;width:10px;height:10px;margin-right:4px;display:inline-block}.peg-black-demo{background:#000;border:1px solid #555}.peg-yellow-demo{background:var(--dragon-yellow);border:1px solid #aaa}.settings-note{color:#888;margin:0 0 .75rem;font-size:.75rem}.setting-label{cursor:default;flex-direction:column;gap:2px;margin-bottom:.75rem;font-size:.85rem;display:flex}.setting-label input[type=range]{accent-color:#000;cursor:pointer;width:100%}.toggle-label{flex-direction:row;justify-content:space-between;align-items:center;gap:.5rem}.toggle-label input[type=checkbox]{display:none}.toggle-track{cursor:pointer;background:#ccc;border-radius:10px;flex-shrink:0;width:36px;height:20px;transition:background .2s;position:relative}.toggle-label input[type=checkbox]:checked+.toggle-track{background:#333}.toggle-thumb{background:#fff;border-radius:50%;width:14px;height:14px;transition:left .2s;position:absolute;top:3px;left:3px}.toggle-label input[type=checkbox]:checked+.toggle-track .toggle-thumb{left:19px}.stats-config{color:#888;font-size:.7rem;font-weight:400}.stats-grid{grid-template-columns:1fr 1fr;gap:.5rem;margin-bottom:.75rem;display:grid}.stat-box{border:1px solid var(--border-color);background:#f5f5f5;border-radius:6px;flex-direction:column;align-items:center;padding:.4rem .25rem;display:flex}.stat-value{font-size:1.2rem;font-weight:700;line-height:1.2}.stat-label{color:#666;margin-top:2px;font-size:.7rem}.clear-stats-btn{color:#888;cursor:pointer;background:0 0;border:1px solid #ccc;border-radius:4px;width:100%;padding:.35rem;font-size:.8rem}.clear-stats-btn:hover{color:#333;border-color:#999}.board{flex:1;padding:1rem;overflow-y:auto}.game-over-banner{text-align:center;border-radius:6px;margin-bottom:1rem;padding:.75rem 1rem;font-size:1.1rem;font-weight:700}.game-over-banner.won{color:#155724;background:#d4edda;border:2px solid #c3e6cb}.game-over-banner.lost{color:#721c24;background:#f8d7da;border:2px solid #f5c6cb}.guess-row{border:2px solid var(--border-color);border-radius:4px;align-items:center;gap:.5rem;margin-bottom:.5rem;padding:.5rem;display:flex}.guess-row.inactive{opacity:.4;pointer-events:none}.guess-row.active{background:#f9f9f9;border-color:#555}.slot{border:2px dashed #aaa;border-radius:50%;flex-shrink:0;width:36px;height:36px}.slot.filled{border:2px solid #333}.slot.white-pin{border:2px solid #333;box-shadow:inset 0 0 4px #0006}.slot.slot-clearable{cursor:pointer}.slot.slot-clearable:hover{opacity:.75;box-shadow:0 0 0 3px #c8000066}.feedback-box{border:2px solid #aaa;border-radius:4px;flex-shrink:0;grid-template-columns:repeat(2,12px);gap:4px;padding:4px;display:grid}.peg{border-radius:50%;width:12px;height:12px}.peg-black{background:#000}.peg-yellow{background:var(--dragon-yellow);border:1px solid #aaa}.peg-empty{background:#e0e0e0}.submit-btn{color:#fff;cursor:pointer;background:#000;border:none;border-radius:4px;margin-left:auto;padding:.4rem .8rem;font-weight:700}.submit-btn:disabled{cursor:not-allowed;background:#aaa}.submit-btn:not(:disabled):hover{opacity:.85}.reveal-row{background:#f0f0f0;border:2px solid #000;border-radius:4px;align-items:center;gap:.5rem;margin-top:1rem;padding:.5rem;display:flex}.reveal-label{margin-right:.25rem;font-size:.85rem;font-weight:700}.mobile-only{display:none}.desktop-only{display:flex}.header-menu{position:relative}.menu-btn{color:#fff;cursor:pointer;background:#000;border:none;border-radius:4px;padding:.3rem .7rem;font-size:1.4rem;line-height:1}.menu-dropdown{z-index:100;background:#fff;border:2px solid #000;border-radius:4px;min-width:140px;position:absolute;top:calc(100% + 6px);right:0;box-shadow:0 4px 12px #00000026}.menu-item{text-align:left;cursor:pointer;background:0 0;border:none;width:100%;padding:.6rem 1rem;font-size:.95rem;font-weight:700;display:block}.menu-item:hover{background:#f0f0f0}.menu-item+.menu-item{border-top:1px solid #eee}@media (width<=600px){.desktop-only{display:none}.mobile-only{display:block}.sidebar{width:52px;padding:.5rem .25rem}.sidebar h3{display:none}.color-pin{width:28px;height:28px;margin:.3rem auto}.board{flex:1;padding:.5rem}.slot{width:30px;height:30px}.feedback-box{grid-template-columns:repeat(2,10px);gap:3px}.peg{width:10px;height:10px}.submit-btn{padding:.35rem .5rem;font-size:.8rem}.info-panel{border-left:2px solid var(--border-color);z-index:200;width:280px;max-width:85vw;height:100%;padding-top:2.5rem;transition:transform .25s;position:fixed;top:0;right:0;overflow-y:auto;transform:translate(100%);box-shadow:-4px 0 16px #0003}.info-panel.panel-open{transform:translate(0)}.panel-backdrop{z-index:199;background:#0006;position:fixed;inset:0}.panel-close{cursor:pointer;color:#333;background:0 0;border:none;padding:.25rem .5rem;font-size:1.2rem;line-height:1;position:absolute;top:.5rem;right:.5rem}}