:root{--ink:#20332c;--muted:#627368;--cream:#f6f1e8;--paper:#fffdf8;--green:#285947;--mint:#dce9dc;--gold:#e0ac56;--orange:#d77d58;--shadow:0 24px 65px rgba(40,68,48,.13)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--cream);color:var(--ink);font-family:system-ui,-apple-system,"Noto Sans JP",sans-serif;line-height:1.6}button,a{touch-action:manipulation}button{font:inherit;cursor:pointer}a{color:inherit}button:focus-visible,a:focus-visible{outline:3px solid var(--orange);outline-offset:3px}.wrap{width:min(1080px,calc(100% - 40px));margin-inline:auto}.site-header{height:78px;display:flex;justify-content:space-between;align-items:center;gap:20px}.brand{display:inline-flex;align-items:center;gap:10px;font-weight:800;text-decoration:none;white-space:nowrap}.brand-mark{display:grid;place-items:center;width:37px;height:37px;border-radius:12px;background:var(--green);color:#fff}.site-header nav{display:flex;gap:22px}.site-header nav a{font-size:12px;font-weight:700;text-decoration:none}.site-header nav a:hover,.footer a:hover{text-decoration:underline}.eyebrow{font-size:11px;font-weight:800;letter-spacing:.17em;color:#66836e;margin:0 0 13px}.intro{min-height:300px;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:40px;padding:32px 0 42px}.intro h1{font-size:clamp(42px,5vw,68px);letter-spacing:-.07em;line-height:1.16;margin:0}.intro h1 em{font-style:normal;color:var(--orange)}.intro-copy>p:not(.eyebrow){font-size:15px;color:var(--muted);margin:20px 0 0}.intro-deco{width:min(330px,90%);height:205px;justify-self:center;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,1fr);gap:9px;transform:rotate(-8deg)}.intro-deco span{display:block;border-radius:13px;background:#2f6550;box-shadow:0 8px 0 #244f3e}.intro-deco span:nth-child(2),.intro-deco span:nth-child(5){background:#e3b66e;box-shadow:0 8px 0 #c99852}.intro-deco span:nth-child(4),.intro-deco span:nth-child(7){opacity:.3}.intro-deco span:nth-child(3){background:#a7bd9b}.play-band{background:#e8eee5;padding:58px 0 76px}.play-layout{display:grid;grid-template-columns:minmax(0,640px) 1fr;gap:50px;align-items:start}.game-panel{background:var(--paper);border:1px solid #e3e8dd;border-radius:26px;padding:31px;box-shadow:var(--shadow);min-width:0}.panel-top{display:flex;align-items:start;justify-content:space-between;gap:12px}.panel-top h2{font-size:24px;letter-spacing:-.045em;line-height:1.3;margin:0}.restart{border:1px solid #cad8ca;border-radius:11px;background:#f6f8f1;color:var(--green);font-size:12px;font-weight:800;padding:11px 12px;min-height:44px;white-space:nowrap}.restart:hover{background:#e8f1e5}.score-row{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:25px 0 13px}.score-card{border-radius:14px;background:#eef4ea;padding:9px 15px;min-width:0}.score-card.best{background:#faf0d8}.score-card.streak{background:#f5eae1}.score-card span{display:block;color:var(--muted);font-size:10px;font-weight:800}.score-card strong{display:block;font-size:24px;line-height:1.2;letter-spacing:-.04em;font-variant-numeric:tabular-nums}.harbor{height:42px;margin-bottom:12px;border-radius:10px;background:#dbe5dd;display:flex;gap:5px;align-items:end;padding:5px 10px;overflow:hidden}.harbor>span{font-size:29px;color:#7f9c88;line-height:1;transition:color .3s,text-shadow .3s}.harbor>span.lit{color:#f0ac43;text-shadow:0 0 9px #f2c673}.harbor small{margin-left:auto;align-self:center;font-size:10px;color:#446450;font-weight:800;white-space:nowrap}.board-frame{position:relative;max-width:560px;margin:auto}.board{display:grid;grid-template-columns:repeat(8,1fr);gap:4px;padding:9px;aspect-ratio:1;background:#b6c9b7;border:1px solid #a4baa7;border-radius:18px;box-shadow:inset 0 3px 9px rgba(40,75,48,.12)}.cell{min-width:0;min-height:0;border:0;border-radius:6px;background:#e9f1e6;display:grid;place-items:center;padding:0;position:relative;transition:background .12s,transform .12s}.cell:nth-child(even){background:#e1ebdf}.cell.filled{background:#357057;box-shadow:inset 0 -4px 0 #285b45,inset 0 3px 0 rgba(255,255,255,.15)}.cell.filled:after{content:"";width:36%;height:36%;border-radius:50%;background:rgba(255,255,255,.1)}.cell.preview{background:#d6a04e;box-shadow:inset 0 -4px 0 #bd8442}.cell.invalid{background:#e4a9a0}.cell:focus-visible{outline:3px solid #ad582f;outline-offset:-2px;z-index:1}.game-over{position:absolute;inset:0;display:grid;place-items:center;background:rgba(32,51,44,.72);border-radius:18px;padding:20px}.game-over[hidden]{display:none}.over-card{width:min(100%,350px);background:var(--paper);border-radius:20px;text-align:center;padding:28px 18px}.over-icon{font-size:37px;color:#d5a250}.over-card h3{font-size:21px;line-height:1.4;margin:3px 0 14px}.over-card p{margin:5px;color:var(--muted);font-size:13px}.over-card p strong{font-size:18px;color:var(--ink)}.over-card button{border:0;border-radius:12px;background:var(--green);color:#fff;font-weight:800;min-height:48px;padding:11px 20px}.over-card button{display:block;width:100%;margin-top:20px}.over-card a{display:block;margin-top:15px;font-size:12px;font-weight:700}.play-hint{min-height:44px;margin:15px 0 5px;color:var(--green);font-size:13px;font-weight:700;text-align:center}.piece-tray{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;max-width:560px;margin:auto}.piece{min-height:112px;border:2px solid #d7e4d7;border-radius:14px;background:#f2f7ef;color:var(--ink);padding:8px 4px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px}.piece:hover:not(:disabled){border-color:#81a88c}.piece.selected{border-color:#d5974c;background:#fff2da;box-shadow:0 0 0 2px #efcf96 inset}.piece.used{opacity:.35}.piece-grid{display:grid;grid-template-columns:repeat(var(--piece-cols),16px);gap:2px}.piece-dot{width:16px;height:16px;border-radius:3px;background:transparent}.piece-dot.on{background:#347258;box-shadow:inset 0 -3px 0 #285b45}.piece-label{font-size:10px;font-weight:800;line-height:1.2}.keyboard-hint{font-size:10px;color:var(--muted);margin:16px 0 0;text-align:center}.side-panel{padding:60px 10px}.side-badge{width:59px;height:59px;border-radius:17px;background:#f7dc9d;display:grid;place-items:center;color:#a26727;font-size:31px;margin-bottom:30px}.side-panel h2{font-size:clamp(30px,3vw,42px);line-height:1.4;letter-spacing:-.05em;margin:0 0 18px}.side-panel>p:not(.eyebrow){font-size:14px;color:var(--muted);max-width:300px}.tip-card{margin-top:37px;padding:20px;border:1px solid #c7d7c8;border-radius:16px;background:#f2f7ef;max-width:310px}.tip-card span{font-size:12px;font-weight:800;color:var(--green)}.tip-card p{font-size:12px;color:var(--muted);margin:9px 0 0}.how{padding:85px 0 90px}.how h2{font-size:clamp(28px,4vw,40px);letter-spacing:-.05em;margin:0 0 29px}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.steps article{background:var(--paper);border:1px solid #e8e5da;border-radius:18px;padding:23px}.steps article span{font-size:23px;font-weight:800;color:#c99050}.steps h3{font-size:18px;margin:10px 0 7px}.steps p,.how-note{font-size:13px;color:var(--muted);margin:0;line-height:1.8}.how-note{margin-top:22px}.footer{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:28px 0 46px;border-top:1px solid #d9dfd4;font-size:12px}.footer a{text-decoration:none;font-weight:700}.footer small{color:var(--muted)}
.intro-action{display:inline-flex;align-items:center;justify-content:center;min-width:130px;min-height:46px;margin-top:20px;padding:10px 21px;border-radius:12px;background:var(--green);color:white;text-decoration:none;font-size:13px;font-weight:800;box-shadow:0 8px 18px rgba(40,89,71,.17)}.intro-action:hover{background:#1e4939}
@media(max-width:850px){.play-layout{grid-template-columns:1fr}.side-panel{padding:10px 0 0}.side-panel h2 br{display:none}.side-panel>p:not(.eyebrow){max-width:none}.tip-card{margin-top:20px;max-width:none}.intro{min-height:250px}}
@media(max-width:600px){.site-header{height:68px}.site-header nav{gap:11px}.site-header nav a{font-size:10px}.site-header nav a[href="/privacy"]{display:none}.intro{grid-template-columns:1fr;gap:20px;padding:26px 0 36px}.intro h1{font-size:46px}.intro-deco{height:120px;width:240px;justify-self:start;margin-left:25px}.play-band{padding:25px 0 55px}.game-panel{padding:16px;border-radius:18px}.panel-top h2{font-size:19px}.score-row{margin-top:17px}.score-card{padding:8px 10px}.score-card strong{font-size:20px}.board{gap:3px;padding:7px;border-radius:13px}.cell{border-radius:4px}.steps{grid-template-columns:1fr}.how{padding:65px 0}.footer{flex-wrap:wrap}}
@media(max-width:360px){.wrap{width:calc(100% - 24px)}.site-header .brand{font-size:12px}.brand-mark{width:31px;height:31px}.panel-top h2{font-size:17px}.restart{font-size:10px;padding:8px}.piece-grid{grid-template-columns:repeat(var(--piece-cols),12px);gap:2px}.piece-dot{width:12px;height:12px}.piece{min-height:98px}.board{gap:2px;padding:6px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.cell,.harbor>span{transition:none}}

.cell.legal-start:not(.preview)::before{content:"＋";display:grid;place-items:center;width:52%;height:52%;border-radius:50%;background:#fff8e8;border:2px solid #a35d27;color:#844419;font-size:clamp(13px,2.3vw,20px);font-weight:900;line-height:1;box-shadow:0 1px 3px rgba(47,56,30,.2)}
.cell.legal-start:hover{background:#f7d795}.cell.legal-start:active{transform:scale(.94)}
.placement-legend{max-width:560px;margin:0 auto 12px;text-align:center;color:#315941;font-size:12px;font-weight:700}.legend-mark{display:inline-grid;place-items:center;width:22px;height:22px;margin-right:4px;border-radius:50%;border:2px solid #a35d27;background:#fff8e8;color:#844419;font-weight:900;line-height:1}