:root{--color-bg: #f5f5f7;--color-surface: #ffffff;--color-surface-hover: #f0f0f2;--color-text: #1d1d1f;--color-text-secondary: #6e6e73;--color-border: #d2d2d7;--color-accent: #3b82f6;--color-accent-hover: #2563eb;--color-success: #22c55e;--color-error: #ef4444;--color-highlight: rgba(56, 189, 248, .22);--color-highlight-d1: rgba(244, 114, 182, .22);--color-highlight-d2: rgba(99, 102, 241, .22);--color-highlight-d3: rgba(245, 158, 11, .22);--color-drag-shadow: rgba(0, 0, 0, .15);--color-collision-glow: rgba(59, 130, 246, .35);--operator-item-gap: 2px;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--shadow-sm: 0 1px 3px rgba(0, 0, 0, .06);--shadow-md: 0 2px 8px rgba(0, 0, 0, .08);--shadow-lg: 0 8px 24px rgba(0, 0, 0, .12);--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono: "SF Mono", "Fira Code", monospace}@media(prefers-color-scheme:dark){:root{--color-bg: #1a1a2e;--color-surface: #2d2d3f;--color-surface-hover: #3a3a4f;--color-text: #e5e5e7;--color-text-secondary: #9a9a9f;--color-border: #404050;--color-accent: #60a5fa;--color-accent-hover: #3b82f6;--color-success: #34d399;--color-error: #f87171;--color-highlight: rgba(96, 165, 250, .2);--color-highlight-d1: rgba(251, 191, 36, .2);--color-highlight-d2: rgba(244, 114, 182, .2);--color-highlight-d3: rgba(129, 140, 248, .2);--color-drag-shadow: rgba(0, 0, 0, .4);--color-collision-glow: rgba(96, 165, 250, .35);--shadow-sm: 0 1px 3px rgba(0, 0, 0, .3);--shadow-md: 0 2px 8px rgba(0, 0, 0, .4);--shadow-lg: 0 8px 24px rgba(0, 0, 0, .5)}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-family:var(--font-family);color:var(--color-text);background-color:var(--color-bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:transparent}body{min-height:100dvh;display:flex;flex-direction:column;align-items:center;user-select:none;-webkit-user-select:none}.btn{display:inline-flex;align-items:center;justify-content:center;gap:4px;padding:10px 20px;border:none;border-radius:var(--radius-md);font-size:15px;font-weight:500;font-family:inherit;cursor:pointer;transition:background-color .15s ease,opacity .15s ease,transform .1s ease;user-select:none;-webkit-user-select:none;touch-action:manipulation}.btn:active{transform:scale(.97)}.btn:disabled{opacity:.4;cursor:not-allowed;transform:none}.btn-primary{background-color:var(--color-accent);color:#fff}.btn-primary:hover:not(:disabled){background-color:var(--color-accent-hover)}.btn-ghost{background-color:transparent;color:var(--color-text-secondary);border:1px solid var(--color-border)}.btn-ghost:hover:not(:disabled){background-color:var(--color-surface-hover)}.btn-weak{background-color:transparent;color:var(--color-text-secondary);font-size:13px;padding:8px 14px;opacity:.7}.btn-weak:hover:not(:disabled){opacity:1;background-color:var(--color-surface-hover)}.hidden{display:none!important}.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.expression-container{position:relative;width:100%;max-width:560px;padding:clamp(52px,14.3vw,80px) 0;padding-left:12px;padding-right:12px;cursor:default;touch-action:none;box-shadow:#0006 0 2px 4px,#0000004d 0 7px 13px -3px,#0003 0 -3px inset;border-radius:var(--radius-lg);transition:background-color .2s ease,box-shadow .2s ease}#game-area{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:132px;width:100%;max-width:600px;padding:24px 16px;position:relative}.expression-block{display:flex;flex-direction:column;align-items:center;gap:20px;width:100%;max-width:560px}.expression-row{display:flex;align-items:center;justify-content:center;gap:8px;max-width:560px;width:100%;position:relative}.number-card{width:clamp(52px,14.3vw,80px);aspect-ratio:1;display:flex;align-items:center;justify-content:center;background-color:var(--color-surface);border:1.5px solid var(--color-border);border-radius:var(--radius-md);box-shadow:var(--shadow-md);cursor:grab;transition:transform .15s ease,box-shadow .15s ease,opacity .2s ease,border-color .2s ease;position:relative;z-index:1;touch-action:none}.number-card:hover{transform:scale(1.03);box-shadow:var(--shadow-lg)}.number-card.drag-origin{opacity:.3;pointer-events:none}.number-card.drag-placeholder{border-style:dashed;border-color:var(--color-accent);opacity:.5;pointer-events:none}.number-card.drag-placeholder .slot-value{visibility:hidden}.number-card.drag-clone{position:fixed;z-index:100;pointer-events:none;transform:scale(1.08);box-shadow:0 8px 32px var(--color-drag-shadow);cursor:grabbing;transition:none}.number-card.drag-target{border-color:var(--color-accent);box-shadow:0 0 0 3px var(--color-collision-glow),var(--shadow-md)}.number-card .slot-value{font-size:clamp(22px,5vw,32px);font-weight:600;color:var(--color-text);pointer-events:none}.operator-viewport{width:clamp(28px,8.6vw,48px);height:clamp(52px,14.3vw,80px);overflow:hidden;position:relative;display:flex;align-items:center;justify-content:center;z-index:1;touch-action:none;cursor:pointer;border-radius:var(--radius-md);background:transparent;transition:background-color .2s ease,box-shadow .2s ease;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}.operator-current{font-size:clamp(18px,4vw,26px);font-weight:600;color:var(--color-text);pointer-events:none}.operator-viewport.active{overflow:visible;z-index:20}.operator-grid{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:4px;padding:6px;background:var(--color-surface);border:1.5px solid var(--color-border);border-radius:var(--radius-md);box-shadow:0 4px 24px #00000040;opacity:0;pointer-events:none;transition:opacity .12s ease}.operator-viewport.active .operator-grid{opacity:1;pointer-events:auto}.operator-grid-cell{width:clamp(52px,14.3vw,80px);aspect-ratio:1;display:flex;align-items:center;justify-content:center;background:var(--color-surface);border:1.5px solid var(--color-border);border-radius:var(--radius-sm);font-size:clamp(22px,5vw,32px);font-weight:600;color:var(--color-text);cursor:pointer;transition:background-color .12s ease,border-color .12s ease;-webkit-user-select:none;user-select:none}@media(hover:hover){.operator-grid-cell:hover{background-color:color-mix(in srgb,var(--color-accent) 20%,var(--color-surface));border-color:var(--color-accent)}}.operator-grid-cell.highlight{background-color:color-mix(in srgb,var(--color-accent) 25%,var(--color-surface));border-color:var(--color-accent)}#highlight-layer{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:0}.highlight-overlay{position:absolute;background-color:var(--color-highlight);border-radius:var(--radius-md);transition:left .2s ease,top .2s ease,width .2s ease,height .2s ease}.highlight-overlay.depth-0{background-color:var(--color-highlight)}.highlight-overlay.depth-1{background-color:var(--color-highlight-d1)}.highlight-overlay.depth-2{background-color:var(--color-highlight-d2)}.highlight-overlay.depth-3{background-color:var(--color-highlight-d3)}#top-bar{display:flex;justify-content:space-between;align-items:center;width:100%;max-width:600px;padding:16px 20px;font-size:14px;color:var(--color-text-secondary)}.timer-display{font-variant-numeric:tabular-nums;font-family:var(--font-mono);font-size:16px;font-weight:500;color:var(--color-text)}.progress-display{font-size:13px}.action-bar{display:flex;gap:12px;width:100%;max-width:420px;justify-content:center}.action-bar .btn{flex:1}.action-bar .btn-weak{flex:.5}.status-message{min-height:24px;font-size:14px;color:var(--color-text-secondary);text-align:center;transition:color .2s ease}.status-message.error{color:var(--color-error)}.status-message.success{color:var(--color-success)}.victory-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:200;display:flex;align-items:center;justify-content:center;background-color:#00000080;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:overlay-fade-in .3s ease}.victory-card{display:flex;flex-direction:column;align-items:center;gap:16px;padding:40px 32px;background-color:var(--color-surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);max-width:360px;width:90%;text-align:center;animation:card-scale-in .35s ease}.victory-icon{font-size:48px}.victory-expression{font-size:24px;font-weight:700;color:var(--color-text);word-break:break-all}.victory-time{font-size:15px;color:var(--color-text-secondary)}#btn-next{width:100%;padding:14px 0;font-size:17px}.loading-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:300;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background-color:var(--color-bg);font-size:15px;color:var(--color-text-secondary)}.loading-spinner{width:36px;height:36px;border:3px solid var(--color-border);border-top-color:var(--color-accent);border-radius:50%;animation:spin .8s linear infinite}@keyframes overlay-fade-in{0%{opacity:0}to{opacity:1}}@keyframes card-scale-in{0%{transform:scale(.85);opacity:0}to{transform:scale(1);opacity:1}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-8px)}40%{transform:translate(8px)}60%{transform:translate(-6px)}80%{transform:translate(6px)}}.shake{animation:shake .4s ease}@media(max-width:420px){#top-bar{padding:12px 16px}#game-area{gap:100px;padding:16px 12px}.action-bar{flex-wrap:wrap;gap:8px}.action-bar .btn{flex:1 1 auto;font-size:14px;padding:12px 16px}.action-bar .btn-weak{flex:0 0 100%;order:1}.victory-card{padding:32px 24px}.victory-expression{font-size:20px}}