/* Approved action concept: persistent wall preview and outward cyan light sweep. */
.action-hints-layer{position:absolute;inset:0;z-index:7;pointer-events:none;overflow:visible}
.action-hint-cell{position:absolute;container-type:size;pointer-events:none}
.action-move-marker{position:absolute;inset:18%;display:grid;place-items:center;filter:drop-shadow(0 0 3px #42d8ff66)}
.action-chevron-vector{width:100%;height:100%;overflow:visible;transform:rotate(var(--direction));transform-origin:center}
.action-chevron-base{fill:#58cdf7;fill-opacity:.4;stroke:#71dfff;stroke-opacity:.65;stroke-width:.45}
.action-chevron-train{animation:action-marker-drift 2.4s ease-in-out infinite;animation-delay:var(--hint-delay)}
.action-chevron-sweep{animation:action-marker-sweep 2.4s linear infinite;animation-delay:var(--hint-delay);filter:drop-shadow(0 0 1px #a4f3ff)}
@keyframes action-marker-sweep{from{transform:translateX(-26px)}to{transform:translateX(56px)}}
@keyframes action-marker-drift{0%,100%{transform:translateX(-.8px)}50%{transform:translateX(.8px)}}
.action-wall-preview{position:absolute;inset:7%;border-radius:2px;filter:drop-shadow(0 2px 2px #0008)}
.action-wall-material{position:absolute;inset:0;background-image:url('assets/bulkhead-volume.png');background-size:100% 100%;opacity:.34;filter:sepia(.35) saturate(.7) brightness(1.1)}
.action-wall-outline{position:absolute;inset:-1%;width:102%;height:102%;overflow:visible;filter:drop-shadow(0 0 2px #efb34e88)}
.action-wall-outline path{fill:#d59c3a0a;stroke:#e8ba69;stroke-width:1.15;vector-effect:non-scaling-stroke}
.action-wall-outline .preview-brackets{fill:none;stroke:#ffe3a0;stroke-width:1.5;opacity:.9}
.tile.reachable.infected:after{border-color:#e6b86899;background:transparent}
body:has(dialog[open]) .action-hints-layer{visibility:hidden}
@media(prefers-reduced-motion:reduce){.action-chevron-train,.action-chevron-sweep{animation:none!important}.action-chevron-sweep{transform:translateX(11px)}}

/* New colony material follows the approved title illustration: three singles, three mature clusters. */
#single-creeper-probe,.legend-art.infection-art{background-image:url('assets/infection-colony-v2.png')}
.legend-art.infection-art{background-position:0 0;background-size:300% 200%}

/* Lighting, cast shadows and tall connected bulkheads from the approved concept. */
.field-panel{--map-width:min(calc(100cqw - 88px),calc((100cqh - 88px)*16/15));background:radial-gradient(ellipse at 45% 32%,#25313a,#0a1015 75%)}
.board-coordinate-wrap:before{inset:-14px;border:1px solid #65737b;box-shadow:inset 0 2px #b6c5c83d,inset 0 -4px 7px #000d,0 0 0 3px #080e12,0 8px 24px #000c;background:repeating-linear-gradient(90deg,#1c252d 0 18px,#59646b 18px 20px,#080f14 20px 32px,#2b353b 32px 60px)}
.board{box-shadow:0 0 0 2px #090e12,0 0 0 4px #4c5961,inset 0 0 24px #000c,0 5px 18px #000c}
.tile .deck-art{filter:brightness(var(--deck-light,.9)) saturate(.76)}
.tile.infected .deck-art{filter:brightness(calc(var(--deck-light,.9)*.8)) saturate(.7)}
.tile.safe .deck-art{filter:brightness(var(--deck-light,.9)) saturate(.68) sepia(.15) hue-rotate(18deg)}
.tile.selected .deck-art{filter:brightness(calc(var(--deck-light,.9)*.97)) saturate(.76)}
.tile:hover:not(:disabled) .deck-art{filter:brightness(calc(var(--deck-light,.9) + .06)) saturate(.8)}
.scene-lighting{position:absolute;inset:0;z-index:1;pointer-events:none;box-shadow:inset 0 0 35px #01050b99;background:radial-gradient(ellipse at 36% 23%,#c1dce422,transparent 64%),linear-gradient(130deg,transparent 30%,#03091638 100%),radial-gradient(ellipse at 50% 46%,transparent 36%,#01050a80 100%)}
.scene-lighting:after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 0 12%,#eaa34930,transparent 12%),radial-gradient(ellipse at 0 36%,#eaa34920,transparent 10%),radial-gradient(ellipse at 0 65%,#eaa34920,transparent 10%),radial-gradient(ellipse at 0 88%,#eaa34930,transparent 12%),radial-gradient(ellipse at 100% 12%,#eaa34930,transparent 12%),radial-gradient(ellipse at 100% 36%,#eaa34920,transparent 10%),radial-gradient(ellipse at 100% 65%,#eaa34920,transparent 10%),radial-gradient(ellipse at 100% 88%,#eaa34930,transparent 12%)}
.scene-rim-lights{position:absolute;inset:0;z-index:10;pointer-events:none}
.scene-rim-light{position:absolute;left:-9px;width:3px;height:5.5%;translate:0 -50%;border:1px solid #c98c3e;border-radius:2px;background:linear-gradient(90deg,#9e5d26,#ffe2a0,#d99a49);box-shadow:0 0 5px #ffd087d9,0 0 17px 4px #d28b333b}
.scene-rim-light:nth-child(n+5){left:auto;right:-9px}
.colonist-cast-shadow{display:block;position:absolute;left:50%;top:48%;translate:-50% -50%;width:92cqw;height:92cqw;max-width:108cqh;max-height:108cqh;transform-origin:50% 83%;transform:skewX(35deg) scaleY(-.48);background-image:url('assets/colonist-idle.png');background-size:400% 200%;background-repeat:no-repeat;filter:brightness(0) blur(.9cqw);opacity:.47;animation:idle-frames var(--idle-duration,7s) steps(1,end) infinite;animation-delay:var(--idle-delay,0s);pointer-events:none}
.colonist-contact-shadow{position:absolute;left:25%;top:76%;width:52%;height:15%;border-radius:50%;background:radial-gradient(ellipse,#000b 0,#0008 36%,transparent 72%);filter:blur(.6cqw);pointer-events:none}
.colonist-instance .colonist-art{filter:brightness(1.03) saturate(.86) drop-shadow(-.5px -.5px .7px #dbeaff22)}
.colonist-instance.active-colonist .colonist-art{filter:brightness(1.05) saturate(.86) drop-shadow(0 0 2px #64bbdf77)}
.tile.selected{z-index:4}
.wall-network{z-index:5;filter:none}
.wall-cast-shadow{fill:#000;opacity:.58;filter:url(#scene-soft-shadow)}
.wall-ground-contact{fill:#020609;stroke:#000;stroke-width:9;opacity:.75;filter:url(#scene-contact-shadow)}
.wall-front-face{stroke:#0a131a;stroke-width:1.6}
.wall-right-face{stroke:#0a1218;stroke-width:1.5}
.wall-front-texture{opacity:.38}
.wall-front-braces{fill:none;stroke:#0a131b;stroke-width:5;stroke-linecap:round}
.wall-front-ledge{fill:none;stroke:#c5a269;stroke-width:2.3;opacity:.72}
.wall-raised-cap .wall-face-light{opacity:.65}
.wall-raised-cap .wall-outline{stroke:#080e13;stroke-width:2.5}
.action-wall-material{background-image:none;opacity:.38;filter:none}
.action-wall-material .wall-network{inset:0;width:100%;height:100%;filter:sepia(.22)}
.action-wall-preview .action-wall-outline{transform:none}
@media(max-width:900px){.field-panel{--map-width:min(calc(100cqw - 54px),calc((100cqh - 54px)*16/15))}.board-coordinate-wrap:before{inset:-10px}.scene-rim-light{left:-7px;width:2px}.scene-rim-light:nth-child(n+5){right:-7px}}
@media(max-width:600px){.field-panel{--map-width:min(calc(100cqw - 34px),calc((100cqh - 38px)*16/15))}.board-coordinate-wrap:before{inset:-7px}.scene-rim-light{left:-5px;width:2px}.scene-rim-light:nth-child(n+5){right:-5px}.scene-lighting{box-shadow:inset 0 0 18px #01050b77}}

.mode-picker .mode-options{grid-auto-rows:1fr;align-items:stretch}.mode-picker .mode-option,.mode-picker .mode-option-surface{height:100%}
.scene-result{max-width:820px;padding:42px 46px 32px;border:4px solid #11191d;border-radius:7px;outline:1px solid #69777c;background:radial-gradient(ellipse at 100% 0,#71818a20,transparent 70%),linear-gradient(135deg,#293238,#1d262b 45%,#131b20);box-shadow:0 28px 100px #000e,0 0 0 7px #080d10,inset 0 2px #a8b2b444}
.scene-result:before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:repeating-linear-gradient(135deg,#bb9555 0 9px,#121a1e 9px 18px);opacity:.65}
.scene-result h2{font-size:40px;line-height:1.15;font-weight:650;letter-spacing:-.8px;color:#eff1ec;text-shadow:0 2px 3px #0008}
.scene-result p{font-size:19px;line-height:1.6;color:#c4cfd3}
#result-dialog.scene-result .skip-button{min-height:60px;font-size:20px;border-color:#c8ad74;background:linear-gradient(#53636a,#2d3c44);box-shadow:inset 0 2px #dae3e64d,inset 0 -4px #0e1b2499,0 4px 13px #0008;color:#f8f1df}
#result-dialog.scene-result .reset-button{font-size:14px;padding:9px 15px;color:#c3d0d6}
.scene-result button:focus-visible{outline:2px solid #d7b779;outline-offset:3px}
@media(max-width:600px){.scene-result{padding:28px 23px 22px}.scene-result h2{font-size:29px}.scene-result p{font-size:16px}}


/* Ground silhouettes and bodies share occlusion; identification remains above it. */
.colonist-visual{position:absolute;inset:0;container-type:size;pointer-events:none}
.colonist-instance .colonist-id{z-index:2}
/* Only the metal frame receives this fixed decorative mature tissue. */
.board-coordinate-wrap{--biomass-rim:clamp(8px,1.4cqw,32px)}
.board{z-index:1}
.frame-biomass{position:absolute;inset:0;z-index:0;pointer-events:none}
.frame-biomass-strip{position:absolute;overflow:hidden;pointer-events:none;filter:brightness(.78) saturate(.8)}
.frame-biomass-top,.frame-biomass-bottom{left:calc(-1*var(--biomass-rim));right:calc(-1*var(--biomass-rim));height:var(--biomass-rim)}
.frame-biomass-top{bottom:100%}.frame-biomass-bottom{top:100%}
.frame-biomass-left,.frame-biomass-right{top:0;bottom:0;width:var(--biomass-rim)}
.frame-biomass-left{right:100%}.frame-biomass-right{left:100%}
.frame-biomass-strip i{display:block;position:absolute;width:calc(var(--biomass-rim)*var(--clump));aspect-ratio:1;background-image:url('assets/infection-colony-v2.png');background-size:300% 200%;background-position:var(--frame) 100%;background-repeat:no-repeat;transform:rotate(var(--turn));filter:drop-shadow(1px 2px 2px #000b);animation:frame-breath 8s ease-in-out infinite;animation-delay:var(--pulse)}
.frame-biomass-top i,.frame-biomass-bottom i{left:var(--at);top:50%;translate:-50% -50%}
.frame-biomass-left i,.frame-biomass-right i{top:var(--at);left:50%;translate:-50% -50%}
@keyframes frame-breath{0%,100%{opacity:.9;scale:1}50%{opacity:1;scale:1.025}}
.mode-option input:checked+.mode-option-surface{background:linear-gradient(140deg,#45515a,#2c3840);box-shadow:inset 0 1px #dfe6e92c,inset 0 -2px #0d171d66,0 0 0 1px #d2b77c33,0 3px 9px #0006}
.mode-option input:checked+.mode-option-surface small{color:#c2cbd0}
.mode-option:hover input:checked+.mode-option-surface{background:linear-gradient(140deg,#52616b,#34434d)}
@media(max-width:600px){.board-coordinate-wrap{--biomass-rim:8px}}
@media(prefers-reduced-motion:reduce){.frame-biomass-strip i{animation:none}}

/* Square sections share one solid backing and shadows below every wall.
   A diagonal contact has no separate cast shadow or dark vertical seam. */
.wall-square-network .wall-solid{fill:#26343e;stroke:none}
.wall-square-network .wall-front-face,.wall-square-network .wall-right-face{stroke:none}
.wall-square-network .wall-side-outline{fill:none;stroke:#0a131a;stroke-width:1.5;stroke-linejoin:miter}

/* Hover never brings the deck above the organic layer or a fallen helmet. */
.tile.infected:hover:not(:disabled){box-shadow:none}
.tile.infected:hover:not(:disabled) .deck-art{filter:brightness(calc(var(--deck-light,.9)*.8)) saturate(.7)}

/* Cyan construction preview: solid wall geometry, distinct from live biomass. */
.action-wall-material{opacity:.9;filter:none}
.action-wall-material .wall-network{filter:none}
.action-wall-material .wall-frame-slice{display:none}
.action-wall-material .wall-face{fill:#437d97}
.action-wall-material .wall-face-light{opacity:.4}
.action-wall-material .wall-outline{stroke:#99eaff;stroke-width:3}
.action-wall-material .wall-front-face{fill:#254b62}
.action-wall-material .wall-right-face{fill:#183c51}
.action-wall-material .wall-front-ledge{stroke:#9bebff}
.action-wall-outline{filter:drop-shadow(0 0 2px #75e6ff88)}
.action-wall-outline path{fill:#75e6ff10;stroke:#75e6ff;stroke-width:1.5}
.action-wall-outline .preview-brackets{stroke:#b1f4ff;stroke-width:2;opacity:1}
.tile.reachable.infected:after{border-color:#75e6ffcc;background:#52cfff14}
.direction-pad .attack-direction{border-color:#75e6ff;color:#c6f4ff;background:linear-gradient(#20495c,#122f40)}