/* WORKPLAYBOX 3.1: category splashes, illuminated game interfaces and precise tools. */
.hero{transition:background .3s ease,border-color .3s ease;position:relative;isolation:isolate}
.hero[data-view="games"]{background:radial-gradient(ellipse at 79% 40%,rgba(235,98,162,.25),transparent 46%),linear-gradient(112deg,#151027,#191128 60%,#25132c);border-color:#8d487e66}
.hero[data-view="experiments"]{background:radial-gradient(ellipse at 80% 55%,rgba(48,216,216,.28),transparent 45%),linear-gradient(112deg,#091e2c,#101930 60%,#0a2734);border-color:#228f9b88}
.hero[data-view="tools"]{background:radial-gradient(ellipse at 85% 55%,rgba(154,247,122,.21),transparent 50%),linear-gradient(112deg,#15231d,#172c2b 60%,#25362b);border-color:#81b67c66}
.hero[data-view="favorites"]{background:radial-gradient(ellipse at 80% 55%,rgba(249,122,182,.2),transparent 50%),linear-gradient(112deg,#25152b,#25162a 70%,#311c39)}
.hero[data-view="recent"]{background:radial-gradient(ellipse at 80% 55%,rgba(255,201,97,.23),transparent 50%),linear-gradient(112deg,#1d1b2d,#282035 70%,#2c252b)}
.hero.hero-transition .hero-copy{animation:hero-enter .34s ease both}
.hero.hero-transition .hero-art{animation:hero-art-enter .6s ease both}
@keyframes hero-enter{from{opacity:.4;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes hero-art-enter{from{transform:rotate(-12deg) scale(.85);opacity:.5}to{transform:rotate(0) scale(1);opacity:1}}
.hero[data-view="experiments"] .hero-core{color:#6beced;text-shadow:0 0 35px #39f1ec88}
.hero[data-view="tools"] .hero-core{color:#baf3a0;text-shadow:0 0 35px #8cf4a088}
.hero[data-view="games"] .hero-core{color:#fd97ce;text-shadow:0 0 40px #fd73bd88}
.hero[data-view="favorites"] .hero-core{color:#fe8cba}
.hero[data-view="recent"] .hero-core{color:#ffc46e}
.module-card{background-image:radial-gradient(circle at 90% 0%,color-mix(in srgb,var(--card-color) 10%,transparent),transparent 55%)}
.module-card .card-icon{box-shadow:0 0 24px color-mix(in srgb,var(--card-color) 15%,transparent);text-shadow:0 0 18px color-mix(in srgb,var(--card-color) 55%,transparent)}
.module-card:hover{transform:translateY(-4px);box-shadow:0 12px 38px color-mix(in srgb,var(--card-color) 14%,transparent)}
.upgraded-stage{background:radial-gradient(ellipse at 50% 36%,#192441,#0b1226 72%)}
.upgraded-play-area{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:13px;width:100%;min-height:280px;flex:1}
.upgraded-play-area canvas{height:auto}
.upgraded-tool-area{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:15px;width:100%;flex:1}
.config-field{display:flex;flex-direction:column;gap:8px;color:#cad6ee;font-size:11px;font-weight:700}
.config-field .select{width:100%}.config-field input[type=range]{width:100%;accent-color:var(--accent)}
.game-info-line{font-size:11px;font-weight:800;letter-spacing:.09em;text-align:center;color:#9fb7d5}
.pixel-game-canvas{border:1px solid #4c4e7966;box-shadow:0 18px 50px #050a1eaa,inset 0 0 30px #a78eff1c;border-radius:15px}
.touch-controls{display:flex;gap:7px;flex-wrap:wrap}.touch-controls button{flex:1}
/* 2048 DOM tiles retain identity while traveling into the resulting cells. */
.p2048-board{--gap:9px;--slide-ms:180ms;position:relative;width:min(430px,100%);aspect-ratio:1;background:linear-gradient(145deg,#252d49,#171d34);border:1px solid #6672a0;border-radius:21px;padding:12px;box-shadow:0 18px 55px #0007,0 0 38px #966cff18;touch-action:none;user-select:none;overflow:hidden}
.p2048-background,.p2048-tiles{position:absolute;inset:12px}
.p2048-background{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr));gap:var(--gap)}
.p2048-empty{background:#0b1328b8;border:1px solid #5c678529;border-radius:13px}
.p2048-tile{position:absolute;display:grid;place-items:center;font-size:clamp(17px,4vw,31px);font-weight:1000;border-radius:13px;left:calc(var(--x) * ((100% - 3 * var(--gap))/4 + var(--gap)));top:calc(var(--y) * ((100% - 3 * var(--gap))/4 + var(--gap)));width:calc((100% - 3 * var(--gap))/4);height:calc((100% - 3 * var(--gap))/4);color:#162332;text-shadow:0 1px 1px #fff7;box-shadow:inset 0 3px 5px #fff4,0 7px 13px #0005;transition:left var(--slide-ms) cubic-bezier(.2,.7,.2,1),top var(--slide-ms) cubic-bezier(.2,.7,.2,1);will-change:left,top}
.p2048-tile[data-value="2"]{background:#a2eff2;color:#153b50}
.p2048-tile[data-value="4"]{background:#a2b6ff;color:#27365d}
.p2048-tile[data-value="8"]{background:#c5a0fa;color:#2b2053}
.p2048-tile[data-value="16"]{background:#fd89b5;color:#55213a}
.p2048-tile[data-value="32"]{background:#fcbb7d;color:#592e12}
.p2048-tile[data-value="64"]{background:#ffe58b;color:#694318}
.p2048-tile[data-value="128"]{background:#8deda9;color:#174c32}
.p2048-tile[data-value="256"]{background:#67ebd1;color:#0f4445}
.p2048-tile[data-value="512"]{background:#58d1f2;color:#153e5c}
.p2048-tile[data-value="1024"]{background:#df9bff;color:#512169;font-size:24px}
.p2048-tile[data-value="2048"],.p2048-tile[data-value="4096"],.p2048-tile[data-value="8192"]{background:linear-gradient(135deg,#ffe6a6,#fa9aff,#b59aff);font-size:24px;color:#401e49;box-shadow:0 0 35px #ffd47b8f}
.p2048-moving{z-index:3}.p2048-moving.merging{filter:brightness(1.16)}
.p2048-spawn{animation:tile-new .18s cubic-bezier(.16,1.6,.4,1) both}
.p2048-merged{animation:tile-merge .25s cubic-bezier(.12,1.65,.45,1) both;z-index:4}
.p2048-nudge{animation:tile-shake .14s linear}
@keyframes tile-new{from{opacity:0;scale:.3}to{opacity:1;scale:1}}
@keyframes tile-merge{0%{scale:.88}60%{scale:1.16}100%{scale:1}}
@keyframes tile-shake{0%{transform:translateX(0)}35%{transform:translateX(-3px)}70%{transform:translateX(3px)}100%{transform:translateX(0)}}
.p2048-banner{font:800 11px/1.4 Consolas,monospace;letter-spacing:.06em;color:#c5b3ff;text-align:center}
/* Lights Out visual tutorial and hint. */
.lights-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:9px;width:min(395px,100%);background:#080e1f;border-radius:19px;padding:14px;border:1px solid #59747555;box-shadow:0 0 35px #5acb9a15}
.lights-toggle{min-width:0;aspect-ratio:1;border:1px solid #4f5a7a;border-radius:13px;background:linear-gradient(#222d47,#11192e);color:#62718e;cursor:pointer;font-size:27px;transition:box-shadow .12s,background .12s,transform .12s}
.lights-toggle:hover{transform:scale(1.04)}
.lights-toggle.lit{background:radial-gradient(circle at 50% 50%,#d3ff9b,#78d98a 72%);color:#215f4c;box-shadow:inset 0 2px 10px #ffffc488,0 0 24px #86fca26b;border-color:#baffbf}
.lights-toggle.hinted{outline:3px solid #ffcd65;outline-offset:2px;animation:hint-pulse .65s ease infinite alternate}
@keyframes hint-pulse{from{box-shadow:0 0 6px #ffce51}to{box-shadow:0 0 28px #ffce51}}
/* Aim Trainer: mathematical + sign at exact center via absolute flex layout. */
.aim-arena{position:relative;width:min(100%,740px);height:350px;overflow:hidden;cursor:crosshair;border-radius:16px;border:1px solid #384769;background:radial-gradient(ellipse at center,#20385a 0%,#0b152c 70%);background-image:linear-gradient(#b2c7ff0b 1px,transparent 1px),linear-gradient(90deg,#b2c7ff0b 1px,transparent 1px),radial-gradient(ellipse at center,#20385a,#0b152c);background-size:32px 32px,32px 32px,100% 100%}
.aim-target{position:absolute;display:grid;place-items:center;transform:translate(-50%,-50%);border:3px solid #ffe4f1;border-radius:50%;background:radial-gradient(circle,#fffbfe 0% 12%,#fc5b9d 13% 25%,#ffe5f0 26% 36%,#b84589 37% 60%,#ff83b9 61% 100%);box-shadow:0 0 25px #f65aab85,0 0 80px #f65aab44;cursor:crosshair;padding:0;z-index:2;touch-action:manipulation}
.aim-target[hidden]{display:none!important}.aim-cross{position:absolute;display:grid;place-items:center;inset:0;font:1000 19px/1 monospace;color:#291439;text-shadow:0 0 3px #fff;pointer-events:none}
.aim-impact{position:absolute;transform:translate(-50%,-110%);font:1000 20px monospace;color:#d1ffb0;text-shadow:0 0 14px #b0fa98;pointer-events:none;z-index:3;animation:impact-rise .6s ease both}
@keyframes impact-rise{to{transform:translate(-50%,-205%);opacity:0}}
/* Whiteboard: no object-fit letterboxing and no independent CSS height constraints. */
.stage canvas.whiteboard-precise{display:block;box-sizing:border-box!important;width:100%!important;max-width:750px!important;height:auto!important;max-height:none!important;aspect-ratio:750/425!important;object-fit:fill!important;touch-action:none!important;margin:auto;cursor:crosshair}
.whiteboard-frame{width:min(100%,750px);background:#f4f7ff;border:6px solid #b1bbd2;border-radius:15px;box-shadow:0 14px 35px #0007;overflow:hidden}
.whiteboard-swatches{display:flex;flex-wrap:wrap;justify-content:center;gap:9px}
.whiteboard-swatch{border-radius:50%;width:30px;height:30px;border:2px solid #d1dced;box-shadow:0 0 0 1px #1b2644;cursor:pointer}
.whiteboard-swatch.active{outline:3px solid var(--accent)}
.whiteboard-toolbar{display:flex;gap:7px;flex-wrap:wrap}
.whiteboard-toolbar button{border:1px solid #455678;background:#283450;color:#dae6ff;border-radius:9px;padding:9px 15px}
/* Distinct instrument pads and spectrum visualizer. */
.soundbox-intro{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}.soundbox-intro strong{font-size:clamp(24px,4vw,40px);font-weight:950;letter-spacing:.13em;text-shadow:0 0 30px #a485ff88}.soundbox-intro small{font:700 10px Consolas,monospace;letter-spacing:.13em;color:#9facd6}
.soundbox-visual{width:100%;max-width:760px;max-height:120px;border-radius:11px;border:1px solid #303f64;background:#0a1125;box-shadow:0 5px 40px #1aa7c516}
.soundbox-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;width:min(100%,760px)}
.sound-pad{position:relative;min-width:0;min-height:112px;padding:12px 5px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;text-align:center;border:1px solid #3e5277;border-radius:12px;background:radial-gradient(circle at 50% 0%,#2a3e6b,#141d33 88%);color:#f2f7ff;transition:transform .1s,box-shadow .12s,border-color .12s}
.sound-pad:hover,.sound-pad.playing{border-color:#9c89ff;transform:translateY(-2px);box-shadow:0 0 26px #9580ff66;background:radial-gradient(circle at 50% 0%,#524e94,#1c274b 88%)}
.sound-pad.playing{animation:pad-hit .22s ease}.sound-pad .sound-emoji{font-size:24px}.sound-pad strong{font:900 12px/1.1 system-ui;letter-spacing:.07em}.sound-pad small{font:10px/1.2 system-ui;color:#abb6d4;max-width:120px}
.sound-number{position:absolute;top:6px;left:9px;color:#7d98b5;font:10px Consolas}
@keyframes pad-hit{50%{transform:scale(.95);filter:brightness(1.55)}}
/* Grammar-safe excuse generator. */
.excuse-output{width:min(100%,670px);display:flex;align-items:center;justify-content:center;min-height:180px;text-align:center;padding:26px;background:radial-gradient(circle at top,#342b53,#172039 70%);border:1px solid #aa88ff66;border-radius:18px;box-shadow:0 0 35px #b284ff18;font-weight:800;line-height:1.65;font-size:clamp(18px,2.6vw,26px)}
/* Office overlay: usable top ribbon, sheet switches, spreadsheet-like table. */
.office-31{padding-top:12px}.office-head-right{margin-left:auto;color:#72859b;font-size:11px}.office-head-right:first-letter{color:#208f69}
.office-31 .office-tabs{gap:5px;padding:3px 0 0;align-items:stretch}.office-31 .office-tabs button{background:transparent!important;border-radius:5px 5px 0 0!important;color:#56677c!important;padding:10px 18px!important;font:600 12px Arial,sans-serif;cursor:pointer}.office-31 .office-tabs button:hover{background:#e8f0e9!important}.office-31 .office-tabs button.active{color:#176b50!important;border-bottom:3px solid #24946b!important;background:#eaf5ee!important}
.office-toolbar{min-height:65px;background:#fff;border:1px solid #e3e8ee;display:flex;align-items:center;flex-wrap:wrap;gap:7px;padding:10px;margin-bottom:15px}
.office-31 .office-toolbar button{background:#f2f6f8!important;color:#405466!important;border:1px solid #d5e0e8!important;padding:9px 12px!important}.office-31 .office-toolbar button:hover{background:#d7ece3!important}
.office-breadcrumb{font-size:10px;color:#92a0b0;font-weight:800;letter-spacing:.12em}.office-breadcrumb span{margin:0 10px}.office-breadcrumb b{color:#197956}
.office-section-title{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;margin:18px 0 10px}.office-section-title h2{font-size:18px}.office-section-title span{font-size:11px;color:#8393a1}
.office-quickbar{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:17px}.office-quickbar label{margin-right:auto}.office-31 .office-quickbar button{background:#eef4f0!important;border:1px solid #cddfd5!important;color:#24694f!important}
.office-31 .office-sheet{max-height:calc(100vh - 430px);min-height:260px;overflow:auto;box-shadow:0 1px 6px #00000009}
.office-meter{display:inline-block;width:57px;height:7px;background:#dfe5eb;border-radius:8px;overflow:hidden;margin-right:7px;vertical-align:middle}.office-meter i{display:block;background:#25a470;height:100%}
.office-31 .office-sheet th{position:sticky;top:0;z-index:2;background:#eaf0f5;font-weight:700;color:#4b5c71}
.office-31 .office-sheet tr:hover td{background:#e8f5f0}.office-bottom-tabs{display:flex;align-items:center;gap:2px;background:#e7edf2;border:1px solid #d6e0e7;border-top:0;padding:0 12px;overflow:auto}
.office-31 .office-bottom-tabs button{border-radius:0!important;background:transparent!important;color:#567085!important;padding:10px 18px!important;white-space:nowrap;border-bottom:2px solid transparent!important;font-weight:700}
.office-31 .office-bottom-tabs button.active{color:#187653!important;background:white!important;border-bottom:3px solid #248a66!important}
.office-bottom-tabs span{margin-left:auto;color:#7c8d9c;font-size:10px;white-space:nowrap}
.office-statusbar{display:flex;gap:23px;padding:13px 5px;color:#75869a;font-size:10px;letter-spacing:.07em}.office-statusbar span:first-child{margin-left:auto}
.office-31.compact .office-sheet td,.office-31.compact .office-sheet th{padding:3px 8px;font-size:11px}
@media(max-width:900px){.soundbox-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.office-head-right{display:none}}
@media(max-width:600px){.p2048-board{--gap:6px;padding:8px;border-radius:14px}.p2048-background,.p2048-tiles{inset:8px}.p2048-tile{border-radius:8px;font-size:clamp(15px,5.2vw,25px)}.soundbox-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.sound-pad{min-height:99px}.aim-arena{height:300px}.office-31 .office-tabs{overflow:auto;gap:0}.office-31 .office-tabs button{padding:9px!important}.office-31 .office-sheet{max-height:55vh}.office-quickbar label{width:100%}.office-quickbar input{min-width:0;width:100%}.office-head h2{font-size:16px}}
@media(prefers-reduced-motion:reduce){.p2048-tile{transition-duration:.01ms}.hero.hero-transition .hero-copy,.hero.hero-transition .hero-art,.p2048-spawn,.p2048-merged{animation:none}}
/* Arcade skins for the classic modules, not just bare squares. */
.module-page[data-id="memory"] .game-tile{font-size:34px;background:linear-gradient(150deg,#25375f,#1a223d);border-color:#7f65c05c;box-shadow:inset 0 3px 9px #ffffff07,0 5px 12px #0003;min-height:73px}
.module-page[data-id="memory"] .game-tile.active,.module-page[data-id="memory"] .game-tile.good{background:linear-gradient(150deg,#6346b7,#344f94);box-shadow:0 0 19px #af80fa60;text-shadow:0 0 15px #fff5}
.module-page[data-id="tic-tac-toe"] .game-tile{min-height:96px;background:linear-gradient(135deg,#1b2945,#1e2145);color:#a4ecfd;font-size:45px;text-shadow:0 0 18px #73d8fb99;border-color:#5a4b8d66}
.module-page[data-id="minesweeper"] .game-tile{background:linear-gradient(160deg,#2d3958,#192239);border-color:#56658f;box-shadow:inset 0 2px 1px #ffffff1b;min-height:35px}
.module-page[data-id="minesweeper"] .game-tile.shown{background:#111d35;color:#e3efff;box-shadow:inset 0 3px 9px #0007}
.module-page[data-id="minesweeper"] .game-tile.mine{background:#d64a75;box-shadow:0 0 19px #f95b7d80}
.module-page[data-id="whack"] .game-tile{font-size:44px;min-height:92px;background:radial-gradient(circle at 50% 110%,#3a335e,#17203a 80%)}
.module-page[data-id="whack"] .game-tile.good{background:radial-gradient(circle at 50% 70%,#68b58e,#234b4e 82%);box-shadow:0 0 26px #9fffad66}
.module-page[data-id="simon"] .pad-grid button{box-shadow:inset 0 4px 10px #fff5,0 0 15px currentColor;border:3px solid #ffffff1f}
.module-page[data-id="simon"] .pad-grid button.flash{filter:brightness(1.7);box-shadow:0 0 42px currentColor}
.module-page[data-id="click-challenge"] .stage .primarybtn{font-size:20px;box-shadow:0 0 24px #a673ff50;min-height:60px}
.stage canvas.pixel-game-canvas{height:auto!important;max-height:none!important;object-fit:fill!important}
.reduced-motion .p2048-tile{transition-duration:0ms!important}