@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600;700;900&family=Noto+Serif+JP:wght@600;700;900&display=swap');
:root{--paper:#f7f7f0;--ink:#263d35;--muted:#858c80;--line:#dce0d4;--green:#426449}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:'Noto Sans JP',sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #da9e33;outline-offset:4px}header{height:94px;margin:0 5%;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:32px}.brand{font-size:13px;font-weight:900;letter-spacing:2px;color:var(--ink);text-decoration:none;display:flex;align-items:center;gap:13px}.brand-mark{background:var(--ink);color:var(--paper);width:35px;height:35px;display:grid;place-items:center;font:700 24px 'Noto Serif JP',serif;border-radius:7px}.header-note{font-size:11px;color:var(--muted)}.text-button{border:0;background:transparent;color:var(--ink);font-size:12px}header .text-button{margin-left:auto}main{max-width:1080px;margin:auto;padding:38px 26px 0}.intro{text-align:center}.eyebrow,.section-label{font-size:10px;font-weight:700;letter-spacing:2px;color:var(--muted)}h1{font:900 49px 'Noto Serif JP',serif;letter-spacing:2px;margin:10px 0 12px}h1 span{font-size:43px}h1 i{font-style:normal;color:#d39252}.intro>p{font-size:12px;line-height:1.9;color:#798174;margin:0}.game-layout{display:grid;grid-template-columns:190px 340px 172px;gap:45px;justify-content:center;margin-top:32px;align-items:start}.left-panel,.right-panel{padding-top:15px}.score-label{font-size:12px;margin-top:24px}.score{font-size:40px;font-weight:600;letter-spacing:2px;margin:3px 0 24px;font-variant-numeric:tabular-nums}.record{display:flex;justify-content:space-between;font-size:11px;padding:12px 0;border-top:1px solid var(--line);color:#7c8479}.record strong{color:var(--ink);font-weight:500}.tip{margin-top:35px;border-left:2px solid #c9d1b7;padding-left:13px}.tip>span{font-size:10px;font-weight:700}.tip p{font-size:10px;line-height:2;color:#858b7e}.secondary{background:transparent;border:1px solid #ccd3c4;border-radius:6px;padding:11px;width:100%;font-size:11px;color:var(--ink);margin-top:20px}.board-shell{padding:0 12px;background:#e4e9dc;border:1px solid #d2dac7;border-radius:12px;box-shadow:0 12px 30px #34432c0a}.board-top,.board-bottom{height:36px;display:flex;align-items:center;justify-content:space-between;font-size:8px;letter-spacing:1px;color:#76826c}.board-top>span{display:flex;align-items:center;gap:7px}.live-dot{width:5px;height:5px;background:#78916d;border-radius:50%}.board-top button{border:0;background:transparent;color:var(--ink);font-size:16px}.board-wrap{position:relative}.board{display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(12,1fr);gap:3px;padding:5px;height:548px;background:#cfd7c5;border:1px solid #c3ceba;border-radius:5px}.cell{border-radius:5px;background:#e4e9dc80;min-width:0;position:relative}.tile{height:100%;width:100%;display:flex;align-items:center;justify-content:center;font:700 27px 'Noto Serif JP',serif;border-radius:5px;border:1px solid var(--edge);background:var(--bg);color:var(--fg);box-shadow:inset 0 -3px 0 #00000008;position:relative}.tile small{position:absolute;bottom:2px;right:4px;font:600 8px 'Noto Sans JP',sans-serif;opacity:.7}.water{--bg:#d6e7ed;--fg:#426d85;--edge:#b5cfd9}.wood{--bg:#dde5be;--fg:#617638;--edge:#c1ce9f}.hand{--bg:#efd9c5;--fg:#a2734c;--edge:#dfbea2}.mouth{--bg:#eed1ce;--fg:#a2605c;--edge:#dcafab}.grass{--bg:#e2daf0;--fg:#7c6399;--edge:#c9bbdc}.ghost{opacity:.28}.active{outline:1px solid #ffffff99;outline-offset:-3px}.overlay{position:absolute;inset:0;background:#f4f6edf2;z-index:2;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:20px;border-radius:5px}.overlay[hidden]{display:none}.overlay-kicker{font-size:9px;letter-spacing:3px;color:#89967e}.overlay h2{font:700 24px 'Noto Serif JP',serif;margin:18px 0}.overlay p{font-size:10px;line-height:2.2;color:#7f8977}.primary{border:0;background:var(--green);color:white;padding:15px 20px;border-radius:6px;font-size:12px;margin-top:20px;box-shadow:0 4px 8px #314c2520}.primary span{margin-left:20px}.overlay small{font-size:9px;color:#9bA28f;margin-top:15px}.next-pieces{display:flex;flex-direction:column;gap:5px;width:48px;margin:20px 0 0 8px}.next-pieces .tile{height:48px}.legend-title{margin-top:32px}.legend{margin-top:15px;display:grid;gap:10px}.legend-row{display:flex;align-items:center;gap:10px;font-size:11px;color:#78816f}.legend-row .tile{width:29px;height:29px;font-size:18px}.legend-row strong{font-weight:500;color:var(--ink);margin-right:4px}.controls-guide{margin-top:31px}.controls-guide p{display:flex;align-items:center;gap:5px;font-size:10px;color:#8a9183;margin:9px 0}kbd{font:10px sans-serif;border:1px solid #d4d9cc;border-radius:3px;min-width:21px;height:20px;display:inline-grid;place-items:center;background:#fdfdf8}.wide{width:47px}.touch-controls{display:flex;justify-content:center;gap:8px;margin:19px auto 0}.touch-controls button{border:1px solid #d3dacb;background:#fdfdf7;border-radius:6px;min-width:46px;padding:10px;color:var(--ink)}footer{margin-top:40px;padding:24px 0;border-top:1px solid var(--line);display:flex;justify-content:space-between;color:#929988;font-size:9px;letter-spacing:1px}dialog{max-width:480px;width:90%;padding:30px;border:1px solid var(--line);border-radius:12px;background:var(--paper);color:var(--ink)}dialog::backdrop{background:#243a3270}dialog .text-button{float:right}dialog h2{font-family:'Noto Serif JP',serif}dialog p{font-size:13px;line-height:2}dialog small{font-size:11px;color:var(--muted)}#chain-message{position:absolute;top:40%;left:0;right:0;text-align:center;pointer-events:none;font-size:32px;font-weight:900;color:#3e6042;text-shadow:0 2px 0 #fff,0 0 12px #fff} .clearing{animation:flash .35s alternate infinite}@keyframes flash{to{opacity:.2;transform:scale(.8)}}@media(max-width:800px){header{height:72px}.header-note{display:none}.game-layout{grid-template-columns:130px 310px 125px;gap:20px}main{padding:25px 15px 0}.board{height:500px}h1{font-size:40px}h1 span{font-size:35px}.score{font-size:29px}}@media(max-width:620px){header{margin:0 20px}.brand{font-size:11px}.intro>p{font-size:11px}.game-layout{grid-template-columns:minmax(0,310px) 78px;gap:14px;margin-top:24px}.left-panel{grid-column:1/-1;grid-row:1;display:flex;align-items:center;gap:14px;padding:0}.left-panel>.section-label,.score-label,.record,.tip{display:none}.score{font-size:27px;margin:0}.score::before{content:'SCORE ';font:9px 'Noto Sans JP',sans-serif;letter-spacing:1px}.secondary{width:auto;margin:0 0 0 auto;padding:7px;font-size:10px}.board-shell{grid-column:1;padding:0 8px}.board{height:auto;aspect-ratio: .565}.right-panel{grid-column:2;padding-top:5px}.right-panel .section-label{font-size:8px;letter-spacing:1px}.next-pieces{margin-top:15px;width:37px}.next-pieces .tile{height:37px;font-size:24px}.legend-title{margin-top:26px}.legend-row{gap:4px;font-size:8px;flex-wrap:wrap}.legend-row .tile{width:25px;height:25px}.legend-row strong{font-size:9px}.controls-guide{display:none}.tile{font-size:clamp(20px,6vw,27px)}.legend{gap:11px}.board-top,.board-bottom{font-size:7px;letter-spacing:0}.overlay{padding:12px}.overlay h2{font-size:21px}.overlay p{font-size:9px}.primary{font-size:11px;padding:13px}footer{margin-top:25px}footer span:last-child{display:none}.touch-controls{gap:7px}.touch-controls button{min-width:43px}}

/* Fade every group toward the same paper and ink colors, keeping text legible. */
.game-layout{--color-strength:100%}
.tile{
  background:color-mix(in srgb,var(--bg) var(--color-strength,100%),#f3f3ec);
  border-color:color-mix(in srgb,var(--edge) var(--color-strength,100%),#cdd2c5);
  color:color-mix(in srgb,var(--fg) var(--color-strength,100%),#344237);
  transition:background-color .5s,border-color .5s,color .5s;
}

/* Ink, vermilion seals, and gold: a louder reward inside the quiet paper UI. */
#clear-effects{position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:5px;z-index:3}
#chain-message{top:29%;z-index:4;display:flex;align-items:center;flex-direction:column;gap:3px;transform:rotate(-3deg);text-shadow:0 2px 0 #f7f7f0,2px 0 0 #f7f7f0,-2px 0 0 #f7f7f0,0 0 14px #f7f7f0}
#chain-message:empty{display:none}
.chain-stamp{font:900 clamp(16px,4.5vw,24px) 'Noto Serif JP',serif;max-width:94%;white-space:nowrap;color:#b94c35;border:3px solid currentColor;padding:2px 7px;transform:rotate(9deg);line-height:1.2;background:#f7f7f0e8;text-shadow:none;box-shadow:inset 0 0 0 2px #f7f7f0}
.chain-count{font:900 29px 'Noto Serif JP',serif;color:#263d35;line-height:1.2}
.chain-count b{font-size:67px;letter-spacing:-5px;margin-right:5px}
.chain-points{font-size:30px;line-height:1.4;letter-spacing:-1px;color:#a45624;font-variant-numeric:tabular-nums}
.chain-points small{font-size:13px;margin-left:4px}
.chain-bonus{font-size:10px;letter-spacing:1px;color:#3c4b36}
#chain-message[data-intensity="3"] .chain-stamp,#chain-message[data-intensity="4"] .chain-stamp,#chain-message[data-intensity="5"] .chain-stamp{color:#f7f7f0;background:#a9402d;border-color:#a9402d}
#chain-message[data-intensity="4"] .chain-count,#chain-message[data-intensity="5"] .chain-count{color:#a9402d}
.ink-ring{position:absolute;width:42px;height:42px;border:3px solid #a27935;border-radius:50%}
.ink-fleck{position:absolute;width:7px;height:11px;background:#324437;border-radius:70% 20% 60% 25%}
.ink-fleck:nth-child(3n){background:#c29440;width:5px;height:15px}
.clearing{animation:ink-clear .42s ease-in forwards}
@keyframes ink-clear{0%{transform:scale(1)}35%{transform:scale(1.14)}65%{opacity:1;transform:scale(.95)}100%{opacity:0;transform:scale(.35) rotate(8deg)}}
@media(prefers-reduced-motion:reduce){.clearing{animation:none;outline:2px solid #a27935;outline-offset:-2px}.tile{transition:none}#clear-effects{display:none}}

.entry-board{display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(2,30px);gap:3px;padding:5px;margin-bottom:5px;border:1px dashed #9aa78f;border-radius:5px;background:#edf0e6}
.entry-board[hidden]{display:none}
.entry-board .tile{font-size:21px}

.touch-controls button{touch-action:none;user-select:none;-webkit-user-select:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:58px;font-size:23px}
.touch-controls button small{font-size:9px;white-space:nowrap}
.touch-controls button:active{background:#dce6cf;transform:translateY(2px)}
.touch-controls [data-action="rotate"]{background:#e4ebdb;border-color:#bac9aa}
.touch-controls [data-action="drop"]{margin-left:9px;border-color:#c9ac8d;background:#f1e8db}
.board-wrap{touch-action:none;user-select:none;-webkit-user-select:none}
.touch-hint{font-size:10px;color:#7b8574;text-align:center;line-height:1.8;margin:8px 0}
@media(max-width:620px){
  header{height:52px}
  main{padding-top:12px}
  .intro .eyebrow,.intro>p{display:none}
  .intro h1{font-size:29px;margin:0 0 8px}
  .intro h1 span{font-size:26px}
  .game-layout{margin-top:12px;gap:10px;grid-template-columns:minmax(0,min(310px,calc((100svh - 340px)*.565 + 18px))) 66px}
  .right-panel{min-width:0}
  .board-top button{min-width:44px;min-height:36px}
  .touch-controls{position:sticky;bottom:0;z-index:5;background:#f7f7f0f5;backdrop-filter:blur(10px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) 1.15fr 1.25fr;max-width:430px;margin:10px auto 0;padding:8px 4px max(8px,env(safe-area-inset-bottom));gap:7px;border-top:1px solid var(--line)}
  .touch-controls button{min-width:0;min-height:60px;padding:7px 3px;border-radius:10px}
  .touch-controls [data-action="drop"]{margin-left:4px}
  .touch-hint{font-size:9px}
  footer{margin-top:16px}
}
@media(max-width:620px){.board .tile{font-size:clamp(17px,4.7vw,25px)}}

/* Keep the restored board fully visible above the game-over result card. */
.overlay[data-mode="over"]{position:static;inset:auto;margin-top:10px;padding:18px 12px;background:#f4f6ed;border:1px solid #cdd5c4}
.overlay[data-mode="over"] h2{margin:10px 0;font-size:21px}
.overlay[data-mode="over"] p{margin:4px 0}
.overlay[data-mode="over"] .primary{margin-top:12px}