/* Dev integration of Art81; approved image and Art stylesheet bytes stay intact. */
.site-bar { height: auto; flex-wrap: wrap; }
.site-bar nav { max-width: 100%; flex-wrap: wrap; }
.staging-strip { flex-wrap: wrap; }
.staging-strip > strong, .staging-strip > span { min-width: 0; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.feedback-banner { flex-wrap: wrap; }
.feedback-banner > div { min-width: 0; overflow-wrap: anywhere; }
.progress-player { min-width: min(100%, 15rem); grid-template-columns: 40px minmax(0,1fr) auto; }
.progress-player strong, .progress-player small { white-space: normal; overflow-wrap: anywhere; }
.game-screen .board-legend { grid-template-columns: repeat(auto-fit,minmax(min(100%,9rem),1fr)); }
.setup-card .player-list { grid-template-columns: minmax(0,1fr); }
.setup-card .mode-grid.two-column, .setup-card .difficulty-row.two-column { grid-template-columns: repeat(auto-fit,minmax(min(100%,10rem),1fr)); }
.setup-card .mode-choice, .setup-card .difficulty-row label { min-width: 0; overflow-wrap: anywhere; }
.setup-card .player-count { max-width: 100%; flex-wrap: wrap; justify-content: center; }
.setup-card .player-count output { min-width: 0; overflow-wrap: anywhere; }
.player-icon-picker [role="combobox"] > span:nth-child(2), .player-icon-options [role="option"] > span:last-child { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.player-list .player-row { grid-template-columns: repeat(auto-fit,minmax(min(100%,16rem),1fr)); }
.setup-card .player-row > .icon-choice, .setup-card .player-row > .color-choice { grid-column: auto; grid-row: auto; }
.setup-card .player-row > .color-choice { padding: 0; margin: 0; border: 0; background: transparent; box-shadow: none; }
.color-choice { min-width: 0; padding: 0; border: 0; margin: 0; }
.color-choice legend { margin-bottom: .4rem; font-weight: 700; }
.color-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .4rem; }
.color-grid button { display: flex; flex-direction: column; align-items: center; justify-content: start; gap: .3rem; min-height: 64px; min-width: 0; padding: .4rem .2rem; color: #fff0cc; background: linear-gradient(145deg,#244d73,#10243d); border: 1px solid #bd8a3d; border-radius: 7px 10px 6px 9px; font: 600 .875rem/1.25 Georgia,serif; overflow-wrap: anywhere; }
.color-swatch { display: grid; place-items: center; width: 26px; height: 26px; background: var(--swatch); color: #111; border: 2px solid #fff0cc; border-radius: 50%; box-shadow: 0 0 0 1px #161616; text-shadow: 0 0 2px #fff,1px 1px #fff,-1px -1px #fff; font-weight: 900; }
.color-grid [aria-checked="true"] { outline: 2px solid #ffdb81; outline-offset: 1px; background: #30485a; }
.color-grid [aria-disabled="true"], .player-icon-options [aria-disabled="true"] { border-style: dashed; cursor: not-allowed; }
.player-icon-options [aria-disabled="true"] { color: #d5cbb5; }
.identity-preview { display: flex; align-items: center; gap: 1rem; padding: .85rem; margin-top: .75rem; border: 1px solid #ad884f; border-radius: 8px; background: #19354b; color: #fff0cc; }
.identity-preview .token-crop { width: 64px; height: 72px; flex-basis: 64px; }
.identity-preview span { overflow-wrap: anywhere; }
.token-crop[data-color-id]:not([data-color-id=""]) { position: relative; isolation: isolate; }
.token-crop[data-color-id]:not([data-color-id=""])::after { content: ""; position: absolute; z-index: -1; left: 16%; right: 16%; bottom: 3%; height: 9%; border-radius: 50%; background: var(--identity-color); box-shadow: 0 0 4px 1px var(--identity-color),0 1px 2px #15110c; opacity: .7; }
.token-crop[data-color-id]:not([data-color-id=""]) img { filter: drop-shadow(0 0 1px #fff1cf) drop-shadow(0 0 1px #231b13) drop-shadow(0 0 2px var(--identity-color)) drop-shadow(0 2px 2px #10182080); }
.game-layout .player-stack .active-token { z-index: 20 !important; }
.active-token .token-crop img { filter: drop-shadow(0 0 1px #fff1cf) drop-shadow(0 0 1px #211b12) drop-shadow(0 0 3px var(--identity-color)) drop-shadow(0 2px 2px #10182080); }
.game-layout .board-space .player-stack, .game-layout .start-node .player-stack { width: 74px; height: 52px; top: calc(50% - 14px); left: 50%; transform: translate(-50%,-100%); }
.game-layout .player-stack .token-slot, .game-layout .player-stack .token-crop { width: 26px; height: 34px; }
.game-layout .player-stack .token-slot[data-slot="0"] { left: 16px; bottom: 0; z-index: 8; }
.game-layout .player-stack .token-slot[data-slot="1"] { left: 0; bottom: 1px; z-index: 7; }
.game-layout .player-stack .token-slot[data-slot="2"] { left: 32px; bottom: 1px; z-index: 6; }
.game-layout .player-stack .token-slot[data-slot="3"] { left: 48px; bottom: 0; z-index: 5; }
.game-layout .player-stack .token-slot[data-slot="4"] { left: -6px; bottom: 22px; z-index: 4; }
.game-layout .player-stack .token-slot[data-slot="5"] { left: 12px; bottom: 22px; z-index: 3; }
.game-layout .player-stack .token-slot[data-slot="6"] { left: 30px; bottom: 22px; z-index: 2; }
.game-layout .player-stack .token-slot[data-slot="7"] { left: 48px; bottom: 22px; z-index: 1; }
.game-layout .player-stack[data-count="1"] .token-slot { left: 24px; }
.game-layout .player-stack .stack-count { top: -30px; left: 43px; z-index: 22; height: auto; min-width: 30px; white-space: nowrap; font: 700 1rem/1.25 Georgia,serif; }
.game-layout .ladder .player-stack { top: 50%; left: -10px; transform: translate(-100%,-50%); height: 32px; width: 94px; }
.game-layout .ladder .player-stack .token-slot, .game-layout .ladder .player-stack .token-crop { width: 23px; height: 28px; }
.game-layout .ladder .player-stack .token-slot { bottom: 0; }
.game-layout .ladder .player-stack .token-slot[data-slot="0"] { left: 24px; }
.game-layout .ladder .player-stack .token-slot[data-slot="1"] { left: 0; }
.game-layout .ladder .player-stack .token-slot[data-slot="2"] { left: 48px; }
.game-layout .ladder .player-stack .token-slot[data-slot="3"] { left: 72px; }
.game-layout .ladder .player-stack .token-slot[data-slot="4"] { left: 0; bottom: 12px; }
.game-layout .ladder .player-stack .token-slot[data-slot="5"] { left: 24px; bottom: 12px; }
.game-layout .ladder .player-stack .token-slot[data-slot="6"] { left: 48px; bottom: 12px; }
.game-layout .ladder .player-stack .token-slot[data-slot="7"] { left: 72px; bottom: 12px; }
.game-layout .ladder .player-stack .stack-count { left: 24px; top: -34px; }
.game-layout .ladder .board-space[data-space="50"] .player-stack .stack-count { top: 32px; }
.players-here { margin: 1rem 0; padding: .8rem; color: #fff0cc; background: repeating-linear-gradient(4deg,#fff7d30a 0 1px,transparent 1px 7px),linear-gradient(145deg,#244d73,#10243d); border: 1px solid #bd8a3d; border-radius: 8px 11px 7px 10px; scroll-margin-top: 1rem; }
.players-here-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
.players-here h3 { color: inherit; margin: 0; }
.players-here button { min-height: 44px; }
#players-here-list { list-style: none; max-height: 24rem; overflow-y: auto; padding: .25rem; margin: .5rem 0; }
#players-here-list li { display: flex; gap: .75rem; align-items: center; padding: .5rem; border-bottom: 1px solid #a8905960; }
#players-here-list li div { display: grid; gap: .2rem; min-width: 0; overflow-wrap: anywhere; }
#players-here-list .active-player { border: 2px solid #f3dcaa; border-radius: 7px; }
.board-space[role="button"], .start-node[role="button"] { cursor: pointer; }
.board-space[role="button"]::before { content: ""; position: absolute; inset: -10px; min-width: 44px; min-height: 44px; }
.game-screen .current-player-card { scroll-margin-top: .75rem; }
.game-screen .turn-controls .spinner-card, .game-screen .turn-controls .spinner-card.spin-ready { color: #fff0cc; background: repeating-linear-gradient(4deg,#fff7d30a 0 1px,transparent 1px 7px),linear-gradient(145deg,#244d73,var(--vv-r30-indigo,#10243d)); border: 1px solid #bd8a3d; box-shadow: inset 0 0 0 1px #ffe7aa1a,0 4px 0 #061525,0 9px 16px #0000003d; }
.game-screen .turn-controls .spinner-card #spinner-status { color: #fff0cc; }
.game-screen #answer-form > button[type="submit"] { width: 100%; min-height: 64px; font: 700 clamp(1.6rem,3vw,2rem)/1.2 Georgia,serif; letter-spacing: .04em; }
.high-contrast .token-crop[data-color-id] img { filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 2px #000) drop-shadow(0 0 1px #fff); }
.high-contrast .token-crop[data-color-id]::after { border: 1px solid #fff; outline: 1px solid #000; box-shadow: none; }
.high-contrast .color-grid button, .high-contrast .players-here { color: #fff; background: #102030; border: 2px solid #fff; }
.reduce-motion .token-crop, .reduce-motion .token-crop::after, .reduce-motion .board-space.current::after { animation: none !important; transition: none !important; }
@media (max-width: 1000px) { .player-list .player-row { grid-template-columns: minmax(0,1fr); } .color-grid { grid-template-columns: repeat(5,minmax(0,1fr)); } }
@media (max-width: 400px) { .color-grid { grid-template-columns: repeat(4,minmax(0,1fr)); } }
@media (prefers-reduced-motion: reduce) { .token-crop, .token-crop::after, .board-space.current::after { animation: none !important; transition: none !important; } }
@media (forced-colors: active) { .color-grid button, .players-here, .game-screen .turn-controls .spinner-card { color: CanvasText; background: Canvas; border: 2px solid CanvasText; } .color-swatch { forced-color-adjust: none; } .token-crop[data-color-id] img { filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 2px #000); } .color-grid [aria-checked="true"] { outline: 3px solid Highlight; } }