@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;600;700;800&display=swap');
:root{color-scheme:light;--paper:#eef3f1;--card:#fbfdfc;--ink:#23303a;--muted:#62707a;--line:#d6e0dd;--teal:#1d6b70;--deep:#173c48;--gold:#d39b2a;--danger:#c23b4c;--glow:#ffd77a}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',system-ui,sans-serif}
button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;touch-action:manipulation;border:0;color:inherit}button:disabled{cursor:default}
button:focus-visible,a:focus-visible{outline:3px solid var(--teal);outline-offset:3px}a{color:inherit;text-decoration:none}[hidden]{display:none!important}
.shell{max-width:1220px;margin:auto;padding:24px 38px 44px}
header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:18px}
.brand{font:800 16px 'Manrope',sans-serif;letter-spacing:2px}.brand span{color:var(--gold)}
.utilities{display:flex;gap:8px}.utilities button{padding:9px 13px;border:1px solid var(--line);border-radius:8px;background:transparent;font-size:12px;font-weight:700}.utilities button:disabled{opacity:.45}
.heading{display:flex;align-items:flex-end;justify-content:space-between;margin:34px 0 25px}
.eyebrow{font-size:10px;font-weight:800;letter-spacing:1.8px;margin:0 0 12px;color:var(--teal)}
h1{font:800 clamp(38px,5vw,62px)/1.05 'Manrope',sans-serif;letter-spacing:-3px;margin:0}h1 em{font-style:normal;color:var(--teal)}
.tagline{color:var(--muted);font-size:14px;line-height:1.7;margin:0 0 4px;text-align:right}
.layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:30px}
.court{border:1px solid var(--line);border-radius:20px;padding:20px;background:var(--card);box-shadow:0 12px 40px #1a3a3a08;min-width:0}
.hud{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding-bottom:15px;border-bottom:1px solid var(--line)}
.hud>div{padding-left:15px;border-left:1px solid var(--line);min-width:0}.hud>div:first-child{padding-left:0;border:0}
.hud small{display:block;color:var(--muted);font-size:9px;letter-spacing:1px;font-weight:700}
.hud strong{display:flex;align-items:center;gap:6px;font:800 23px 'Manrope',sans-serif;margin-top:6px;white-space:nowrap;min-height:30px}
.hearts{color:var(--danger);letter-spacing:1px}
.stars{display:block;font-size:11px;letter-spacing:1px;color:var(--gold);margin-top:2px}
.opening{display:flex;align-items:center;gap:14px;background:#e3efec;padding:18px;border-radius:12px;margin:16px 0}
.sun{font-size:34px;color:var(--teal)}.opening h2{font:800 18px 'Manrope',sans-serif;margin:0 0 6px}.opening p{font-size:12px;line-height:1.5;margin:0;color:#4d5d63}
.opening-condition{margin-top:8px!important}.opening-ai-note{margin-top:8px!important;color:var(--teal)!important;font-weight:600}.opening-actions{display:flex;flex-direction:column;gap:8px;margin-left:auto}
.primary,.secondary{padding:12px 15px;font-size:12px;font-weight:800;border-radius:9px;transition:transform .12s}
.primary{background:var(--teal);color:#fff}.secondary{background:#e3efec;color:var(--teal);border:1px solid #c7dcd8}
.primary:active,.secondary:active{transform:translateY(2px)}.primary:disabled,.secondary:disabled{opacity:.55}
.text-button{background:none;color:var(--teal);padding:7px;font-size:11px;font-weight:700}.text-button:disabled{opacity:.45}
.day-line{display:flex;justify-content:space-between;gap:10px;font-size:10px;color:var(--muted);padding:12px 0 6px}.day-line span:first-child{color:var(--teal);font-weight:700}
.rule-impact{font-size:11px;color:var(--muted);margin:0 0 12px}.small{font-size:11px;color:var(--muted)}
.stage{display:flex;justify-content:center}
/* The board is a CSS grid; runes are buttons that span one, two or three cells. */
.board{--rows:5;--cols:5;--gap:5px;--pad:10px;--cell:56px;position:relative;display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));grid-template-rows:repeat(var(--rows),minmax(0,1fr));gap:var(--gap);padding:var(--pad);width:min(100%,calc(var(--cols) * 68px + (var(--cols) - 1) * var(--gap) + 2 * var(--pad)));aspect-ratio:var(--cols)/var(--rows);border-radius:18px;overflow:hidden;background:#1b3340 url(art/board-bg.jpg) center/cover;box-shadow:inset 0 0 0 2px #ffffff14,inset 0 0 40px #0008,0 14px 30px #10303533}
.board-empty{grid-column:1/-1;grid-row:1/-1;align-self:center;text-align:center;margin:0;color:#cfe3e0;font-size:13px}
.rune{position:relative;min-width:0;min-height:0;padding:0;border-radius:14%;background:center/100% 100% no-repeat;filter:drop-shadow(0 3px 3px #0007);transition:transform .34s cubic-bezier(.5,0,.9,.6),opacity .3s ease-in .08s}
.rune.slate{background-image:url(art/slate.png)}.rune.jade{background-image:url(art/jade.png)}.rune.amber{background-image:url(art/amber.png)}.rune.amethyst{background-image:url(art/amethyst.png)}
/* Long runes reuse the square stone as a nine-slice frame so the carving stays crisp. */
.rune.long{background:none;border:calc(var(--cell) * .2) solid transparent;border-image:url(art/slate.png) 22% fill round}
.rune.long.jade{border-image-source:url(art/jade.png)}.rune.long.amber{border-image-source:url(art/amber.png)}.rune.long.amethyst{border-image-source:url(art/amethyst.png)}
.arrow{position:absolute;left:50%;top:50%;width:calc(var(--cell) * .5);height:calc(var(--cell) * .5);margin:calc(var(--cell) * -.25) 0 0 calc(var(--cell) * -.25);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5 3.5 11.5h5.6v10h5.8v-10h5.6z' fill='%23ffe6a3' stroke='%233a2405' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;filter:drop-shadow(0 0 3px #ffc95a) drop-shadow(0 1px 1px #0009);pointer-events:none}
.rune[data-dir=right] .arrow{transform:rotate(90deg)}.rune[data-dir=down] .arrow{transform:rotate(180deg)}.rune[data-dir=left] .arrow{transform:rotate(270deg)}
.rune:focus-visible{outline:3px solid #fff;outline-offset:-1px;box-shadow:0 0 0 6px #1d6b70}
@media(hover:hover){.rune:not(.leaving):hover{transform:translateY(-2px);filter:drop-shadow(0 6px 5px #0008) brightness(1.06)}}
.rune.leaving{transform:translate(var(--tx,0),var(--ty,0));opacity:0;pointer-events:none}
.rune.bump{animation:bump .32s ease-out}
@keyframes bump{40%{transform:translate(var(--bx,0),var(--by,0))}}
.rune.struck{animation:struck .4s ease-out;filter:drop-shadow(0 0 6px #ff5a5a) drop-shadow(0 3px 3px #0007)}
@keyframes struck{20%,60%{transform:translateX(-3px)}40%,80%{transform:translateX(3px)}}
.rune.hinted{filter:drop-shadow(0 0 8px var(--glow)) drop-shadow(0 0 3px var(--glow));animation:glow 1.2s ease-in-out infinite alternate}
@keyframes glow{to{filter:drop-shadow(0 0 14px var(--glow)) drop-shadow(0 0 4px var(--glow))}}
.board.reset .rune{animation:settle .4s ease-out}
@keyframes settle{from{opacity:0;transform:scale(.85)}}
.board-tools{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px}.board-tools .secondary{min-height:44px}
.notice{font-size:12px;line-height:1.5;color:var(--teal);min-height:36px;margin:11px 0}
.controls{font-size:9px;line-height:1.6;color:var(--muted);margin:10px 0 0}
.story-card,.result{background:#e8f1ef;border:1px solid #d1e2de;padding:22px;border-radius:14px}
.story-card h2,.result h2{font:800 25px/1.25 'Manrope',sans-serif;letter-spacing:-.8px;margin:0 0 12px}
.story-card>p:not(.eyebrow),.result>p{font-size:12px;line-height:1.75;color:#4f5e63}
.rule-note{padding:11px;border-left:2px solid #93c2bb;background:#fff8;font-size:11px;line-height:1.6;color:var(--teal);margin:15px 0}
.story-card .secondary{width:100%;background:var(--teal);color:#fff}.story-card .small{font-size:9px!important;margin-bottom:0}
.result{margin-top:16px;background:#f6eedc;border-color:#eadcbd}.reflection{padding:12px;border:1px dashed #d4bd8c;border-radius:9px}
.reflection small{font-size:8px;letter-spacing:1px;color:#9a7a3c;font-weight:800}.reflection p{font-size:12px;line-height:1.7;margin:7px 0 0}
.result-actions{display:grid;gap:8px;margin-top:16px}
.field-guide{margin:25px 0 20px;padding:0 6px}.field-guide h3{font:800 15px 'Manrope',sans-serif;margin:0 0 12px}.field-guide p{font-size:11px;color:var(--muted);line-height:1.7;margin:8px 0}.field-guide b{color:var(--ink)}
.game-help-links{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;margin:14px 0}
.game-help-links a,.game-help-links button{display:inline-flex;align-items:center;min-height:44px;padding:0 8px;touch-action:manipulation;background:transparent}
.game-help-links .play-guide-link{color:var(--teal);font-size:14px;text-decoration:underline;text-underline-offset:3px}.catalog{font-size:11px;font-weight:700}
#help-panel{width:min(560px,calc(100vw - 24px));max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);padding:0;border:1px solid var(--line);border-radius:16px;background:var(--paper);color:var(--ink);overflow:hidden;box-shadow:0 18px 70px #23303a33}
#help-panel::backdrop{background:#23303a80}
.lab-help{display:flex;flex-direction:column;max-height:calc(100dvh - 24px)}
.help-body{min-height:0;overflow:auto;overscroll-behavior:contain;padding:22px;line-height:1.65;overflow-wrap:anywhere}
.help-body h2{font:800 24px/1.25 'Manrope',sans-serif;margin:0 0 14px}.help-body p,.help-steps{font-size:14px}
.help-state{padding:12px;border-radius:9px;background:#e3efec;color:var(--teal)}
.help-steps{padding-left:22px}.help-steps li{padding-left:4px;margin:12px 0}.help-body .help-keys{font-size:12px;color:var(--muted)}
.help-full-guide{display:inline-flex;align-items:center;min-height:44px;color:var(--teal);text-decoration:underline;text-underline-offset:3px}
.help-actions{flex:0 0 auto;border-top:1px solid var(--line);padding:14px 22px;background:var(--paper)}.help-actions button{width:100%;min-height:44px;font-size:14px;white-space:normal}
body[data-phase=paused] .court{border-color:#a9cbc5}body[data-phase=paused] .day-line span:first-child:before{content:'PAUSED · '}body[data-phase=paused] .rune{filter:grayscale(.5) drop-shadow(0 3px 3px #0007)}
@media(max-width:900px){.shell{padding:18px 22px 30px}.layout{grid-template-columns:minmax(0,1fr) 250px;gap:18px}.court{padding:15px}.opening{flex-wrap:wrap}.opening-actions{width:100%;margin-left:0;flex-direction:row}.opening-actions button{flex:1}.tagline{display:none}}
/* Keep the HUD clear of the mobile sticky header when a set starts or practice continues. */
.court,.result{scroll-margin-top:76px}
/* On a 390px phone a 7×7 board keeps every rune at least 44px wide. */
@media(max-width:700px){.shell{padding:12px 12px 24px}header{position:sticky;top:0;z-index:3;background:var(--paper);padding:6px 0 12px}.brand{font-size:13px;letter-spacing:1.2px}.utilities button{padding:8px 10px;font-size:10px;min-height:44px}.heading{margin:21px 5px 18px}.eyebrow{font-size:9px;letter-spacing:1.3px}h1{font-size:38px;letter-spacing:-2px}.layout{display:block}.court{padding:10px;border-radius:15px}.hud>div{padding-left:8px}.hud small{font-size:9px;letter-spacing:.4px}.hud strong{font-size:19px;gap:4px}.opening{margin:12px 0;padding:13px}.opening .sun{display:none}.opening h2{font-size:16px}.opening p{font-size:12px}.day-line{padding:10px 0 4px}.rule-impact{margin-bottom:10px}.board{--gap:3px;--pad:6px;border-radius:14px}.notice{font-size:12px}.controls{font-size:10px}aside{margin-top:18px}.help-body{padding:16px}.help-actions{padding:12px 16px}.help-body h2{font-size:22px}button{min-height:44px}.rune{min-height:0}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important}.rune.struck{outline:3px solid #ff6b6b;outline-offset:-3px}.rune.bump{outline:3px solid #ffd2d2;outline-offset:-3px}}
/* Reviewed run focus · 20261003-reviewed1 */
.goal-controls{margin-top:12px}.goal-label{display:block;font-size:10px;font-weight:800;color:var(--teal);margin-bottom:6px}.goal-buttons{display:flex;flex-wrap:wrap;gap:6px}
.goal-button{min-height:44px;padding:9px 11px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink);font-size:11px;font-weight:700;text-align:left}
.goal-button[aria-pressed=true]{background:var(--teal);color:#fff;border-color:var(--teal)}.goal-controls p{margin-top:7px!important;font-size:11px!important;line-height:1.5}
/* Explicit AI choice stays within the opening, including the play feed. */.opening-story{font-size:.88rem;line-height:1.4;margin:.35rem 0}.opening-ai-note{font-size:.82rem;line-height:1.35;margin:.45rem 0}.opening{flex-wrap:wrap}.opening-actions{width:100%;margin-left:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.opening-actions #get-ai{min-height:44px;grid-column:1/-1}.opening-actions #get-ai:disabled{opacity:.65;cursor:default}.opening #opening-date{margin:.25rem 0;font-size:.78rem}

/* Inside the /play/ feed (html.cc-embed, set by play-bridge.js): no site chrome, and the
   opening, HUD and rune board share one screen. The opening sits over the board, and the
   board fits the height left for it (game.mjs sizes the runes from its width). */
.cc-embed .brand,.cc-embed .heading,.cc-embed .story-card,.cc-embed .field-guide,.cc-embed .controls,.cc-embed .catalog{display:none}
.cc-embed .shell{position:relative;display:flex;flex-direction:column;height:100vh;height:100dvh;max-width:1220px;padding:8px 12px 10px}
.cc-embed header{position:static;justify-content:flex-end;border:0;padding:0 0 6px;background:none;z-index:auto}
.cc-embed .game-help-links{position:absolute;top:8px;left:12px;margin:0;z-index:3}
.cc-embed .game-help-links .play-guide-link{min-height:44px;padding:0 4px;font-size:0}
.cc-embed .game-help-links .play-guide-link::before{content:'How to play';font-size:12px;font-weight:700}
.cc-embed .layout{flex:1;min-height:0;grid-template-columns:minmax(0,1fr) auto;gap:16px}
.cc-embed aside{min-height:0;overflow:auto}
.cc-embed .court{display:grid;min-height:0;padding:12px;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto auto minmax(0,1fr) auto auto;grid-template-areas:"hud" "line" "status" "impact" "stage" "tools" "notice"}
.cc-embed .hud{grid-area:hud;padding-bottom:10px}.cc-embed .day-line{grid-area:line;padding:8px 0 2px}.cc-embed #progress-status{grid-area:status;margin:0}
.cc-embed .rule-impact{grid-area:impact;margin:0 0 8px}.cc-embed .board-tools{grid-area:tools;margin-top:8px}.cc-embed .notice{grid-area:notice;margin:6px 0 0;min-height:36px}
.cc-embed .stage{grid-area:stage;min-height:0;align-items:center;container-type:size}
.cc-embed .board{width:min(100%,calc(100cqh * var(--cols) / var(--rows)),calc(var(--cols) * 68px + (var(--cols) - 1) * var(--gap) + 2 * var(--pad)))}
.cc-embed .opening{max-height:calc(100dvh - 150px);overflow:auto;overscroll-behavior:contain;grid-area:stage;z-index:2;align-self:center;justify-self:center;flex-wrap:wrap;max-width:520px;margin:0 6px;box-shadow:0 10px 34px #1d16288c}
.cc-embed .opening-actions{width:100%;margin-left:0;flex-direction:row}.cc-embed .opening-actions button{flex:1}
.cc-embed .result{display:flex;flex-direction:column;width:280px;margin-top:0}.cc-embed .result>*{margin-top:0}
.cc-embed .result-actions{order:1;margin:0 0 14px}.cc-embed .reflection{order:2}
@media(max-width:700px){
  .cc-embed .shell{padding:6px 8px 8px}.cc-embed .game-help-links{top:10px;left:8px}
  .cc-embed .layout{display:flex;flex-direction:column}.cc-embed .court{flex:1;min-height:420px;padding:10px}.cc-embed aside{flex:none;margin:0;overflow:visible}
  .cc-embed .result{width:auto;margin-top:10px}
  .cc-embed body:is([data-phase=won],[data-phase=failed]) .result{position:fixed;left:8px;right:8px;bottom:8px;z-index:5;max-height:calc(100dvh - 16px);overflow:auto;margin:0;box-shadow:0 -10px 40px #2a1f3a59}
}