:root{--bg:#F4EFE2;--bg2:#EAE3D0;--ink:#1F2A24;--mute:#52605A;--green:#2F6B4F;--sticker:#6FA383;--card:#FFFDF7;--line:#D8D0BC;--bad:#D64545;--on-green:#fff}
@media (prefers-color-scheme:dark){:root{--bg:#18211C;--bg2:#1F2B25;--ink:#EFEADB;--mute:#B2BDB5;--green:#8CCBA9;--card:#222E28;--line:#34433B;--on-green:#10241A}}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
img{max-width:100%;height:auto}
a{color:var(--green)}
.wrap{max-width:1080px;margin:0 auto;padding:0 16px}
.narrow{max-width:720px}
.skip{position:absolute;left:-999px;top:0;background:var(--green);color:var(--on-green);padding:8px 12px;z-index:10}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:3px solid var(--green);outline-offset:2px}
.top{position:sticky;top:0;background:var(--bg);border-bottom:1px solid var(--line);z-index:5}
.bar{display:flex;align-items:center;gap:8px 16px;min-height:60px;flex-wrap:wrap;padding-top:6px;padding-bottom:6px}
.brand{display:flex;align-items:center;gap:8px;font-weight:700;font-size:1.15rem;color:var(--ink);text-decoration:none}
.brand img{border-radius:8px}
nav{display:flex;gap:0 16px;flex:1 1 100%;order:3;flex-wrap:wrap}
nav a,.lang{color:var(--ink);text-decoration:none;font-size:.95rem}
nav a{padding:8px 4px}
nav a:hover,.lang:hover{text-decoration:underline}
.lang{border:1px solid var(--line);border-radius:999px;padding:4px 12px}
section{padding:56px 0}
section[id]{scroll-margin-top:72px}
.band{background:var(--bg2)}
h1{font-size:clamp(2rem,6vw,3.2rem);line-height:1.1;margin:.4em 0}
h2{font-size:clamp(1.5rem,4vw,2.1rem);line-height:1.2;margin:0 0 .5em}
h3{font-size:1.1rem;margin:.6em 0 .2em}
.sub,.meta,.small{color:var(--mute)}
.small{font-size:.9rem}
.hero{padding:40px 0 56px}
.hero-grid{display:grid;gap:32px;align-items:center}
.hero-icon{border-radius:22px;box-shadow:0 4px 14px rgba(0,0,0,.15)}
.lead{font-size:1.2rem}
.badge{display:inline-block;background:var(--green);color:var(--on-green);padding:8px 18px;border-radius:999px;font-weight:600;margin:.4em 0}
.hero-art{display:flex;justify-content:center}
.phone{background:#111;padding:8px;border-radius:30px;width:fit-content;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.phone img{display:block;border-radius:22px;width:100%;max-width:270px}
.rules{display:grid;gap:20px;margin-top:24px}
.rule{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:20px;text-align:center}
.rule p{color:var(--mute);margin:0}
.rule-art{display:flex;justify-content:center;margin-bottom:8px}
.board{display:grid;grid-template-columns:repeat(4,var(--cell));gap:2px;background:#1F2A24;padding:2px;border-radius:8px;width:fit-content}
.cell{width:var(--cell);height:var(--cell);display:grid;place-items:center;position:relative}
.cell img{width:70%;height:auto}
.cell.bad{outline:4px solid var(--bad);outline-offset:-4px;z-index:1}
.h-touch{margin-top:2em;font-size:1.4rem}
.touches{list-style:none;padding:0;display:grid;gap:12px}
.touches li{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 18px;display:grid;gap:2px}
.touches strong{color:var(--green)}
.touches span{color:var(--mute)}
.hint-grid{display:grid;gap:28px;align-items:center;justify-items:center}
.feats{list-style:none;padding:0;display:grid;gap:16px;margin-top:24px}
.feats li{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px}
.feats h3{margin-top:0}
.feats p{margin:0;color:var(--mute)}
.table-wrap{overflow-x:auto}
table{border-collapse:collapse;width:100%;background:var(--card);border-radius:12px;overflow:hidden}
th,td{padding:10px 14px;text-align:left;border-bottom:1px solid var(--line)}
th{background:var(--green);color:var(--on-green)}
.shots{display:flex;gap:16px;overflow-x:auto;padding:8px 0 16px;scroll-snap-type:x proximity}
.shots figure{margin:0;flex:0 0 auto;scroll-snap-align:start}
.shots img{display:block;border-radius:18px;border:1px solid var(--line);width:220px}
.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.disc{background:var(--sticker);border-radius:50%;aspect-ratio:1;position:relative;overflow:hidden;min-width:0}
.disc img{position:absolute;inset:12%;width:76%;height:76%;object-fit:contain}
details{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 16px;margin:10px 0}
summary{cursor:pointer;font-weight:600}
details p{margin:.6em 0 0;color:var(--mute)}
.prose{padding-top:40px;padding-bottom:56px}
.guide .step{display:grid;gap:16px;margin:28px 0;padding:20px;background:var(--card);border:1px solid var(--line);border-radius:18px}
.guide .step h2{margin-top:0}
.guide .step-fig{margin:0;display:grid;justify-items:center;gap:8px;width:290px;max-width:100%}
.guide figcaption{color:var(--mute);font-size:.9rem;text-align:center}
.rules-list,.tips{padding-left:1.2em}
.guide-cta{margin-top:1.6em;font-weight:600}
.board.b5{grid-template-columns:repeat(5,var(--cell))}
.cell.x{opacity:.6}
.cell.x::after{content:"\00D7";position:absolute;font-size:calc(var(--cell)*.7);line-height:1;color:#1F2A24}
.cell.x.red{opacity:1}
.cell.x.red::after{color:var(--bad);font-weight:700}
.cell.hl{outline:4px solid #1F2A24;outline-offset:-4px;z-index:1}
.prose h2{margin-top:1.4em;font-size:1.3rem}
.foot{background:var(--bg2);text-align:center;padding:36px 0;border-top:1px solid var(--line)}
.foot p{margin:.3em 0}
@media (min-width:720px){
nav{flex:1;order:0}
.guide .step{grid-template-columns:1fr auto;align-items:center}
.hero-grid{grid-template-columns:1.2fr 1fr}
.rules{grid-template-columns:repeat(3,1fr)}
.touches{grid-template-columns:repeat(3,1fr)}
.hint-grid{grid-template-columns:auto 1fr}
.feats{grid-template-columns:repeat(3,1fr)}
.gallery{grid-template-columns:repeat(4,1fr)}
}