.eye-main{max-width:1100px;margin:0 auto;padding:0 16px 60px}
.eye-language{display:flex;gap:10px 22px;flex-wrap:wrap;margin:6px 0;font-size:13px}
.eye-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}
.eye-heading h1{font-size:clamp(1.45rem,3vw,2rem);margin:10px 0}
.eye-layout{display:grid;grid-template-columns:minmax(0,1fr) clamp(190px,30%,300px);gap:40px;align-items:start}
.eye-play{box-sizing:border-box;min-width:0;width:100%;padding:14px 18px;border:1px solid #d6dfd2;border-radius:18px;background:#fafaf5}
.eye-stats{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:0 0 10px;font:14px/1.3 system-ui,sans-serif;color:#586d5d;font-variant-numeric:tabular-nums}
.eye-stats strong,.eye-stats span{white-space:nowrap}.eye-stats strong{color:#263d34;font-size:16px}
#eye-board{box-sizing:border-box;display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));width:min(100%,480px,max(220px,calc((100svh - 390px)*var(--cols)/var(--rows))));margin:0 auto;gap:2px;outline:none;touch-action:manipulation}
#eye-board:focus-visible{outline:3px solid #497359;outline-offset:4px}
.eye-cell{position:relative;display:grid;place-items:center;aspect-ratio:1;min-width:0;padding:0;background:#f5f1e8;border:1px solid #aca69a;border-radius:4px;font-size:clamp(20px,5vw,37px);line-height:1}
.eye-cell.blank{background:transparent;border:0}.eye-cell.color-a{color:#1765aa}.eye-cell.color-b{color:#b32631}.eye-cell.color-c{color:#a26b00}.eye-cell.color-d{color:#16804c}.eye-cell.color-e{color:#8b3aaa}
.eye-cell.goal:before{content:attr(data-goal);position:absolute;bottom:2px;z-index:1;font:bold clamp(7px,1.5vw,10px) sans-serif;color:#202020;background:#fff;border:1px solid #444;border-radius:3px;padding:1px}
.eye-player{position:absolute;inset:5%;border:2px solid #202020;border-radius:50%;background:transparent;display:flex;align-items:flex-start;justify-content:center;color:#111;font:bold clamp(10px,2.4vw,16px)/1 sans-serif;text-shadow:0 0 3px #fff,0 0 3px #fff;transform-origin:center;pointer-events:none}
.eye-player.right{transform:rotate(90deg)}.eye-player.down{transform:rotate(180deg)}.eye-player.left{transform:rotate(-90deg)}#eye-board:focus-visible .cursor{outline:3px solid #242424;outline-offset:-3px;z-index:2}
#eye-status{box-sizing:border-box;min-height:40px;margin:8px 0;padding:7px 10px;border-radius:8px;background:#eaf0e4;color:#2c513f;text-align:center;font:13px/1.4 system-ui,sans-serif;display:grid;place-items:center}
.eye-buttons{display:flex;justify-content:center;gap:6px;flex-wrap:wrap}.eye-buttons button,.eye-buttons a{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:6px 12px;border:1px solid #becdbb;border-radius:9px;background:#fffef8;color:#2c513f;font:13px system-ui,sans-serif;text-decoration:none;cursor:pointer}.eye-buttons button:hover:not(:disabled),.eye-buttons a:hover{background:#e8efdf;border-color:#739367}.eye-buttons button:disabled{opacity:.45;cursor:default}
.eye-play>.eye-small{text-align:center;font:12px/1.5 system-ui,sans-serif;color:#6e7c6d;margin:7px 0 0}.eye-layout aside details{margin:14px 0}.eye-layout summary{cursor:pointer;font-weight:600}
.eye-catalog{margin-top:30px;scroll-margin-top:24px}.eye-catalog-heading{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px 16px}.eye-catalog-heading h2{font-size:24px;line-height:1.25;font-weight:500;margin:0}.eye-catalog-heading>span,.eye-catalog-status,.eye-catalog-legend{font:13px/1.5 system-ui,sans-serif;color:#62715e}.eye-filters{display:flex;align-items:center;margin:12px 0 6px}.eye-filters label{display:flex;align-items:center;gap:6px;font-size:13px;min-height:44px}.eye-filters input{width:17px;height:17px;accent-color:#315f52}.eye-catalog-status{min-height:1.5em;margin:6px 0 10px}
.eye-levels{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:7px}.eye-level{position:relative;display:flex;justify-content:center;align-items:center;min-width:0;min-height:80px;box-sizing:border-box;padding:9px 3px 7px;border:1px solid #d5decf;border-radius:8px;background:#fcfcf5;color:#36543f;text-align:center;text-decoration:none}.eye-level:hover{background:#edf1e6}.eye-level[aria-current=true]{border-color:#497359;box-shadow:inset 0 0 0 1px #497359}.eye-level.complete{background:#e3eddc}.eye-level-number{font:600 20px/1.3 system-ui,sans-serif}.eye-level-result{position:absolute;right:6px;top:4px;font:13px system-ui,sans-serif}.eye-catalog-legend{margin:8px 0;font-size:12px}
#eye-win-dialog{max-width:min(90vw,420px);border:0;border-radius:12px;padding:22px;box-shadow:0 12px 55px #221a2980}#eye-win-dialog::backdrop{background:#20172988}#eye-win-dialog h2{margin-top:0}#eye-win-dialog .eye-buttons{justify-content:flex-start}[hidden]{display:none!important}
@media(max-width:800px){.eye-page .header{padding:6px 0;gap:4px}.eye-page .brand small{display:none}.eye-page .header .nav{flex-wrap:nowrap;overflow-x:auto;max-width:100%;width:100%;gap:14px}.eye-page .header .nav a{flex-shrink:0;font-size:13px}.eye-heading h1{font-size:22px;line-height:1.15}.eye-heading>a{font-size:13px;white-space:nowrap}.eye-layout{gap:24px}.eye-play{padding:10px;border-radius:12px}.eye-levels{grid-template-columns:repeat(5,minmax(0,1fr))}.eye-catalog-heading h2{font-size:22px}.eye-level-number{font-size:18px}}
@media(max-width:600px){.eye-main{padding:0 12px 45px}.eye-layout{display:flex;flex-direction:column;gap:16px}.eye-layout aside{width:100%}}
@media(max-width:360px){.eye-stats{font-size:clamp(11px,3.7vw,13px);gap:5px}.eye-stats strong{font-size:14px}}

.eye-level{flex-direction:column}.eye-level-stars{display:block;min-height:14px;color:#936718;font:12px/14px system-ui,sans-serif;letter-spacing:1px}#eye-win-stars{font-size:2rem;color:#ab7a00;letter-spacing:.12em}