:root{--surface: 40 60% 92%;--foreground: 222 20% 25%;--muted: 222 14% 37%;--primary: 222 20% 37%;--primary-soft: 222 20% 31%;--accent: 143 24% 72%;--board-light: 40 60% 92%;--board-dark: 171 21% 56%;--board-frame: 222 20% 37%;--board-line: 160 18% 75%;--selected: 42 45% 66%;--selected-cell: var(--selected);--available: 143 24% 72%;--capture: 8 41% 61%;--ring: 42 45% 53%;--ease-out: cubic-bezier(.23, 1, .32, 1);font-family:Trebuchet MS,Segoe UI,sans-serif;color:hsl(var(--foreground));font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}html,body,#app{width:100%;height:100%;height:100dvh;min-height:100%;margin:0;overflow:hidden;overscroll-behavior:none}body{min-width:0;height:100%;min-height:100dvh;overflow:hidden;background:#b0c7b9}button{font:inherit;touch-action:manipulation;-webkit-tap-highlight-color:transparent}button:focus-visible{outline:3px solid hsl(var(--ring));outline-offset:2px;z-index:30}h2,p{margin:0}h2{font-family:Georgia,Times New Roman,serif;text-wrap:balance}p{text-wrap:pretty}.game-shell{--safe-area-top: env(safe-area-inset-top, 0px);--safe-area-right: env(safe-area-inset-right, 0px);--safe-area-bottom: env(safe-area-inset-bottom, 0px);--safe-area-left: env(safe-area-inset-left, 0px);position:relative;display:block;width:100%;min-width:0;min-height:0;height:100dvh;padding:0;overflow:hidden;isolation:isolate;overscroll-behavior:none;touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;background-color:#b0c7b9;background-image:var(--room-background);background-position:var(--room-background-x, center) var(--room-background-y, center);background-repeat:no-repeat;background-size:var(--room-background-width, cover) var(--room-background-height, auto)}.board-slot{position:absolute;left:var(--scene-board-left, 25%);top:var(--scene-board-top, 10%);z-index:1;display:grid;width:var(--scene-board-width, var(--scene-board-size, 50vmin));height:var(--scene-board-height, var(--scene-board-size, 50vmin));min-width:0;min-height:0;place-items:center;pointer-events:auto}.board{position:relative;display:grid;width:var(--scene-board-width, var(--scene-board-size, 100%));height:var(--scene-board-height, var(--scene-board-size, 100%));max-width:100%;max-height:100%;aspect-ratio:1 / 1;grid-template-columns:repeat(8,minmax(0,1fr));grid-template-rows:repeat(8,minmax(0,1fr));overflow:hidden;border-radius:0;background:hsl(var(--board-frame));box-shadow:inset 0 0 0 1px hsl(var(--board-frame) / .28);touch-action:none}.cell{position:relative;display:grid;min-width:0;min-height:0;padding:0;place-items:center;border:0;cursor:default}.cell--light{background:#f4f0e4}.cell--dark{background:#7f9f99;cursor:pointer}.cell--dark:disabled{cursor:default}.cell--selectable:after{content:"";position:absolute;z-index:1;width:14%;aspect-ratio:1;right:8%;top:8%;border:1px solid hsl(var(--board-line) / .9);border-radius:50%;background:hsl(var(--available) / .86);box-shadow:0 1px 3px #333b4d2e}.board--capture-required .cell--selectable:after{background:hsl(var(--capture) / .86)}.cell--selected{background:#d8be7a;border-radius:clamp(6px,1.2cqi,12px);box-shadow:inset 0 0 0 clamp(3px,.6cqi,6px) hsl(var(--board-frame) / .8)}.cell--destination:before{content:"";position:absolute;z-index:0;width:28%;aspect-ratio:1;border:1px solid hsl(var(--board-line));border-radius:50%;background:hsl(var(--available) / .72);box-shadow:0 0 0 3px hsl(var(--surface) / .35)}.board--capture-required .cell--destination:before{background:hsl(var(--capture) / .72)}.piece{position:relative;z-index:2;display:block;width:100%;height:100%;min-width:0;min-height:0;max-width:100%;max-height:100%;pointer-events:none;transform-origin:center;transition:filter .14s var(--ease-out),transform .14s var(--ease-out)}.piece__image{display:block;width:100%;height:100%;object-fit:contain;object-position:center;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}.piece--black .piece__image{filter:drop-shadow(0 2px 2px hsl(43 55% 38% / .45))}.cell--selected .piece{filter:drop-shadow(0 5px 8px hsl(42 73% 58% / .72));transform:translateY(-4px) scale(1.03)}.piece--moving{z-index:100;margin:0;will-change:transform}.is-animating .board{cursor:progress}.victory-particles{position:absolute;top:0;right:0;bottom:0;left:0;z-index:5;overflow:hidden;border-radius:inherit;pointer-events:none}.victory-particle{position:absolute;top:50%;left:50%;width:clamp(7px,1.3vw,12px);aspect-ratio:1;border-radius:50%;background:#fbc02d;box-shadow:0 0 12px #fbc02de0}.game-header,.side-panel{position:relative;z-index:20;min-width:0;min-height:0}.game-header{position:absolute;top:max(12px,var(--safe-area-top));left:max(12px,var(--safe-area-left));display:flex;align-items:flex-start;justify-content:flex-start}.header-actions{display:flex;width:auto;flex:0 0 auto;flex-direction:row;align-items:center;gap:8px}.restart-button,.settings-button{min-height:44px;width:auto;padding:0 18px;color:#f4f0e4;background:hsl(var(--board-frame));border:0;border-radius:999px;font-weight:700;cursor:pointer;box-shadow:0 2px 4px #333b4d29,0 7px 16px #333b4d24;transition:transform .12s var(--ease-out),background-color .12s var(--ease-out)}.settings-button,.tutorial-button{min-height:44px;padding:0 14px;color:hsl(var(--board-frame));background:hsl(var(--surface) / .92);border:1px solid hsl(var(--board-frame) / .18);border-radius:999px;font-size:.86rem;font-weight:700;cursor:pointer;box-shadow:0 2px 6px #333b4d1a;transition:transform .12s var(--ease-out),background-color .12s var(--ease-out)}.restart-button:active,.settings-button:active,.tutorial-button:active{transform:scale(.97)}.tutorial-card{position:relative;z-index:1;width:100%;min-width:0;padding:14px 16px;color:hsl(var(--foreground));background:#f7efdef0;border-radius:18px;box-shadow:0 2px 5px #333b4d1f,0 12px 26px #333b4d29;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);overflow-wrap:anywhere}.tutorial-card__eyebrow{display:block;margin-bottom:4px;color:hsl(var(--muted));font-size:.64rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase}.tutorial-card strong{display:block;font-family:Georgia,Times New Roman,serif;font-size:1.08rem;line-height:1.1}.tutorial-card p{margin-top:5px;color:hsl(var(--muted));font-size:.82rem;line-height:1.35}.tutorial-card__actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.tutorial-button--primary{color:#f4f0e4;background:hsl(var(--board-frame));border-color:hsl(var(--board-frame))}.tutorial-card--complete .tutorial-button{margin-top:12px}.cell--tutorial-source{box-shadow:inset 0 0 0 clamp(3px,.7cqi,7px) #e6b333f2}.cell--tutorial-target:after{content:"";position:absolute;z-index:3;top:10%;right:10%;bottom:10%;left:10%;border:clamp(2px,.5cqi,4px) solid hsl(43 78% 55% / .95);border-radius:18%;box-shadow:0 0 0 3px #f7efde80,0 0 12px #e6b3339e;pointer-events:none}.side-panel{position:absolute;left:var(--scene-panel-left, 72%);top:var(--scene-panel-top, 20%);width:var(--scene-panel-width, 220px);max-height:calc(100dvh - var(--scene-panel-top, 20%) - 12px);display:flex;flex-direction:column;gap:clamp(4px,1.2dvh,12px);align-self:center;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}.status-card,.score{background:#f7efdee6;box-shadow:0 2px 4px #333b4d1a,0 9px 24px #333b4d1f;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.status-card{display:flex;align-items:center;gap:12px;min-height:82px;padding:16px;border-radius:18px}.status-card--winner{box-shadow:inset 0 0 0 2px hsl(var(--selected)),0 9px 24px #333b4d24}.status-dot{flex:0 0 auto;width:30px;height:30px;object-fit:contain;object-position:center}.status-label{display:block;margin-bottom:3px;color:hsl(var(--muted));font-size:.65rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.status-card strong{display:block;font-family:Georgia,Times New Roman,serif;font-size:1.08rem;line-height:1.15}.score{padding:6px;border-radius:18px}.score-item{display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:10px;min-height:44px;padding:6px 10px}.score-item+.score-item{border-top:1px solid hsl(var(--board-frame) / .12)}.score-item strong{font-variant-numeric:tabular-nums}.mini-piece{width:24px;height:24px;object-fit:contain;object-position:center}.new-game-backdrop{position:absolute;z-index:100;top:0;right:0;bottom:0;left:0;display:grid;padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));place-items:center;background:#252a376b;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);overscroll-behavior:contain;touch-action:pan-y}.new-game-dialog{position:relative;width:min(560px,100%);padding:28px;border-radius:28px;color:hsl(var(--foreground));background:hsl(var(--surface) / .97);box-shadow:0 4px 10px #252a3729,0 24px 64px #252a3747;animation:new-game-dialog-in .22s var(--ease-out) both;max-height:calc(100dvh - max(16px,env(safe-area-inset-top)) - max(16px,env(safe-area-inset-bottom)));overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch}.new-game-dialog__close{position:absolute;top:12px;right:12px;width:44px;height:44px;padding:0;color:hsl(var(--muted));background:transparent;border:0;border-radius:50%;font-size:1.7rem;line-height:1;cursor:pointer}.new-game-dialog__back{min-height:44px;margin:-8px 0 10px;padding:0 10px;color:hsl(var(--muted));background:transparent;border:0;border-radius:999px;font-size:.82rem;font-weight:700;cursor:pointer}.new-game-dialog__eyebrow{display:block;margin-bottom:6px;color:hsl(var(--muted));font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}.new-game-dialog h2{max-width:calc(100% - 40px);margin:0;font-size:clamp(1.65rem,5vw,2.35rem);line-height:1.08}.new-game-dialog>p{margin-top:8px;color:hsl(var(--muted))}.side-choices,.mode-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:24px}.side-choice,.mode-choice{display:grid;min-width:0;min-height:190px;padding:16px 12px;place-items:center;align-content:center;color:hsl(var(--foreground));background:#f9f6f0db;border:1px solid hsl(var(--board-frame) / .14);border-radius:20px;cursor:pointer;box-shadow:0 2px 6px #333b4d14;transition:transform .14s var(--ease-out),box-shadow .14s var(--ease-out),background-color .14s var(--ease-out)}.side-choice img{display:block;width:min(112px,36vw);height:min(112px,36vw);object-fit:contain;object-position:center;-webkit-user-select:none;user-select:none}.side-choice>span,.mode-choice>span:not(.mode-choice__cats){margin-top:8px;font-family:Georgia,Times New Roman,serif;font-size:1.35rem;font-weight:700}.side-choice small,.mode-choice small{margin-top:3px;color:hsl(var(--muted));font-size:.75rem}.side-choice:active,.mode-choice:active{transform:scale(.97)}.mode-choice__cats{position:relative;display:block;width:128px;height:96px}.mode-choice__cats img{position:absolute;top:0;width:88px;height:88px;object-fit:contain}.mode-choice__cats img:first-child{left:0}.mode-choice__cats img:last-child{right:0}.mode-choice__cats--pair img:first-child{transform:rotate(-6deg)}.mode-choice__cats--pair img:last-child{transform:rotate(6deg)}.settings-dialog{width:min(620px,100%);max-height:min(760px,calc(100dvh - 32px));overflow-y:auto}.settings-fields{display:grid;gap:14px;margin-top:24px}.range-setting{display:grid;grid-template-columns:84px minmax(100px,1fr) 48px;align-items:center;gap:12px;min-height:44px}.range-setting span,.language-setting span,.difficulty-setting legend{font-weight:700}.range-setting input{width:100%;accent-color:hsl(var(--board-frame))}.range-setting output{font-variant-numeric:tabular-nums;text-align:right}.language-setting{display:grid;grid-template-columns:84px minmax(0,1fr);align-items:center;gap:12px}.language-setting select{min-height:44px;padding:0 12px;color:hsl(var(--foreground));background:#f9f6f0;border:1px solid hsl(var(--board-frame) / .22);border-radius:12px;font:inherit}.difficulty-setting{min-width:0;margin:4px 0 0;padding:0;border:0}.difficulty-setting legend{margin-bottom:10px}.difficulty-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.difficulty-option{position:relative;display:grid;grid-template-columns:20px minmax(0,1fr);align-items:center;gap:8px;min-height:52px;padding:10px;color:hsl(var(--foreground));background:hsl(var(--surface) / .62);border:1px solid hsl(var(--board-frame) / .16);border-radius:14px;cursor:pointer;transition:background-color .14s var(--ease-out),border-color .14s var(--ease-out),box-shadow .14s var(--ease-out),transform .14s var(--ease-out)}.difficulty-option:has(input:checked){background:hsl(var(--selected-cell) / .48);border-color:hsl(var(--board-frame) / .5);box-shadow:0 3px 10px hsl(var(--board-frame) / .12)}.difficulty-option:active{transform:scale(.98)}.difficulty-option input{width:18px;height:18px;margin:0;accent-color:hsl(var(--board-frame))}.difficulty-option:has(input:focus-visible){outline:3px solid hsl(var(--selected-cell));outline-offset:2px}.difficulty-option__copy{min-width:0}.difficulty-option__copy strong{font-size:.9rem}.statistics-card{margin-top:22px;padding:16px;background:hsl(var(--board-line) / .22);border-radius:16px}.statistics-card>strong{font-family:Georgia,Times New Roman,serif;font-size:1.08rem}.statistics-card dl{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:12px 0 0}.statistics-card dl div{padding:10px;text-align:center;background:hsl(var(--surface) / .72);border-radius:12px}.statistics-card dt{color:hsl(var(--muted));font-size:.74rem}.statistics-card dd{margin:3px 0 0;font-family:Georgia,Times New Roman,serif;font-size:1.4rem;font-weight:700;font-variant-numeric:tabular-nums}.settings-how-to{width:100%;min-height:46px;margin-top:16px;color:#f4f0e4;background:hsl(var(--board-frame));border:0;border-radius:999px;font-weight:700;cursor:pointer}@keyframes new-game-dialog-in{0%{opacity:0;transform:scale(.96) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}}@media (hover: hover) and (pointer: fine){.restart-button:hover{background:#3f495f}.settings-button:hover,.tutorial-button:hover{background:#f3e7cefa}.difficulty-option:hover{border-color:hsl(var(--board-frame) / .36);background:hsl(var(--surface) / .86)}.difficulty-option:has(input:checked):hover{background:hsl(var(--selected-cell) / .56)}.tutorial-button--primary:hover{background:#3f495f}.cell--dark:not(:disabled):not(.cell--selected):hover .piece{transform:translateY(-2px)}.side-choice:hover,.mode-choice:hover{background:#fdfbf7fa;box-shadow:0 4px 10px #333b4d1a,0 14px 28px #333b4d21;transform:translateY(-3px)}.new-game-dialog__close:hover{background:hsl(var(--board-frame) / .08)}}@media (max-width: 800px),(max-height: 500px){.game-shell{display:grid;inline-size:100%;min-inline-size:0;padding:max(6px,var(--safe-area-top)) max(6px,var(--safe-area-right)) max(6px,var(--safe-area-bottom)) max(6px,var(--safe-area-left));background-position:var(--room-background-x, center) var(--room-background-y, center);background-size:var(--room-background-width, auto) var(--room-background-height, 100%)}.game-header,.board-slot,.side-panel{position:relative;inset:auto;min-width:0;transform:none}.game-header{grid-area:controls;width:100%}.header-actions{width:100%}.restart-button,.settings-button{min-width:0;min-height:44px;padding:0 10px;font-size:clamp(.68rem,3vw,.84rem);white-space:nowrap}.board-slot{grid-area:board;display:grid;width:100%;height:100%;min-width:0;place-items:center}.board{width:min(var(--scene-board-size, 100%),100%);height:min(var(--scene-board-size, 100%),100%);max-inline-size:100%;margin-inline:auto;aspect-ratio:1 / 1}.side-panel{grid-area:panel;width:100%;gap:6px}.status-card{min-width:0;min-height:60px;padding:8px 10px;gap:8px;border-radius:14px}.status-dot{width:24px;height:24px}.status-label{font-size:.56rem}.status-card strong{overflow-wrap:anywhere;font-size:clamp(.78rem,3.1vw,.96rem);line-height:1.08}.score{padding:3px;border-radius:14px}.score-item{grid-template-columns:20px minmax(0,1fr) auto;gap:4px;min-height:44px;padding:4px 5px;font-size:clamp(.68rem,2.8vw,.82rem)}.mini-piece{width:20px;height:20px}.new-game-backdrop{padding:max(6px,env(safe-area-inset-top)) max(6px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left))}.new-game-dialog{max-height:100%}}@media (max-width: 800px),(max-height: 500px){.game-shell{grid-template-areas:"controls board panel";grid-template-columns:var(--scene-side-track-size, 116px) var(--scene-board-size, 304px) var(--scene-side-track-size, 116px);grid-template-rows:var(--scene-board-size, 304px);align-content:center;justify-content:center}.game-header{width:100%;align-self:start;justify-self:start}.header-actions{flex-direction:column;align-items:stretch;gap:8px}.tutorial-card{inset:auto;width:100%;max-height:none;padding:clamp(6px,1.8dvh,10px);overflow:visible;transform:none}.tutorial-card p{font-size:.74rem}.tutorial-card__actions{margin-top:8px}.tutorial-button{min-height:44px;padding:0 10px;font-size:.74rem}.side-panel{width:100%;align-self:center;justify-self:end;display:flex;flex-direction:column}.side-choices,.mode-choices{gap:8px;margin-top:12px}.side-choice,.mode-choice{min-height:112px;padding:8px}.side-choice img{width:64px;height:64px}.mode-choice__cats{width:82px;height:58px}.mode-choice__cats img{width:56px;height:56px}.new-game-dialog{padding:14px;border-radius:18px}.new-game-dialog h2{font-size:1.25rem}}@media (max-width: 440px){.game-header{align-items:center}.restart-button,.settings-button{min-height:44px;padding:0 12px;font-size:.72rem}.new-game-dialog{padding:24px 16px 18px;border-radius:22px}.side-choices,.mode-choices{gap:10px;margin-top:18px}.side-choice,.mode-choice{min-height:164px;padding:12px 8px;border-radius:16px}.side-choice img{width:min(94px,29vw);height:min(94px,29vw)}.side-choice span{font-size:1.12rem}.side-choice small{font-size:.68rem}.mode-choice__cats{width:104px;height:78px}.mode-choice__cats img{width:72px;height:72px}.range-setting{grid-template-columns:68px minmax(84px,1fr) 42px;gap:8px}.language-setting{grid-template-columns:68px minmax(0,1fr);gap:8px}.difficulty-options{grid-template-columns:1fr}.difficulty-option{min-height:48px;padding:8px 10px}.statistics-card dl{grid-template-columns:repeat(2,1fr)}}@media (max-height: 430px){.game-shell{gap:var(--scene-gap, 4px)}.header-actions,.side-panel{gap:4px}.restart-button,.settings-button{min-height:44px;padding-inline:6px;font-size:clamp(.64rem,1.8vw,.78rem)}.tutorial-card{padding:6px;border-radius:12px}.tutorial-card__eyebrow{margin-bottom:2px;font-size:.5rem;letter-spacing:.05em}.tutorial-card strong{font-size:clamp(.72rem,2.2vw,.9rem);line-height:1.05}.tutorial-card p{margin-top:3px;font-size:clamp(.62rem,1.8vw,.74rem);line-height:1.2}.tutorial-card__actions{flex-direction:column;gap:4px;margin-top:5px}.tutorial-button{min-height:44px}.status-card{min-height:44px;padding:4px 6px;gap:4px;border-radius:10px}.status-dot{width:18px;height:18px}.status-label{margin-bottom:1px;font-size:.48rem}.status-card strong{font-size:clamp(.68rem,1.8vw,.82rem)}.score{padding:2px;border-radius:10px}.score-item{grid-template-columns:17px minmax(0,1fr) auto;min-height:34px;padding:2px 3px;font-size:clamp(.58rem,1.6vw,.72rem)}.mini-piece{width:17px;height:17px}.new-game-dialog{max-height:calc(100dvh - 12px);padding:12px}.side-choices,.mode-choices{margin-top:8px}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{scroll-behavior:auto!important;transition-duration:.01ms!important}.cell--selected .piece{transform:none}.new-game-dialog{animation-duration:.01ms}}