:root{font-family:Arial,sans-serif;color:#422a23;background:#eee5d7;font-synthesis:none;--mahogany:#783f31;--ink:#422a23}*{box-sizing:border-box}body{margin:0;overscroll-behavior:none}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;border:1px solid #cdbba5;color:var(--ink);background:#f5eddf;border-radius:12px;min-height:44px;font-weight:700}button:hover{filter:brightness(1.06)}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:3px solid #b45636;outline-offset:3px}button:disabled{opacity:.45;cursor:default}.shell{height:100vh;height:100dvh;min-height:320px;display:flex;align-items:center;justify-content:center;gap:0;padding:22px;background:radial-gradient(ellipse at 15% 35%,#fbf7ef88,transparent 65%),repeating-linear-gradient(4deg,#895b3310 0px,#895b3310 1px,transparent 1px,transparent 7px)}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:700;color:#936149;margin:0 0 10px}h1{font-family:Georgia,serif;font-size:clamp(36px,4vw,58px);line-height:1.1;font-weight:400;letter-spacing:-2px;margin:22px 0}p{line-height:1.65}.game{height:100%;max-height:900px;width:420px;display:flex;flex-direction:column;gap:10px;flex-shrink:0}header{display:flex;align-items:center;justify-content:space-between;flex-shrink:0}header h2{font-family:Georgia,serif;font-size:30px;letter-spacing:-1px;font-weight:400;margin:0}.leaf{color:#a76547;font-size:25px;margin-left:8px}.icon{width:44px;font-size:21px;background:transparent}header .eyebrow{font-size:9px;letter-spacing:1.8px;margin-bottom:4px}.scores{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #cdbca6;border-bottom:1px solid #cdbca6;padding:10px 3px;flex-shrink:0}.scores span{display:block;font-size:9px;letter-spacing:1.6px;color:#8b705b}.scores strong{font-size:26px;display:block;font-weight:500;line-height:1.3;font-variant-numeric:tabular-nums}.scores>div:nth-child(2) strong{color:#a25437;font-size:23px}.next{width:74px}.next canvas{width:70px;height:34px;display:block}.board-area{flex:1;min-height:0;display:flex;justify-content:center}.board-frame{position:relative;height:100%;aspect-ratio:16/27;padding:9px;border-radius:11px;background:linear-gradient(110deg,#a56845,#633a2c 45%,#9d6546);box-shadow:0 8px 20px #58321e24,inset 0 1px #d9ad7d,inset 0 -3px #45291f;max-width:100%}#board{width:100%;height:100%;display:block;border-radius:4px;touch-action:none;background:#30251f;box-shadow:0 0 0 2px #38251c}#curtain{position:absolute;inset:9px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:15px;text-align:center;background:#30251fed;color:#f7e9d0;border-radius:4px}#curtain[hidden]{display:none}#curtain .eyebrow{color:#d5a77c;font-size:8px}#curtain h3{font-family:Georgia,serif;font-size:27px;font-weight:400;margin:7px 0}#curtain p:not(.eyebrow){font-size:12px;color:#d1b9a3;max-width:200px}#curtain .primary{font-size:12px;padding:12px 18px}.primary{background:#844633;color:#fff0df;border-color:#a96545;box-shadow:inset 0 1px #b47351;min-height:46px;padding:12px 20px}.primary span{margin-left:15px}.progress{display:flex;justify-content:space-between;font-size:9px;color:#8a6b54;letter-spacing:.6px;flex-shrink:0}.progress span:first-child{font-weight:700;color:#7b3d2e}.controls{display:grid;grid-template-columns:1fr 1fr 1fr 1.6fr;gap:8px;flex-shrink:0}.controls button{height:48px;font-size:24px;box-shadow:0 3px 0 #d3c0aa}.controls .drop{font-size:14px;background:#7c4333;color:#fff1dc;border-color:#7c4333;box-shadow:0 3px 0 #562e24}.drop span{margin-left:12px}footer{display:flex;align-items:center;justify-content:space-between;gap:5px;flex-shrink:0}footer button{border:0;background:none;font-size:10px;min-height:44px;padding:0 5px;color:#6d5241}#status{font-size:9px;text-align:center;color:#947159}dialog{border:1px solid #c9ae91;background:#f7eddf;color:#422a23;border-radius:20px;box-shadow:0 22px 90px #24150e66;width:min(430px,calc(100vw - 28px));padding:24px;max-height:calc(100dvh - 28px);overflow:auto}dialog::backdrop{background:#2f201bb8;backdrop-filter:blur(4px)}.dialog-top{display:flex;justify-content:space-between;align-items:center}.dialog-top .eyebrow{font-size:8px;margin:0}dialog h2{font-family:Georgia,serif;font-size:30px;font-weight:400}dialog p,dialog li{font-size:14px;line-height:1.6}dialog li{margin-bottom:9px}dialog button.wide{width:100%;margin-top:10px}dialog label{display:flex;align-items:center;gap:10px;font-size:14px;padding:12px 0}dialog input{width:22px;height:22px;accent-color:#844633}.muted{color:#8b705b;font-size:12px!important}.result{font-family:Georgia,serif;font-size:48px!important;margin:8px 0}.rules{padding-left:20px}@media(max-width:800px){.shell{padding:max(10px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left))}.game{width:min(100%,420px);gap:8px;max-height:none}}@media(max-height:680px){.game{gap:5px}header h2{font-size:24px}.scores{padding:6px 2px}.scores strong{font-size:21px}.scores>div:nth-child(2) strong{font-size:21px}header .eyebrow{font-size:8px}.controls button{height:44px}.progress{font-size:8px}footer button{min-height:44px}.shell{padding-top:7px;padding-bottom:5px}#curtain h3{font-size:21px}#curtain p{font-size:10px!important}#curtain .primary{padding:8px;font-size:10px}}@media(max-height:450px) and (min-width:600px){.game{width:100%;max-width:800px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto auto 1fr auto;gap:8px 25px}.board-area{grid-column:2;grid-row:1/6;height:100%}.progress{align-self:start}.controls{align-self:end}footer{grid-column:1}.shell{padding:10px 25px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

/* The play route contains gameplay only; editorial copy belongs on site pages. */
.shell{gap:0}.game{margin-inline:auto}

dialog nav{margin-top:18px}dialog nav a{color:#783f31;display:inline-flex;align-items:center;min-height:44px;font-size:14px}

/* 1.0.1: use the viewport, rather than a fixed 420px column. */
.shell{padding:max(6px,env(safe-area-inset-top)) max(6px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left))}
.game{width:100%;max-width:none;max-height:none;gap:4px}
header{min-height:44px}header h2{font-size:25px}header .eyebrow{font-size:8px;margin-bottom:2px}
.scores{padding:4px 3px}.scores strong,.scores>div:nth-child(2) strong{font-size:21px}.scores span{font-size:8px}.next canvas{height:27px;width:56px}
.board-area{min-width:0;min-height:0;align-items:center;overflow:hidden}
.board-frame{aspect-ratio:auto;max-width:none;flex:none;padding:6px;height:auto;width:auto}
#curtain{inset:6px}.controls button{height:44px}.progress{min-height:12px;align-items:center}
@media(min-width:700px){
 .shell{padding:10px}
 .game{display:grid;grid-template-columns:minmax(160px,1fr) minmax(0,1.6fr) minmax(180px,1fr);grid-template-rows:48px minmax(0,1fr) 70px;gap:8px 20px;padding:10px;border:1px solid #cdbba566;border-radius:18px;background:#f5eddf55}
 header{grid-column:1/4;grid-row:1;border-bottom:1px solid #cdbba566;padding:0 2px 6px}
 .board-area{grid-column:2;grid-row:2/4;height:100%;width:100%}
 .scores{grid-column:1;grid-row:2;flex-direction:column;justify-content:center;gap:26px;border:0;width:100%;text-align:center;align-self:stretch}
 .scores strong,.scores>div:nth-child(2) strong{font-size:32px}.scores span{font-size:10px}.next{width:auto}.next canvas{height:48px;width:100px;margin:8px auto 0}
 .progress{grid-column:1;grid-row:3;flex-wrap:wrap;justify-content:center;gap:8px 16px;max-width:240px;justify-self:center;font-size:10px}
 .controls{grid-column:3;grid-row:2;grid-template-columns:repeat(3,minmax(44px,1fr));gap:10px;width:100%;max-width:320px;justify-self:center;align-self:center}
 .controls button{height:56px}.controls .drop{grid-column:1/4}
 footer{grid-column:3;grid-row:3;display:grid;grid-template-columns:1fr 1fr;width:100%;max-width:320px;justify-self:center;align-self:end}
 footer #status{grid-column:1/3;grid-row:2}footer button{font-size:12px}header h2{font-size:28px}
}
@media(min-width:700px) and (max-height:450px){.game{grid-template-rows:44px minmax(0,1fr) 58px;padding:4px;gap:4px 10px}.scores{gap:9px}.scores strong,.scores>div:nth-child(2) strong{font-size:23px}.controls button{height:44px}.progress{font-size:9px}.shell{padding:6px}}