@import"https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&display=block";*{margin:0;padding:0;box-sizing:border-box}:root{--bg: #FFFDF5;--ink: #000000;--white: #FFFFFF;--accent: #FF6B6B;--secondary: #FFD93D;--muted: #C4B5FD;--cat-time: #FF6B6B;--cat-ai: #4ecdc4;--cat-docs: #FFD93D;--cat-connect: #C4B5FD;--cell-size: 42px;--board-gap: 3px}body{font-family:Space Grotesk,sans-serif;background:var(--bg);color:var(--ink);min-height:100vh;overflow:hidden}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;background-image:radial-gradient(#000 1px,transparent 1px);background-size:24px 24px;opacity:.025;pointer-events:none;z-index:0}#app{width:100vw;height:100vh;position:relative;z-index:1}.screen{position:absolute;top:0;right:0;bottom:0;left:0;display:none;align-items:center;justify-content:center;padding:20px}.screen.active{display:flex}.start-content{text-align:center;max-width:500px}.start-content h1{font-size:3rem;font-weight:700;text-transform:uppercase;letter-spacing:-.03em;line-height:1;margin-bottom:12px}.tagline{font-size:1.1rem;font-weight:700;margin-bottom:30px;text-transform:uppercase;letter-spacing:.05em}.categories-preview{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:36px}.cat-badge{padding:6px 14px;font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;border:3px solid var(--ink);box-shadow:3px 3px 0 0 var(--ink)}.cat-badge.time{background:var(--cat-time);color:var(--ink)}.cat-badge.ai{background:var(--cat-ai);color:var(--ink)}.cat-badge.docs{background:var(--cat-docs);color:var(--ink)}.cat-badge.connect{background:var(--cat-connect);color:var(--ink)}.primary-btn{background:var(--accent);color:var(--ink);border:4px solid var(--ink);padding:14px 36px;font-family:Space Grotesk,sans-serif;font-size:1rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;cursor:pointer;box-shadow:6px 6px 0 0 var(--ink);transition:transform .1s ease-out,box-shadow .1s ease-out}.primary-btn:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 0 var(--ink)}.primary-btn:active{transform:translate(4px,4px);box-shadow:0 0 0 0 var(--ink)}.secondary-btn{background:var(--white);color:var(--ink);border:3px solid var(--ink);padding:10px 24px;font-family:Space Grotesk,sans-serif;font-size:.9rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;cursor:pointer;margin-top:12px;box-shadow:4px 4px 0 0 var(--ink);transition:transform .1s ease-out,box-shadow .1s ease-out}.secondary-btn:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 0 var(--ink)}.secondary-btn:active{transform:translate(3px,3px);box-shadow:0 0 0 0 var(--ink)}.icon-btn{background:var(--secondary);border:3px solid var(--ink);padding:10px 14px;font-size:1.3rem;cursor:pointer;box-shadow:4px 4px 0 0 var(--ink);transition:transform .1s ease-out,box-shadow .1s ease-out}.icon-btn:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 0 var(--ink)}.icon-btn:active{transform:translate(3px,3px);box-shadow:0 0 0 0 var(--ink)}.how-to-content{max-width:500px;text-align:center}.how-to-content h2{margin-bottom:24px;font-size:2rem;font-weight:700;text-transform:uppercase}.instructions{display:flex;flex-direction:column;gap:12px;margin-bottom:24px;text-align:left}.step{display:flex;align-items:center;gap:14px;background:var(--white);padding:14px 18px;border:3px solid var(--ink);box-shadow:4px 4px 0 0 var(--ink)}.step-icon{font-size:1.6rem}.step p{font-weight:500}.tip{font-size:.9rem;font-weight:500;margin-bottom:20px}#game-screen{flex-direction:column;gap:12px;padding:10px}.game-header{display:flex;gap:20px;justify-content:center;padding:8px 0}.score-display,.level-display,.tips-display{display:flex;flex-direction:column;align-items:center;gap:2px;background:var(--white);border:3px solid var(--ink);padding:6px 16px;box-shadow:3px 3px 0 0 var(--ink)}.game-header .label{font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.15em}.game-header #score,.game-header #level,.game-header #tips-count{font-size:1.5rem;font-weight:700}.game-board{display:grid;grid-template-columns:repeat(8,var(--cell-size));grid-template-rows:repeat(8,var(--cell-size));gap:var(--board-gap);background:var(--ink);padding:6px;border:4px solid var(--ink);box-shadow:8px 8px 0 0 var(--ink);-webkit-user-select:none;user-select:none}.cell{width:var(--cell-size);height:var(--cell-size);background:var(--bg);border:2px solid var(--ink);transition:background .1s,transform .15s;position:relative}.cell.filled-time{background:var(--cat-time);border-color:var(--ink)}.cell.filled-ai{background:var(--cat-ai);border-color:var(--ink)}.cell.filled-docs{background:var(--cat-docs);border-color:var(--ink)}.cell.filled-connect{background:var(--cat-connect);border-color:var(--ink)}.cell.preview{opacity:.5}.cell.clearing{animation:clearPop .3s ease-out forwards}@keyframes clearPop{0%{transform:scale(1);opacity:1}50%{transform:scale(1.15);opacity:.7}to{transform:scale(0);opacity:0}}.piece-tray{display:flex;gap:16px;justify-content:center;align-items:center;padding:12px;min-height:110px;background:var(--white);border:4px solid var(--ink);box-shadow:6px 6px 0 0 var(--ink)}.piece-container{cursor:grab;padding:8px;border:2px solid transparent;transition:transform .1s ease-out,border-color .1s}.piece-container:hover{transform:translate(-2px,-2px);border-color:var(--ink)}.piece-container:active{cursor:grabbing}.piece-container.dragging{opacity:.3;transform:scale(.9)}.piece-grid{display:grid;gap:2px}.piece-cell{width:28px;height:28px;border:2px solid var(--ink)}.piece-cell.filled-time{background:var(--cat-time)}.piece-cell.filled-ai{background:var(--cat-ai)}.piece-cell.filled-docs{background:var(--cat-docs)}.piece-cell.filled-connect{background:var(--cat-connect)}.piece-cell.empty{background:transparent;border-color:transparent}.drag-ghost{position:fixed;pointer-events:none;z-index:1000;opacity:.85}.drag-ghost .piece-grid{gap:2px}.drag-ghost .piece-cell{width:var(--cell-size);height:var(--cell-size);border:2px solid var(--ink)}.game-footer{display:flex;gap:12px;justify-content:center}.modal{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#0009;z-index:500;padding:20px}.modal.hidden{display:none}.modal-content{background:var(--bg);border:4px solid var(--ink);box-shadow:8px 8px 0 0 var(--ink);padding:28px;max-width:500px;width:100%;max-height:80vh;overflow-y:auto}.quiz-content h3{margin-bottom:12px;font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.15em}#quiz-question{font-size:1.1rem;font-weight:700;margin-bottom:20px;line-height:1.5}.quiz-choices{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}.quiz-choice-btn{background:var(--white);border:3px solid var(--ink);color:var(--ink);padding:12px 16px;cursor:pointer;font-family:Space Grotesk,sans-serif;font-size:.95rem;font-weight:500;text-align:left;box-shadow:4px 4px 0 0 var(--ink);transition:transform .1s ease-out,box-shadow .1s ease-out}.quiz-choice-btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 0 var(--ink)}.quiz-choice-btn:active{transform:translate(2px,2px);box-shadow:0 0 0 0 var(--ink)}.quiz-choice-btn.correct{background:var(--cat-ai);border-color:var(--ink)}.quiz-choice-btn.incorrect{background:var(--accent);border-color:var(--ink)}.quiz-feedback{padding:12px;border:3px solid var(--ink);margin-bottom:16px;font-size:.9rem;font-weight:500;line-height:1.5}.quiz-feedback.correct{background:var(--cat-ai);color:var(--ink)}.quiz-feedback.incorrect{background:var(--accent);color:var(--ink)}.tips-tabs{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}.tip-tab{background:var(--white);border:3px solid var(--ink);color:var(--ink);padding:6px 12px;cursor:pointer;font-family:Space Grotesk,sans-serif;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;box-shadow:3px 3px 0 0 var(--ink);transition:transform .1s ease-out,box-shadow .1s ease-out,background .1s}.tip-tab:hover{transform:translate(-1px,-1px)}.tip-tab.active{background:var(--secondary);transform:translate(2px,2px);box-shadow:0 0 0 0 var(--ink)}.tips-list{display:flex;flex-direction:column;gap:10px;margin-bottom:20px;min-height:100px}.tip-card{background:var(--white);padding:12px 16px;font-size:.9rem;font-weight:500;line-height:1.5;border:3px solid var(--ink);border-left:8px solid var(--ink)}.tip-card.cat-time{border-left-color:var(--cat-time)}.tip-card.cat-ai{border-left-color:var(--cat-ai)}.tip-card.cat-docs{border-left-color:var(--cat-docs)}.tip-card.cat-connect{border-left-color:var(--cat-connect)}.no-tips{font-weight:500;text-align:center;padding:30px}.gameover-content{text-align:center;max-width:520px}.gameover-content h2{font-size:2.5rem;font-weight:700;text-transform:uppercase;margin-bottom:20px}.final-stats{display:flex;gap:16px;justify-content:center;margin-bottom:24px}.stat{display:flex;flex-direction:column;gap:4px;background:var(--white);border:3px solid var(--ink);padding:10px 18px;box-shadow:4px 4px 0 0 var(--ink)}.stat-label{font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em}.stat span:last-child{font-size:1.8rem;font-weight:700}.gameover-tips{text-align:left;margin-bottom:24px;max-height:50vh;overflow-y:auto}.gameover-tips h4{margin-bottom:10px;font-weight:700;text-transform:uppercase;font-size:.85rem;letter-spacing:.05em}@media (max-width: 500px){:root{--cell-size: 36px}.start-content h1{font-size:2.2rem}.piece-cell{width:22px;height:22px}.drag-ghost .piece-cell{width:var(--cell-size);height:var(--cell-size)}.game-board{box-shadow:6px 6px 0 0 var(--ink)}}@media (max-width: 380px){:root{--cell-size: 32px}}@media (prefers-reduced-motion: reduce){.cell.clearing{animation:none}}