:root{--board-bg: #1b1b2f;--cell-bg: #252542;--cell-border: #3d3d62;--symbol-primary: #6fe7dd;--symbol-secondary: #ff8a65;--symbol-tertiary: #ffd460;--symbol-quaternary: #ce93d8;--player-1: #ff6b6b;--player-2: #4ecdc4;--player-3: #ffe66d;--player-4: #5c7cfa;--arrow-bg: rgba(255, 255, 255, .08);--arrow-accent: #ffffff;--wall-solid: #ff5c8d;--wall-circle: #4ecdc4;--wall-square: #ffe66d;--wall-magic: #9f7aea;--wall-collapsed: rgba(255, 255, 255, .35);font-size:16px}*{box-sizing:border-box}body{margin:0;min-height:100vh;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at top,#2a2a4f,#141422 70%);color:#f5f5f9;font-family:Segoe UI,system-ui,sans-serif}.game{width:min(95vw,980px);display:grid;gap:1.5rem;justify-items:center;text-align:center}.game__result{width:100%;padding:.85rem 1.1rem;border-radius:1rem;background:linear-gradient(120deg,#5eead42e,#ffe66d2e);border:1px solid rgba(255,255,255,.16);box-shadow:0 1.2rem 2rem #00000059;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-weight:700;letter-spacing:.01em;color:#fefefe;display:none;align-items:center;justify-content:center;gap:.5rem}.game__result[hidden]{display:none}.game__result[data-winner=players]{background:linear-gradient(120deg,#5eead440,#ffe66d52);border-color:#ffe66d99}.game__result[data-winner=ghost]{background:linear-gradient(120deg,#9f7aea38,#5eead433);border-color:#9f7aea99}.game__result:before{content:"★";font-size:1.2rem;opacity:.9}.game__title{margin:0;font-size:clamp(1.5rem,3vw,2.5rem);letter-spacing:.04em;text-transform:uppercase}.game__layout{width:100%;display:grid;grid-template-columns:minmax(200px,.9fr) 2fr;gap:1rem;align-items:start}.game__board-area{display:grid;gap:1rem;justify-items:center}.hints{width:100%;padding:.85rem 1rem;border-radius:1rem;background:linear-gradient(145deg,#343255d9,#23233ccc);border:1px solid rgba(255,255,255,.12);box-shadow:0 1.1rem 1.8rem #00000059;text-align:left;max-height:70vh;overflow:auto}.hints__title{margin:0 0 .5rem;font-size:1.05rem;letter-spacing:.02em}.hints__empty{margin:.35rem 0 0;color:#f5f5f9b3;font-size:.95rem}.hints__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.4rem}.hints__item{position:relative;margin:0;padding:.45rem .6rem .45rem 2.2rem;border-radius:.75rem;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);font-size:.95rem;line-height:1.35}.hints__item:before{content:"";position:absolute;left:.65rem;top:50%;transform:translateY(-50%);width:1.05rem;height:1.05rem;border-radius:.35rem;background:#fff3;box-shadow:0 .35rem .65rem #00000040}.hints__item--new{border-color:#ffe66de6;box-shadow:0 .3rem .8rem #ffe66d59,inset 0 0 0 1px #ffe66d40}.hints__item[data-symbol=circle]:before{background:var(--symbol-primary);border-radius:50%}.hints__item[data-symbol=square]:before{background:var(--symbol-quaternary);border-radius:.2rem}.hints__item[data-symbol=triangle]:before{background:var(--symbol-tertiary);clip-path:polygon(50% 0%,0% 100%,100% 100%);border-radius:0}.hints__item[data-symbol=diamond]:before{background:var(--symbol-secondary);transform:translateY(-50%) rotate(45deg) scale(.9);border-radius:.2rem}.hints__item[data-symbol=chevron]:before{background:linear-gradient(135deg,#96fbc4,#f9f586);clip-path:polygon(0% 35%,50% 0%,100% 35%,100% 65%,50% 100%,0% 65%);border-radius:0}.hints__item[data-symbol=ring]:before{background:transparent;border:3px solid rgba(255,255,255,.9);border-radius:50%;box-shadow:0 .35rem .65rem #00000040,inset 0 0 .35rem #0003}.hints__item[data-symbol=cross]:before{background:linear-gradient(180deg,#ffffffa6,#5b84ffd9) center/28% 100% no-repeat,linear-gradient(90deg,#ffffffa6,#5b84ffd9) center/100% 28% no-repeat;border-radius:.2rem}.hints__item[data-symbol=petal]:before{background:radial-gradient(circle at 30% 30%,#ffb5e8 35%,#ff78c4),radial-gradient(circle at 70% 70%,#ffb5e8 35%,#ff78c4),radial-gradient(circle at center,#a0f1ff,#3ab1ff 70%);border-radius:50%;clip-path:ellipse(70% 50% at 50% 50%)}.hints__item:not(:last-child){margin-bottom:.15rem}.board{width:100%;position:relative}.board__grid{position:relative;display:grid;gap:0;grid-template-columns:repeat(4,1fr);padding:0;border-radius:.5rem;box-shadow:0 1.25rem 2.5rem #08081447;background-image:url(/material/Board.png);background-position:center;background-repeat:no-repeat;background-size:100% 100%;overflow:hidden}.magic-counter{width:100%;display:inline-flex;align-items:center;gap:.35rem;padding:.6rem .9rem;margin-bottom:.5rem;border-radius:.75rem;background:linear-gradient(135deg,#9f7aea1f,#ffe66d1f);border:1px solid rgba(255,255,255,.18);box-shadow:0 .8rem 1.4rem #00000059;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);font-weight:600;letter-spacing:.01em;color:#f7f6ff}.magic-counter:before{content:"";display:inline-block;width:.85rem;height:.85rem;border-radius:.35rem;background:linear-gradient(135deg,#9f7aea73,#ffe66dd9);box-shadow:inset 0 -.25rem .35rem #00000038;vertical-align:middle}.magic-counter[data-ready=true]{border-color:#ffe66db3;box-shadow:0 .9rem 1.6rem #ffe66d59}@media(max-width:720px){.game__layout{gap:.75rem}}@media(max-width:820px){.game__layout{grid-template-columns:1fr}.hints{order:2}.game__board-area{order:1}}.cell{position:relative;aspect-ratio:1 / 1;border-radius:0;display:flex;align-items:center;justify-content:center;overflow:visible;background:transparent;border:none;background-size:cover;background-position:center;background-repeat:no-repeat}.cell:after{content:none}.symbol{display:none}.player{position:absolute;top:50%;left:50%;--offset-x: 0%;--offset-y: 0%;transform:translate(calc(-50% + var(--offset-x)),calc(-50% + var(--offset-y)));width:30%;height:30%;border-radius:.75rem;display:flex;align-items:center;justify-content:center;font-weight:600;letter-spacing:.05em;box-shadow:0 .7rem 1.4rem #00000059;z-index:1;background-color:transparent;background-repeat:no-repeat;background-position:center;background-size:contain}.player__badge{font-size:clamp(.85rem,2.2vw,1.2rem);background:#0000008c;color:#fff;padding:.15rem .45rem;border-radius:999px}.player--1{background-image:url(/material/player_red.png);--offset-x: -24%;--offset-y: -24%}.player--2{background-image:url(/material/player_green.png);--offset-x: 24%;--offset-y: -24%}.player--3{background-image:url(/material/player_yellow.png);--offset-x: -24%;--offset-y: 24%}.player--4{background-image:url(/material/player_blue.png);--offset-x: 24%;--offset-y: 24%}.player--active{z-index:10}.player--circle,.player--square{border-radius:.75rem}.player__controls{position:absolute;inset:-.4rem;display:none;pointer-events:none}.player--active .player__controls{display:block}.ghost{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:48%;height:48%;background-image:url(/material/player_ghost.png);background-size:contain;background-repeat:no-repeat;background-position:center;pointer-events:none;z-index:5;transition:opacity .2s ease,visibility .2s ease}.ghost[data-visible=false]{opacity:0;visibility:hidden}.control{position:absolute;width:2.2rem;height:2.2rem;border:none;border-radius:.65rem;background:var(--arrow-bg);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);cursor:pointer;pointer-events:auto;--offset-x: 0;--offset-y: 0;transform:translate(var(--offset-x),var(--offset-y));transition:transform .2s ease,background .2s ease,box-shadow .2s ease}.control:before{content:"";position:absolute;inset:30% 25%;background:var(--arrow-accent);clip-path:polygon(50% 0%,0% 100%,100% 100%)}.control:focus-visible,.control:hover{background:#ffffff2e;box-shadow:0 .5rem .9rem #00000040;transform:translate(var(--offset-x),var(--offset-y)) scale(1.05)}.control--up{top:-50%;left:50%;--offset-x: -50%;--offset-y: 0}.control--up:before{transform:rotate(0)}.control--right{top:50%;right:-50%;--offset-x: 0;--offset-y: -50%}.control--right:before{transform:rotate(90deg)}.control--down{bottom:-50%;left:50%;--offset-x: -50%;--offset-y: 0}.control--down:before{transform:rotate(180deg)}.control--left{top:50%;left:-50%;--offset-x: 0;--offset-y: -50%}.control--left:before{transform:rotate(270deg)}.control[hidden]{display:none}.legend{max-width:38ch;font-size:.95rem;line-height:1.5;color:#f5f5f9cc}.legend__walls{margin:1rem 0 0;padding:0;list-style:none;display:grid;gap:.4rem;font-size:.92rem}.legend__item{padding-left:1.6rem;position:relative}.legend__item:before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:1rem;height:.45rem;border-radius:.25rem}.legend__item--solid:before{background:linear-gradient(135deg,var(--wall-solid),#ff3f6c)}.legend__item--circle:before{background:linear-gradient(135deg,rgba(78,205,196,.2),var(--wall-circle));border:2px dashed rgba(78,205,196,.75)}.legend__item--square:before{background:linear-gradient(135deg,rgba(255,230,109,.25),var(--wall-square));border:2px dashed rgba(255,230,109,.8)}.legend__item--magic:before{background:linear-gradient(135deg,rgba(159,122,234,.25),var(--wall-magic));border:2px solid rgba(159,122,234,.65)}.legend__item--collapsed:before{background:linear-gradient(135deg,transparent,var(--wall-collapsed));border:1px dotted rgba(255,255,255,.4)}.board__actions{width:100%;display:flex;justify-content:flex-end;align-items:center;gap:.65rem;flex-wrap:wrap}.board__debug-toggle,.board__standstill,.board__hint,.board__reset{background:#ffffff1a;color:#f5f5f9;border:1px solid rgba(255,255,255,.25);border-radius:.75rem;padding:.5rem 1.2rem;font:inherit;cursor:pointer;transition:background .2s ease,transform .2s ease,border .2s ease}.board__debug-toggle:hover,.board__debug-toggle:focus-visible,.board__standstill:hover,.board__standstill:focus-visible,.board__hint:hover,.board__hint:focus-visible,.board__reset:hover,.board__reset:focus-visible{background:#ffffff2e;border-color:#fff6;transform:translateY(-1px)}.board__debug-toggle[data-active=true]{background:#9f7aea47;border-color:#9f7aea99}.board__standstill{background:#5eead429;border-color:#5eead499}.board__hint{background:#ffc66d2e;border-color:#ffc66dbf}.board__reset{background:#ff6f6f2e;border-color:#ff6f6fb3}.board__standstill[hidden]{display:none}.wall{position:absolute;pointer-events:none;opacity:0;transition:opacity .25s ease,box-shadow .25s ease;border-radius:.5rem;filter:drop-shadow(0 .35rem .6rem rgba(8,8,20,.35));z-index:5}.wall:after{content:"";position:absolute;inset:0;border-radius:inherit}.wall[data-visible=true],.board[data-debug=true] .wall{opacity:1}.wall--east,.wall--west{top:12%;bottom:12%;width:14%}.wall--east{right:-7%}.wall--west{left:-7%}.wall--south,.wall--north{left:12%;right:12%;height:14%}.wall--south{bottom:-7%}.wall--north{top:-7%}.wall[data-wall-type=solid]:after{background:linear-gradient(135deg,var(--wall-solid),#ff3f6c)}.wall[data-wall-type=circle]:after{background:linear-gradient(135deg,rgba(78,205,196,.2),var(--wall-circle));border:2px dashed rgba(78,205,196,.75)}.wall[data-wall-type=square]:after{background:linear-gradient(135deg,rgba(255,230,109,.25),var(--wall-square));border:2px dashed rgba(255,230,109,.8)}.wall[data-wall-type=magic]:after{background:linear-gradient(135deg,rgba(159,122,234,.25),var(--wall-magic));border:2px solid rgba(159,122,234,.65);box-shadow:0 0 .6rem #9f7aea80}.wall[data-wall-type=collapsed]:after{background:linear-gradient(135deg,transparent,var(--wall-collapsed));border:1px dotted rgba(255,255,255,.4)}