@import "https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800&family=Space+Grotesk:wght@400;500;700&display=swap";:root{--bg-gradient:linear-gradient(135deg, #020617 0%, #001e3d 100%);--panel-bg:#003d7c26;--panel-border:#ffcc0026;--accent-cyan:#fc0;--accent-blue:#003d7c;--accent-pink:#ef4444;--accent-green:#10b981;--tile-bg:linear-gradient(to bottom, #fff 0%, #fcfaf4 100%);--tile-border:#d5d1ba;--tile-depth:linear-gradient(135deg, #eae7dd 0%, #eae7dd 45%, #15803d 46%, #166534 100%);--tile-text:#0f172a;--font-main:"Outfit", sans-serif;--font-mono:"Space Grotesk", monospace;--tile-width:78px;--tile-height:90px;--tile-font-size:1.25rem}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-main);background:var(--bg-gradient);color:#f1f5f9;-webkit-user-select:none;user-select:none;height:100vh;overflow:hidden}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:#020617}::-webkit-scrollbar-thumb{background:#1e293b;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--accent-cyan)}.glass-panel{background:var(--panel-bg);-webkit-backdrop-filter:blur(12px);border:1px solid var(--panel-border);border-radius:16px}.title-glow{background:linear-gradient(to right, var(--accent-cyan), #fff);-webkit-text-fill-color:transparent;text-shadow:0 0 30px #ffcc0059;-webkit-background-clip:text;font-weight:800}.game-container{flex-direction:column;align-items:center;width:100%;max-width:100%;height:100vh;margin:0 auto;padding:1rem;display:flex;overflow:hidden}.board-wrapper{background:#02061799;border:1px solid #ffffff0d;border-radius:20px;flex:1;justify-content:center;align-items:center;width:100%;min-height:0;margin:.75rem 0;padding:1rem;display:flex;position:relative;overflow:hidden;box-shadow:inset 0 0 40px #000c}.board{transition:all .3s;position:relative}.tile{width:var(--tile-width);height:var(--tile-height);cursor:pointer;-webkit-user-select:none;user-select:none;transition:transform .2s cubic-bezier(.175,.885,.32,1.275),box-shadow .2s,filter .2s;position:absolute}.tile-face{font-family:var(--font-main);color:#0f172a;background:linear-gradient(135deg,#fff 0%,#f1f5f9 100%);border:3px solid #cbd5e1;border-radius:18px;flex-direction:column;justify-content:center;align-items:center;padding:6px;font-size:1.55rem;font-weight:900;transition:all .28s cubic-bezier(.175,.885,.32,1.275);display:flex;position:absolute;inset:0;overflow:hidden;box-shadow:inset 0 3px #ffffffe6,inset 0 -4px #0f172a14,0 6px 16px #00000040,0 2px 4px #0000001a}.tile-face:before{content:"";pointer-events:none;z-index:2;background:linear-gradient(#ffffffb3 0%,#fff0 100%);border-top-left-radius:15px;border-top-right-radius:15px;height:46%;position:absolute;top:0;left:0;right:0}.tile-face:after{content:"";pointer-events:none;z-index:3;background:linear-gradient(90deg,#fff0 0%,#fff9 50%,#fff0 100%);width:60%;height:100%;position:absolute;top:0;left:-180%;transform:skew(-25deg)}@media (hover:hover){.tile.free:hover:not(.selected){z-index:25;transform:translateY(-10px)scale(1.06)}.tile.free:hover:not(.selected) .tile-face{box-shadow:inset 0 3px #ffffffe6,inset 0 -4px #0f172a1a,0 16px 28px #00000059,0 6px 12px #00000026}.tile.free:hover:not(.selected) .tile-face:after{animation:.75s cubic-bezier(.25,.46,.45,.94) forwards shine-sweep}}@keyframes shine-sweep{0%{left:-180%}to{left:180%}}.tile.blocked{cursor:not-allowed;filter:brightness(.55)contrast(.85)grayscale(.2);opacity:.8}.tile.selected{transform:translateY(-10px)scale(1.08);z-index:100!important}.tile.selected .tile-face{color:#1e293b;box-shadow:inset 0 3px #ffffffe6,inset 0 -5px #ffcc0080,0 0 30px #ffcc00e6,0 14px 30px #0006;border-color:var(--accent-cyan)!important;background:linear-gradient(135deg,#fffbeb 0%,#fef3c7 100%)!important}.tile.hint{z-index:15;animation:1.2s ease-in-out infinite tile-hint-pulse}.tile.hint .tile-face{border-color:var(--accent-pink)!important;box-shadow:inset 0 2.5px #ffffffe6,inset 0 -3.5px #ef444433,0 0 20px #ef4444d9!important}.tile.matched-anim{animation:.4s cubic-bezier(.6,-.28,.735,.045) forwards tile-match-out}.tile.shake-anim{animation:.3s ease-in-out shake}.tile.shake-anim .tile-face{border-color:var(--accent-pink);box-shadow:inset 0 2.5px #ffffffe6,inset 0 -3.5px #ef444433,0 0 20px #ef4444cc}@keyframes tile-hint-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)translateY(-4px)}}@keyframes tile-match-out{0%{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.15)translateY(-12px)}to{opacity:0;transform:scale(0)translateY(50px)}}@keyframes shake{0%,to{transform:translate(0)}20%,60%{transform:translate(-6px)}40%,80%{transform:translate(6px)}}.btn-primary{background:linear-gradient(135deg, var(--accent-cyan) 0%, var(--accent-blue) 100%);color:#fff;font-family:var(--font-main);cursor:pointer;border:none;border-radius:12px;align-items:center;gap:.5rem;padding:.75rem 1.5rem;font-weight:600;transition:all .2s;display:inline-flex;box-shadow:0 4px 12px #06b6d44d}.btn-primary:hover{filter:brightness(1.1);transform:translateY(-2px);box-shadow:0 6px 18px #06b6d480}.btn-primary:active{transform:translateY(1px)}.btn-primary:disabled{color:#64748b;cursor:not-allowed;box-shadow:none;background:#334155;transform:none}.btn-secondary{color:#e2e8f0;font-family:var(--font-main);cursor:pointer;background:#1e293bcc;border:1px solid #ffffff1a;border-radius:12px;align-items:center;gap:.5rem;padding:.6rem 1.2rem;font-weight:500;transition:all .2s;display:inline-flex}.btn-secondary:hover:not(:disabled){color:#fff;background:#334155e6;border-color:#fff3}.btn-secondary:disabled{opacity:.4;cursor:not-allowed}.pill-selector{background:#0f172a99;border:1px solid #ffffff14;border-radius:100px;padding:4px;display:flex}.pill-btn{color:#94a3b8;font-family:var(--font-main);cursor:pointer;background:0 0;border:none;border-radius:100px;padding:.5rem 1.25rem;font-size:.875rem;font-weight:600;transition:all .2s}.pill-btn.active{background:var(--accent-cyan);color:#020617;box-shadow:0 2px 8px #fc06}.overlay{-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);z-index:100;background:#020617d9;justify-content:center;align-items:center;animation:.4s forwards fadeIn;display:flex;position:fixed;inset:0}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal-content{text-align:center;width:90%;max-width:480px;padding:2.5rem}#confetti-canvas{pointer-events:none;z-index:99;width:100%;height:100%;position:fixed;top:0;left:0}body.light-theme{--bg-gradient:linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);--panel-bg:#ffffffbf;--panel-border:#003d7c1f;--accent-cyan:#ffba00;--accent-blue:#003d7c;--tile-bg:linear-gradient(to bottom, #fff 0%, #fcfaf4 100%);--tile-border:#d5d1ba;--tile-depth:linear-gradient(135deg, #eae7dd 0%, #eae7dd 45%, #15803d 46%, #166534 100%);--tile-text:#0f172a;background:var(--bg-gradient);color:#0f172a}body.light-theme .glass-panel{box-shadow:0 8px 32px #003d7c0d}body.light-theme .title-glow{background:linear-gradient(to right, var(--accent-blue), #0f172a);-webkit-text-fill-color:transparent;text-shadow:none;-webkit-background-clip:text}body.light-theme .tile-face{box-shadow:0 4px 6px #003d7c14}body.light-theme .tile-depth{border-bottom:2px solid #0003;border-right:2px solid #0000000d}body.light-theme .tile.free:hover:not(.selected) .tile-face{box-shadow:0 0 15px #ffba0066,0 8px 16px #00000026}body.light-theme .tile.selected .tile-face{color:#0f172a;text-shadow:none;background:#ffba0033;box-shadow:0 0 25px #ffba0099,0 10px 20px #00000026}body.light-theme .btn-secondary{color:#1e293b;background:#fffc;border:1px solid #003d7c1f}body.light-theme .btn-secondary:hover:not(:disabled){color:#0f172a;background:#f1f5f9}body.light-theme .pill-selector{background:#fffc;border:1px solid #003d7c1f}body.light-theme .pill-btn{color:#64748b}body.light-theme .pill-btn.active{color:#fff;background:var(--accent-blue);box-shadow:0 2px 8px #003d7c40}body.light-theme .btn-primary{background:linear-gradient(135deg, var(--accent-blue) 0%, #00254d 100%);box-shadow:0 4px 12px #003d7c26}body.light-theme .btn-primary:hover{box-shadow:0 6px 18px #003d7c40}.tile-face.medium-text{padding:4px;font-size:1.15rem;font-weight:800;line-height:1.15}.tile-face.long-text{word-wrap:break-word;overflow-wrap:break-word;word-break:break-all;text-align:center;padding:3px;font-size:.92rem;font-weight:800;line-height:1.1}body.whiteboard-mode{--tile-width:112px;--tile-height:125px;--tile-font-size:1.55rem}body.whiteboard-mode .tile-face.medium-text{padding:6px;font-size:1.45rem;line-height:1.15}body.whiteboard-mode .tile-face.long-text{padding:4px;font-size:1.22rem;line-height:1.1}body.whiteboard-mode .game-container{max-width:100%;padding:.75rem}body.whiteboard-mode header h1{font-size:2.25rem!important}body.whiteboard-mode header p{font-size:.95rem!important}body.whiteboard-mode .glass-panel{border-radius:20px;padding:1rem!important}body.whiteboard-mode label{margin-bottom:.6rem!important;font-size:1rem!important}body.whiteboard-mode .btn-primary,body.whiteboard-mode .btn-secondary{border-radius:16px!important;gap:.75rem!important;padding:1rem 1.75rem!important;font-size:1.2rem!important}body.whiteboard-mode .pill-selector{padding:6px!important}body.whiteboard-mode .pill-btn{padding:.65rem 1.5rem!important;font-size:1.1rem!important}body.whiteboard-mode .board-wrapper{flex:1;height:auto;min-height:0;padding:.5rem}body.whiteboard-mode .tile:active:not(.blocked) .tile-face{background:#ffcc004d;transform:translateZ(12px)scale(.95)}@keyframes button-pulse-warning{0%,to{border-color:#ef444466;box-shadow:0 0 #ef444466}50%{border-color:#ef4444cc;box-shadow:0 0 12px 4px #ef444499}}@keyframes button-pulse-suggested{0%,to{border-color:#10b98166;box-shadow:0 0 #10b98166}50%{border-color:#10b981cc;box-shadow:0 0 12px 4px #10b98199}}.pulse-button-warning{animation:1.6s ease-in-out infinite button-pulse-warning!important}.pulse-button-suggested{animation:1.6s ease-in-out infinite button-pulse-suggested!important}@keyframes dash{to{stroke-dashoffset:-20px}}@media (width<=768px){body.whiteboard-mode .game-container{padding:1rem}body.whiteboard-mode header{flex-direction:column;gap:1rem;align-items:flex-start!important}body.whiteboard-mode header>div{justify-content:space-between;width:100%}}.tile-height-badge{color:var(--accent-cyan);pointer-events:none;background:#0f172ae6;border:1px solid #fc06;border-radius:6px;align-items:center;gap:2px;padding:1px 5px;font-size:.65rem;font-weight:800;display:flex;position:absolute;bottom:6px;left:6px;box-shadow:0 2px 4px #00000080}body.whiteboard-mode .tile-height-badge{border-radius:8px;padding:2px 6px;font-size:.9rem;bottom:8px;left:8px}.tile-polycubes-content{flex-direction:column;justify-content:center;align-items:center;gap:4px;width:100%;height:100%;display:flex}.tile-polycubes-number{font-family:var(--font-mono);color:var(--tile-text);font-size:1.3rem;font-weight:800;line-height:1}body.whiteboard-mode .tile-polycubes-number{font-size:1.8rem}.polycubes-grid{flex-wrap:wrap;justify-content:center;align-items:flex-end;gap:3px;max-width:100%;padding:2px;display:flex}.polycube-stick{background:#0000000d;border:1px solid #0006;border-radius:4px;flex-direction:column-reverse;display:flex;overflow:hidden}.polycube-unit-container{flex-direction:column-reverse;gap:1px;display:flex}.polycube-cube{border:.5px solid #00000040;width:10px;height:10px;position:relative;box-shadow:inset 1px 1px 1px #fff3,inset -1px -1px 1px #0003}body.whiteboard-mode .polycube-cube{width:14px;height:14px}.polycube-cube.ten{background-color:#0284c7}.polycube-cube.one{background-color:#e11d48}.polycube-cube:after{content:"";background:#0000004d;border-radius:50%;width:3px;height:3px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:.5px .5px .5px #ffffff4d}body.whiteboard-mode .polycube-cube:after{width:4px;height:4px}.main-layout-wrapper{flex:1;gap:1.5rem;width:100%;min-height:0;transition:all .3s;display:flex;overflow:hidden}.main-content-area{flex-direction:column;flex-grow:1;min-width:0;height:100%;min-height:0;transition:all .3s;display:flex}.scores-sidebar{z-index:80;border:1px solid var(--panel-border);background:#001e3d66;flex-direction:column;flex-shrink:0;width:650px;height:100%;max-height:100%;animation:.3s ease-out forwards slideIn;display:flex;overflow:hidden;box-shadow:0 10px 30px #00000080}body.whiteboard-mode .scores-sidebar{width:780px;height:100%;max-height:100%}@keyframes slideIn{0%{opacity:0;transform:translate(100px)}to{opacity:1;transform:translate(0)}}.sidebar-header{background:#0206174d;border-bottom:1px solid #ffffff1a;justify-content:space-between;align-items:center;padding:.85rem 1.25rem;display:flex}.sidebar-title{align-items:center;gap:.5rem;margin:0;font-size:1.35rem;font-weight:800;display:flex}.sidebar-columns-container{flex-direction:row;flex-grow:1;gap:1.25rem;padding:1.25rem;display:flex;overflow:hidden}.sidebar-column{flex-direction:column;flex:1;gap:1rem;min-width:0;display:flex;overflow:hidden}.podium-wrapper{border-bottom:1px solid #ffffff14;justify-content:center;align-items:flex-end;gap:.5rem;margin-top:.25rem;margin-bottom:.5rem;padding-bottom:.75rem;display:flex}.podium-step{text-align:center;flex-direction:column;justify-content:flex-end;align-items:center;width:85px;display:flex}.podium-block{color:#020617;text-shadow:0 1px 1px #fff6;border-top-left-radius:8px;border-top-right-radius:8px;flex-direction:column;justify-content:center;align-items:center;width:100%;padding:6px 2px;font-weight:800;display:flex;box-shadow:0 4px 10px #0000004d}.podium-name{color:#cbd5e1;white-space:nowrap;text-overflow:ellipsis;text-align:center;width:85px;margin-bottom:4px;font-size:.75rem;font-weight:600;overflow:hidden}.podium-score{font-size:.85rem;font-weight:800}.ranking-table{border-collapse:collapse;width:100%}.ranking-table th{text-align:left;text-transform:uppercase;color:#64748b;border-bottom:1px solid #ffffff0d;padding:.4rem .5rem;font-size:.7rem}.ranking-table td{color:#cbd5e1;border-bottom:1px solid #ffffff05;padding:.45rem .5rem;font-size:.8rem}.ranking-badge-col{width:25px;font-size:.9rem}.students-chips-grid{flex-wrap:wrap;gap:.4rem;max-height:180px;padding-right:4px;display:flex;overflow-y:auto}body.whiteboard-mode .students-chips-grid{max-height:220px}.student-chip{cursor:pointer;color:#cbd5e1;background:#0206174d;border:1px solid #ffffff0d;border-radius:20px;align-items:center;gap:.4rem;padding:.45rem .75rem;font-size:.85rem;font-weight:600;transition:all .2s;display:inline-flex}.student-chip:hover{color:#fff;background:#ffcc0014;border-color:#ffcc0040}.student-chip.active{border-color:var(--accent-cyan);color:var(--accent-cyan);background:#ffcc0026}.student-chip-delete{cursor:pointer;opacity:.6;background:0 0;border:none;align-items:center;padding:0;font-size:.8rem;transition:opacity .2s;display:inline-flex}.student-chip-delete:hover{opacity:1}.compact-history-list{flex-direction:column;gap:.35rem;max-height:155px;padding-right:4px;display:flex;overflow-y:auto}body.whiteboard-mode .compact-history-list{max-height:185px}.history-item{background:#02061740;border:1px solid #ffffff08;border-radius:8px;padding:.45rem .65rem;font-size:.75rem}.sidebar-input-group{gap:.4rem;display:flex}.sidebar-input{color:#fff;font-family:var(--font-main);background:#02061780;border:1px solid #ffffff1a;border-radius:10px;flex-grow:1;padding:.5rem .75rem;font-size:.85rem}.sidebar-input:focus{border-color:var(--accent-cyan);outline:none;box-shadow:0 0 8px #fc03}.active-player-banner{color:var(--accent-cyan);background:#ffcc001f;border:1px solid #ffcc004d;border-radius:10px;align-items:center;gap:.5rem;width:100%;margin-bottom:1rem;padding:.5rem 1rem;font-weight:600;display:flex}.tile-face.color-blue{background:linear-gradient(135deg,#e0f2fe 0%,#bae6fd 40%,#7dd3fc 100%);border-color:#38bdf8}.tile-face.color-pink{background:linear-gradient(135deg,#ffe4e6 0%,#fecdd3 40%,#fda4af 100%);border-color:#fb7185}.tile-face.color-green{background:linear-gradient(135deg,#dcfce7 0%,#bbf7d0 40%,#86efac 100%);border-color:#4ade80}.tile-face.color-purple{background:linear-gradient(135deg,#f3e8ff 0%,#e9d5ff 40%,#c084fc 100%);border-color:#a855f7}.tile-face.color-amber{background:linear-gradient(135deg,#fef3c7 0%,#fde68a 40%,#fbbf24 100%);border-color:#f59e0b}@media (hover:hover){.tile.free:hover:not(.selected) .tile-face.color-blue{border-color:#0284c7;box-shadow:inset 0 3px #ffffffe6,inset 0 -4px #0284c740,0 16px 28px #0ea5e973,0 6px 12px #0003}.tile.free:hover:not(.selected) .tile-face.color-pink{border-color:#e11d48;box-shadow:inset 0 3px #ffffffe6,inset 0 -4px #e11d4840,0 16px 28px #f43f5e73,0 6px 12px #0003}.tile.free:hover:not(.selected) .tile-face.color-green{border-color:#16a34a;box-shadow:inset 0 3px #ffffffe6,inset 0 -4px #16a34a40,0 16px 28px #16a34a73,0 6px 12px #0003}.tile.free:hover:not(.selected) .tile-face.color-purple{border-color:#9333ea;box-shadow:inset 0 3px #ffffffe6,inset 0 -4px #9333ea40,0 16px 28px #9333ea73,0 6px 12px #0003}.tile.free:hover:not(.selected) .tile-face.color-amber{border-color:#d97706;box-shadow:inset 0 3px #ffffffe6,inset 0 -4px #d9770640,0 16px 28px #d9770673,0 6px 12px #0003}}