:root{--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font-size-xs: .7rem;--font-size-sm: .8rem;--font-size-base: .95rem;--font-size-lg: 1rem;--font-size-xl: 1.25rem;--font-size-2xl: 2.4rem;--font-weight-normal: 400;--font-weight-semibold: 600;--font-weight-bold: 700;--letter-spacing-tight: .04em;--letter-spacing-wide: .08em;--letter-spacing-wider: .1em;--color-primary: #ff6b00;--color-primary-light: #ff8d33;--color-primary-lighter: #ffb76b;--color-primary-dark: #ff5d00;--color-primary-darker: #ff7b2c;--color-secondary: #ffd2a0;--color-secondary-light: #ffe4cc;--color-secondary-lighter: #fff8f2;--color-accent: #ffe66d;--color-accent-light: rgba(252, 211, 77, .3);--color-text-primary: #101318;--color-text-secondary: #242c3a;--color-text-muted: #424c5c;--color-text-inverse: #ffffff;--color-background: #ffffff;--color-background-overlay: rgba(255, 255, 255, .7);--color-background-overlay-strong: rgba(255, 255, 255, .9);--color-background-overlay-weak: rgba(255, 255, 255, .1);--color-border: rgba(255, 146, 68, .15);--color-border-strong: rgba(255, 146, 68, .22);--color-border-weak: rgba(255, 146, 68, .1);--color-border-accent: rgba(255, 132, 47, .25);--color-border-accent-weak: rgba(255, 166, 106, .25);--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;--space-xl: 18px;--space-2xl: 24px;--space-3xl: 28px;--space-4xl: 40px;--space-5xl: 48px;--space-6xl: 56px;--space-7xl: 70px;--space-8xl: 105px;--space-9xl: 140px;--space-10xl: 180px;--space-11xl: 220px;--radius-sm: 16px;--radius-md: 18px;--radius-lg: 20px;--radius-xl: 24px;--radius-2xl: 28px;--radius-3xl: 36px;--radius-4xl: 40px;--shadow-sm: 0 4px 10px rgba(16, 185, 129, .2);--shadow-md: 0 8px 16px rgba(255, 94, 0, .25);--shadow-lg: 0 10px 20px rgba(31, 40, 53, .05);--shadow-xl: 0 12px 24px rgba(255, 123, 44, .25);--shadow-2xl: 0 16px 28px rgba(255, 94, 0, .25);--shadow-3xl: 0 18px 32px rgba(16, 24, 40, .2);--shadow-4xl: 0 22px 32px rgba(255, 132, 47, .22);--shadow-5xl: 0 30px 55px rgba(255, 132, 47, .15);--shadow-6xl: 0 40px 70px rgba(255, 135, 52, .18);--gradient-primary: linear-gradient( 135deg, var(--color-primary-lighter), var(--color-primary-darker) );--gradient-primary-alt: linear-gradient( 135deg, var(--color-primary-light), var(--color-primary-dark) );--gradient-background: linear-gradient( 130deg, var(--color-secondary-lighter) 0%, var(--color-secondary-light) 50%, var(--color-secondary) 100% );--gradient-board: linear-gradient( 180deg, rgba(255, 152, 71, .08) 0%, var(--color-background-overlay-weak) 100% );--gradient-controls: linear-gradient( 180deg, rgba(255, 153, 78, .12) 0%, var(--color-background-overlay) 100% );--gradient-mobile: linear-gradient(180deg, rgba(255, 226, 197, .92), rgba(255, 190, 138, .95));--transition-fast: .12s ease;--transition-normal: .2s ease;--z-board: 1;--z-controls: 50;--z-next-panel: 60;--z-next-panel-mobile: 70;--z-restart: 80;--max-width-game: min(1200px, 100%);--max-width-board: 380px;--max-width-board-canvas: 360px;--max-width-controls: 420px;--max-width-next-panel: min(260px, 100%);--max-width-next-panel-mobile: 110px;--breakpoint-tablet: 860px;--breakpoint-mobile: 640px}*{box-sizing:border-box}body{margin:0;min-height:100vh;display:flex;align-items:center;justify-content:center;overflow-x:hidden;font-family:var(--font-family);background:var(--gradient-background);color:var(--color-text-primary)}#app{width:100%;min-height:100%;display:flex;align-items:center;justify-content:center;padding:clamp(var(--space-lg),3vw,var(--space-4xl));padding-top:calc(clamp(var(--space-lg),3vw,var(--space-4xl)) + clamp(var(--space-9xl),18vh,var(--space-11xl)))}.game-wrapper{width:var(--max-width-game);display:grid;grid-template-columns:minmax(260px,320px) minmax(420px,1fr) minmax(200px,230px);gap:clamp(var(--space-2xl),4vw,var(--space-5xl));padding:clamp(var(--space-2xl),3vw,42px);background:var(--color-background);border-radius:var(--radius-4xl);box-shadow:var(--shadow-6xl)}.game-wrapper>*{align-self:center}.hud{display:flex;flex-direction:column;gap:var(--space-sm)}.hud h1{font-size:var(--font-size-2xl);margin:0;color:var(--color-text-primary)}.hud p{margin:0}.hud-label{font-weight:var(--font-weight-semibold);font-size:var(--font-size-lg);color:var(--color-text-primary)}.hud-label span{color:var(--color-primary)}.hud-message{min-height:var(--space-3xl);padding:var(--space-md) var(--space-lg);border-radius:var(--radius-sm);background:#ff924424;font-size:var(--font-size-base);text-align:center;color:var(--color-primary);font-weight:var(--font-weight-semibold)}.hud-note{font-size:var(--font-size-base);color:var(--color-text-muted);background:var(--color-background-overlay);border-radius:var(--radius-lg);padding:var(--space-md) var(--space-lg);border:1px solid var(--color-border)}.board-wrapper{position:relative;width:fit-content;border-radius:var(--radius-xl);overflow:hidden;background:var(--gradient-board);box-shadow:inset 0 0 0 1px var(--color-border-accent),var(--shadow-5xl);border:1px solid var(--color-border-accent-weak);justify-self:center}.main-board{display:block;position:relative;z-index:var(--z-board)}.board-wrapper canvas{width:100%;height:auto;image-rendering:crisp-edges;max-width:100%}.button-row{margin-top:var(--space-xl);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;background:var(--gradient-controls);padding:var(--space-xl);border-radius:var(--radius-xl);border:1px solid var(--color-border);z-index:var(--z-controls)}.control{display:flex;flex-direction:column;align-items:center;gap:var(--space-sm);padding:14px 10px 10px;border-radius:var(--radius-lg);background:var(--color-background-overlay);border:1px solid var(--color-border-weak);box-shadow:var(--shadow-lg)}.control-emphasis{background:var(--color-accent-light)}.control-label{font-size:.9rem;font-weight:var(--font-weight-semibold);color:var(--color-text-secondary);text-align:center}.control button{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;border-radius:var(--radius-xl);padding:var(--space-md);font-size:1.5rem;background:var(--gradient-primary);color:var(--color-text-inverse);font-weight:var(--font-weight-bold);box-shadow:var(--shadow-xl);cursor:pointer;transition:transform var(--transition-fast),box-shadow var(--transition-fast);touch-action:manipulation;width:100%}.control button:active{transform:scale(.95);box-shadow:var(--shadow-sm)}.control button:focus-visible{outline:3px solid rgba(16,31,53,.3);outline-offset:3px}.restart-button{position:fixed;top:clamp(var(--space-lg),2.5vw,var(--space-3xl));left:clamp(var(--space-lg),2.5vw,var(--space-3xl));margin:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;border-radius:var(--radius-xl);padding:10px 22px;font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);color:var(--color-text-inverse);background:var(--gradient-primary-alt);box-shadow:var(--shadow-2xl);cursor:pointer;transition:transform var(--transition-fast),box-shadow var(--transition-fast);touch-action:manipulation;z-index:var(--z-restart)}.restart-button:active{transform:translateY(1px) scale(.98);box-shadow:var(--shadow-md)}.restart-button:focus-visible{outline:3px solid rgba(16,31,53,.3);outline-offset:3px}.next-panel{position:absolute;top:clamp(var(--space-2xl),4vh,var(--space-5xl));right:clamp(var(--space-2xl),4vw,var(--space-6xl));display:flex;flex-direction:column;gap:var(--space-md);padding:var(--space-lg);border-radius:var(--radius-lg);background:var(--color-background-overlay-strong);box-shadow:0 16px 28px #ff842f2e;border:1px solid var(--color-border-strong);width:clamp(150px,20vw,210px);z-index:var(--z-next-panel)}.next-panel h2{margin:0;font-size:var(--font-size-xl);color:var(--color-primary);text-transform:uppercase;letter-spacing:var(--letter-spacing-tight)}.next-canvas{width:100%;height:auto;aspect-ratio:1 / 1;image-rendering:pixelated;border-radius:var(--radius-xl);box-shadow:inset 0 0 0 2px var(--color-border);background:#ffc69859;margin:0 auto}.next-label{margin:0;font-weight:var(--font-weight-semibold);text-align:center;color:var(--color-text-primary);text-transform:uppercase;letter-spacing:var(--letter-spacing-wider)}@media (max-width: 860px){body{padding:0}#app{padding:var(--space-md);padding-top:var(--space-10xl)}.game-wrapper{grid-template-columns:1fr;grid-auto-rows:auto;height:auto;width:100%;padding:var(--space-2xl)}.board-wrapper{justify-self:center}.next-panel{align-self:center;width:var(--max-width-next-panel)}.button-row{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width: 640px){body{padding:0;align-items:flex-start;justify-content:flex-start}#app{padding:0;align-items:stretch;justify-content:flex-start}.game-wrapper{display:block;background:var(--gradient-mobile);box-shadow:none;padding:0;position:relative}.hud{display:block;background:transparent;padding:0;box-shadow:none;position:relative}.hud>:not(.button-row):not(.restart-button){display:none}.restart-button{top:var(--space-md);left:var(--space-md);font-size:var(--font-size-sm);padding:10px 18px;border-radius:var(--radius-xl)}.board-wrapper{padding:10px;background:#fffffff5;border-radius:var(--radius-2xl);box-shadow:none;filter:drop-shadow(var(--shadow-4xl));margin:0 auto;transform-origin:top center;position:absolute;top:var(--space-6xl);left:50%;width:var(--max-width-board);max-width:calc(100% - 32px);transform:translate(-50%) scale(.72);overflow:hidden}.board-wrapper canvas{width:100%;max-width:var(--max-width-board-canvas);height:auto}.next-panel{position:fixed;top:var(--space-md);right:var(--space-md);width:var(--max-width-next-panel-mobile);padding:var(--space-sm) 10px;border-radius:var(--radius-sm);z-index:var(--z-next-panel-mobile)}.next-panel h2{font-size:var(--font-size-xs)}.next-canvas{width:100%}.next-label{font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-wide)}.button-row{position:fixed;left:50%;bottom:max(var(--space-xl),env(safe-area-inset-bottom));transform:translate(-50%);width:calc(100% - var(--space-2xl));max-width:var(--max-width-controls);display:flex;justify-content:space-between;gap:10px;padding:14px var(--space-lg);border-radius:var(--radius-3xl);box-shadow:var(--shadow-3xl);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:var(--color-background-overlay-strong);border:1px solid var(--color-border);z-index:var(--z-controls)}.control{padding:0;background:transparent;border:none;box-shadow:none;flex:1}.control-label{display:none}.control button{font-size:2rem;padding:10px 0;border-radius:var(--radius-xl);width:100%;height:var(--space-6xl);display:flex;align-items:center;justify-content:center}.control-left,.control-right,.control-down,.control-rotate{flex:1}}@media (max-width: 640px) and (orientation: landscape){.button-row{bottom:max(var(--space-sm),env(safe-area-inset-bottom));padding:10px var(--space-md);border-radius:var(--radius-xl)}.control button{font-size:1.8rem;padding:var(--space-sm) 0;height:var(--space-5xl)}}