.shakkei { --ink: #2c423a; --paper: #f7f3e8; color: var(--ink); }
.game--shakkei { --workspace-accent: #52745d; }
.shakkei-eyebrow { text-transform: uppercase; font-size: .7rem; letter-spacing: .12em; }
.prototype-notice { padding: .75rem 1rem; background: #fff3cf; border-left: 3px solid #aa7e26; color: #604b1f; font-size: .85rem; }
.shakkei-end { font-weight: bold; color: #9c452a; }
.shakkei-market, .shakkei-garden { margin-top: 1rem; padding: 1rem; border: 1px solid #d3d8ca; border-radius: 8px; background: #fffdf8; }
.shakkei-market h2, .shakkei-garden h2 { margin: 0; font: 1.3rem Georgia, serif; }
.shakkei-market > p { font-size: .85rem; }
.shakkei-market-layout { display: grid; grid-template-columns: minmax(0, 1fr) 5.5rem; gap: .4rem; max-width: 32rem; margin: 1rem auto; }
.shakkei-column-buttons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; }
.shakkei-column-buttons button { font-size: .7rem; padding: .5rem .1rem; }
.shakkei-stacks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; grid-column: 1; }
.shakkei-stack { display: grid; place-items: center; min-width: 0; color: #263d35; }
.shakkei-stack > svg, .shakkei-stack-label { grid-area: 1 / 1; }
.shakkei-stack > svg { display: block; width: 100%; height: auto; max-height: 6.5rem; filter: drop-shadow(0 2px 0 #0002); }
.shakkei-stack-label { position: relative; width: 75%; text-align: center; line-height: 1.2; overflow-wrap: anywhere; }
.shakkei-stack strong { display: block; font-size: .75rem; }
.shakkei-stack span { display: block; margin-top: .25rem; font-size: .65rem; }
.shakkei-stack .landscape-empty polygon { stroke: #d3d8ca; stroke-dasharray: 3 3; }
.shakkei-row-buttons { display: grid; grid-template-rows: repeat(3, 1fr); gap: .4rem; grid-column: 2; grid-row: 2; }
.shakkei-row-buttons button { font-size: .7rem; padding: .3rem; }
.shakkei-supply { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid #d3d8ca; }
.shakkei-supply h3 { margin: 0 0 .75rem; font: 1.2rem Georgia, serif; }
.shakkei-supply-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: .6rem; margin: 0; padding: 0; list-style: none; }
.shakkei-supply-item { border: 2px solid #d3d8ca; border-radius: 8px; background: var(--paper); overflow: hidden; }
.shakkei .shakkei-supply-select { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) auto; gap: .4rem; align-items: center; width: 100%; padding: .4rem .6rem .4rem .2rem; border: 0; border-radius: 0; background: transparent; color: inherit; text-align: left; }
.shakkei .shakkei-supply-select:disabled { opacity: 1; }
.shakkei-supply-item-legal { border-color: #3f6649; }
.shakkei-supply-item-legal:hover, .shakkei-supply-item-legal:focus-within { box-shadow: inset 0 0 0 2px #203e2a; }
.shakkei-supply-select:focus-visible { outline: 2px solid #203e2a; outline-offset: -4px; }
.shakkei-supply-item-selected { border-color: #985415; border-style: dashed; }
.shakkei-supply-icon { display: block; width: 3.5rem; height: 3.1rem; }
.shakkei-supply-name { font-size: .8rem; overflow-wrap: anywhere; }
.shakkei-supply-count { font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.shakkei-supply-item-empty { border-style: dashed; background: #f0eee7; }
.shakkei-supply-item-empty .shakkei-supply-icon { opacity: .45; }
.shakkei button:disabled { opacity: .4; cursor: default; }
.shakkei-pending { margin-top: 1rem; padding: .75rem; border: 1px solid #d3d8ca; border-radius: 8px; background: var(--paper); }
.shakkei-pending h3 { margin: 0; font: 1.05rem Georgia, serif; }
.shakkei-pending h3 span { color: #65715f; font: .8rem sans-serif; }
.shakkei-pending-heading p { margin: .35rem 0 .5rem; font-size: .8rem; }
.shakkei-pending-tiles { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.shakkei-pending .shakkei-pending-tile { display: flex; flex-direction: column; align-items: center; width: 6rem; padding: .3rem; border: 2px solid transparent; border-radius: 8px; background: #fffdf8; color: var(--ink); }
.shakkei-pending-tile svg { display: block; width: 100%; height: 4rem; }
.shakkei-pending-tile > span { font-size: .8rem; font-weight: 600; }
.shakkei-pending-tile small { min-height: 1.2em; font-size: .65rem; }
.shakkei-pending .shakkei-pending-tile:disabled { opacity: .65; }
.shakkei-pending .shakkei-pending-tile-selected { border-color: #52745d; box-shadow: 0 0 0 2px #52745d26; opacity: 1; }
.shakkei-pending .shakkei-pending-tile-selected:disabled { opacity: 1; }
.shakkei-pending .shakkei-pending-tile:hover:not(:disabled) { border-color: #63805a; background: #edf2e5; }
.shakkei-pending-tile:focus-visible { outline: 2px solid #2c423a; outline-offset: 3px; }
.shakkei-garden-current { border-color: #5b8265; box-shadow: 0 0 0 2px #5b82651a; }
.shakkei-garden > header { display: flex; flex-wrap: wrap; gap: .3rem 1rem; justify-content: space-between; align-items: baseline; }
.shakkei-garden > header p { font-size: .8rem; margin: .4rem 0; }
.shakkei-board { display: block; width: 100%; max-height: 620px; min-height: 230px; margin: 1rem auto; }
.landscape-plant { --terrain: #b8cfa2; background: var(--terrain); }
.landscape-water { --terrain: #a1cfdb; background: var(--terrain); }
.landscape-rock { --terrain: #c7c6bf; background: var(--terrain); }
.landscape-gravel { --terrain: #e7d6b1; background: var(--terrain); }
.landscape-empty { --terrain: #f0eee7; background: var(--terrain); color: #81877e; }
.shakkei-hex polygon { fill: var(--terrain); stroke: #fffdf8; stroke-width: 2; }
.shakkei-hex text, .shakkei-spot text { text-anchor: middle; fill: #293e34; pointer-events: none; }
.shakkei-terrain { font-size: 10px; }
.shakkei-coordinate { font-size: 7px; opacity: .75; }
.shakkei-map-hint { margin: .75rem 0 0; font-size: .85rem; }
.shakkei-hex-actionable { cursor: pointer; }
.shakkei-hex .shakkei-tile-outline { fill: none; stroke: #3f6649; stroke-width: 3; vector-effect: non-scaling-stroke; pointer-events: none; }
.shakkei-hex-actionable:hover .shakkei-tile-outline, .shakkei-hex-actionable:focus-within .shakkei-tile-outline { stroke: #203e2a; stroke-width: 5; }
.shakkei-hex-selected .shakkei-tile-outline { stroke: #985415; stroke-width: 4; stroke-dasharray: 6 3; }
.shakkei-build-orientation polygon { fill: transparent; stroke: #3f6649; stroke-width: 1; vector-effect: non-scaling-stroke; }
.shakkei-build-orientation:hover polygon, .shakkei-build-orientation:focus polygon { fill: #fffdf8; fill-opacity: .7; stroke-width: 2; }
.shakkei-build-orientation line { stroke: #694423; stroke-width: 3; stroke-linecap: round; pointer-events: none; }
.shakkei-spot { cursor: pointer; }
.shakkei-spot polygon { fill: var(--terrain, #e5ecd8); fill-opacity: .12; stroke: #3f6649; stroke-width: 2; stroke-dasharray: 5 3; vector-effect: non-scaling-stroke; }
.shakkei-spot:hover polygon, .shakkei-spot:focus polygon { fill-opacity: .35; stroke: #203e2a; stroke-width: 4; stroke-dasharray: none; }
.shakkei-element { fill: #fffdf5; stroke: #516e55; stroke-width: 2; }
.shakkei-symbol { font-size: 10px; font-weight: 700; text-anchor: middle; fill: #293e34; pointer-events: none; }
.shakkei-bridge-axis { stroke: #9b5d2f; stroke-width: 3; opacity: .6; pointer-events: none; }
.shakkei-sight { stroke: #b34126; stroke-width: 2; stroke-dasharray: 4 3; pointer-events: none; }
.shakkei-visitor { font-size: 9px; font-weight: 700; }
.shakkei-score { font-size: .78rem; color: #5a6c5b; }
.shakkei-visitors { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid #d3d8ca; }
.shakkei-visitors h3 { margin: 0 0 .75rem; font: 1.2rem Georgia, serif; }
.shakkei-visitor-display { display: flex; flex-wrap: wrap; gap: 1rem; }
.shakkei-visitor-card { flex: 0 1 20rem; max-width: 100%; overflow: hidden; border: 2px solid #ad9271; border-radius: 12px; background: #faf6e9; color: #2c423a; box-shadow: 0 4px 10px #4d423314; }
.shakkei-visitor-card-selectable { border-color: #52745d; box-shadow: 0 0 0 3px #52745d26; }
.shakkei-visitor-card-header { display: flex; align-items: center; gap: .75rem; justify-content: space-between; padding: .9rem 1rem .25rem; }
.shakkei-visitor-card-header p { margin: 0 0 .25rem; font-size: .65rem; text-transform: uppercase; letter-spacing: .12em; }
.shakkei-visitor-card-header h4 { margin: 0; font: 1.15rem Georgia, serif; }
.shakkei-visitor-card-base { flex: 0 0 3.3rem; display: flex; flex-direction: column; align-items: center; padding: .4rem; border-radius: 50%; background: #e5d4b0; }
.shakkei-visitor-card-base strong { font: 1.7rem Georgia, serif; }
.shakkei-visitor-card-base span { font-size: .6rem; }
.shakkei-visitor-card-art { display: block; width: 100%; height: 112px; }
.shakkei-visitor-card-placement { margin: 0 1rem; padding: .7rem 0; border-bottom: 1px solid #d7c9ae; }
.shakkei-visitor-card-placement > span { font-size: .65rem; text-transform: uppercase; letter-spacing: .08em; color: #736247; }
.shakkei-visitor-card-placement p { margin: .3rem 0 0; font-size: .85rem; }
.shakkei-visitor-card-scoring { padding: .75rem 1rem; }
.shakkei-visitor-card-scoring > p { margin: 0 0 .6rem; font-size: .7rem; color: #65715f; }
.shakkei-visitor-card-scoring ul { list-style: none; padding: 0; margin: 0; }
.shakkei-visitor-card-scoring li { display: flex; gap: .75rem; align-items: center; justify-content: space-between; padding: .65rem 0; font-size: .85rem; border-top: 1px solid #e4dcc8; }
.shakkei-visitor-card-scoring li strong { flex-shrink: 0; color: #45664b; }
.shakkei-visitor-card-scoring small { display: block; margin-top: .5rem; color: #736b59; font-size: .65rem; line-height: 1.5; }
.shakkei-visitor-card footer { padding: 0 1rem 1rem; }
.shakkei-visitor-card-select { width: 100%; background: #52745d; color: white; border-color: #52745d; font-size: .8rem; }
.shakkei-visitor-card-select:hover:not(:disabled) { background: #3f5e48; }
.shakkei-visitor-card-select:disabled:hover { background: #52745d; }
.shakkei-visitor-card-select:focus-visible { outline: 2px solid #2c423a; outline-offset: 3px; }
.shakkei-visitor-card footer p { margin: .5rem 0 0; min-height: 2.5em; font-size: .7rem; line-height: 1.4; color: #65715f; }
.shakkei-visitors-empty { font-size: .85rem; color: #65715f; }
.shakkei-played-visitors { border-top: 1px solid #d3d8ca; margin-top: 1rem; padding-top: .75rem; }
.shakkei-played-visitors h3 { margin: 0 0 .75rem; font: 1.1rem Georgia, serif; }
.shakkei-played-visitors > p { font-size: .85rem; color: #65715f; }
.game--shakkei .game-grid { grid-template-columns: minmax(0, 1fr) 16rem; }
.game--shakkei .workbench-actions { max-height: 16rem; overflow-y: auto; }
.playtest-page, .playtest-feedback { max-width: 55rem; margin: 2rem auto; }
.playtest-card { padding: .8rem 1rem; margin: 1rem 0; border: 1px solid #d3d8ca; border-radius: 6px; }
.playtest-card h2 { margin-top: 0; }
.playtest-page textarea, .playtest-feedback textarea { width: 100%; max-width: 40rem; }
.playtest-feedback { padding: 1rem; border: 1px solid #d3d8ca; border-radius: 8px; }
@media(max-width: 760px) { .game--shakkei .game-grid { grid-template-columns: 1fr; } }