#Pompeji2{box-sizing:border-box;width:100%;min-width:0;max-width:none;margin:auto;padding:.5rem;container:pompeji-board / inline-size}.pompejiPlayers{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:.5rem;margin-bottom:.5rem}.pompejiPlayer{border-left:.6rem solid currentColor;background:#f3e4c8;padding:.45rem;display:flex;gap:.45rem;align-items:center}.pompejiPlayerCounts{margin-left:auto;display:flex;gap:.6rem;color:#222}.pompejiCounter{display:inline-flex;align-items:center;gap:.2rem;font-size:.9rem}.pompejiCounter img{width:auto;height:20px;object-fit:contain}.pompejiPlayer.isOnTurn{box-shadow:0 0 0 3px #fff,0 0 0 5px currentColor}.pompejiTable{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,1fr);gap:.75rem;align-items:start}.pompejiBoard{container:pompeji-cells / inline-size;position:relative;aspect-ratio:800/567;overflow:hidden}.pompejiCell{position:absolute;border:0;background:transparent;padding:0;z-index:4}.pompejiCell.active,.pompejiCell:focus-visible{outline:3px solid #ffe600;background:#ffe60044;z-index:5}.pompejiLava,.pompejiPiece{position:absolute;object-fit:contain;pointer-events:none}.pompejiLava{z-index:1}.pompejiPiece{z-index:2}.pompejiSide{background:#deb887;padding:clamp(.4rem,1cqw,1rem);min-width:0;display:grid;grid-template-columns:minmax(0,1fr);gap:.6rem;container:pompeji-supply / inline-size;font-size:clamp(.8rem,1.4cqw,1.25rem)}.pompejiHand{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.35rem;align-items:start;min-width:0}.pompejiCard{min-width:0;border:0;background:none;padding:0}.pompejiCard img{width:100%;height:auto}.pompejiCard.active{outline:3px solid #ffe600}.pompejiSupply{min-width:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem;align-items:start}.pompejiColor0{color:#d83c35}.pompejiColor1{color:#2876c8}.pompejiColor2{color:#b88b00}.pompejiColor3{color:#222}

.pompejiPhase{grid-column:1/-1;padding:.5rem;margin:0;background:#fff3d1;border:2px solid #876835;font-weight:bold}.pompejiPhase.withRelatives{background:#def0cf;border-color:#47752a}
.pompejiLogPlacement{display:inline-flex;align-items:center;gap:.35rem}.pompejiLogCard{display:inline-flex;flex:none;vertical-align:middle}#log .action .pompejiLogCard img{position:static;width:26px;height:26px;max-width:none;object-fit:contain}#log .action .pompejiLogPiece{width:20px;height:25px;object-fit:contain}.pompejiLogPhase{display:inline-flex;gap:.5rem;align-items:center;padding:.25rem .4rem;background:#fff3a8;border-left:3px solid #a67c00}#log .action .pompejiLogEruptionCard{width:32px;height:auto}


.pompejiStack{align-self:start;position:relative;display:inline-block;width:clamp(32px,32cqw,150px);max-width:calc(100% - 10px);grid-column:1;grid-row:1;justify-self:start;margin:5px;line-height:0;box-shadow:2px 2px 0 #715a40,4px 4px 0 #efe1c8,6px 6px 0 #715a40;border-radius:3px;container:pompeji-stack / inline-size}.pompejiStack img{width:100%;height:auto}.pompejiStack strong{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#fff9e9;color:#211b14;border:1px solid #715a40;border-radius:50%;padding:6cqw;min-width:0;line-height:1.3;text-align:center;font-size:38cqw}.pompejiDrawnLava{width:clamp(32px,32cqw,150px);max-width:100%;height:auto;grid-column:2;grid-row:1}
body.pompejiGame #log .move.color0{background:#d83c35;color:#fff}body.pompejiGame #log .move.color1{background:#2876c8;color:#fff}body.pompejiGame #log .move.color2{background:#e4b51a;color:#000}body.pompejiGame #log .move.color3{background:#222;color:#fff}body.pompejiGame #log .move{ text-shadow:none }

.pompejiPlayer{flex-wrap:wrap}.pompejiPlayerCounts{flex-wrap:wrap}.pompejiLavaCounts{grid-column:1/-1;grid-row:2;min-width:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.3rem}.pompejiLavaCounts small{grid-column:1/-1;color:#382900}.pompejiLavaCount{container:pompeji-tile / inline-size;position:relative;display:block;min-width:0}.pompejiLavaCount img{display:block;width:100%;height:auto}.pompejiLavaCount strong{font-size:30cqw;position:absolute;right:1px;bottom:1px;background:#fff9e9;border-radius:50%;min-width:1.3em;text-align:center;color:#211b14}.pompejiLavaCount.isEmpty{opacity:.4}
.pompejiCell.pompejiMoveSource.active{outline:2px solid #f3cd4c;background:#f3cd4c20}.pompejiCell.pompejiSelectedSource{outline:.4cqw solid #16b9dc;background:#16b9dc44;z-index:6}.pompejiCell.pompejiMoveTarget.active{outline:.3cqw solid #56db64;background:#56db6444;z-index:5}.pompejiCell.pompejiQuickSource.active{outline:2px dashed #f3cd4c;background:transparent}
.pompejiGateTarget{position:absolute;z-index:8;transform:translate(-50%,-50%);width:5.5%;min-width:28px;aspect-ratio:1;border:2px solid #577231;border-radius:50%;padding:2px;background:#f4edd5;box-shadow:0 1px 4px #2e3618a0;cursor:default;opacity:.65}.pompejiGateTarget.isReachable{opacity:1;border-color:#237b35;background:#f7ffca;box-shadow:0 0 0 3px #4dba46,0 2px 5px #0008;cursor:pointer}.pompejiGateTarget img{width:100%;height:100%;display:block;pointer-events:none}.pompejiGateTarget:enabled:hover,.pompejiGateTarget:focus-visible{background:#e1edb5;outline:3px solid #547128}

#log .action .pompejiLogLava{width:38px;height:38px}#log .action .pompejiLogVolcano{width:22px;height:22px}#log .action .pompejiLogSaved{width:28px;height:28px}.pompejiLogLosses,.pompejiLogLoss{display:inline-flex;align-items:center;gap:.3rem;flex-wrap:wrap}


.pompejiSide.isEscaping{grid-template-columns:minmax(0,1fr)}.isEscaping .pompejiHand{display:none}.pompejiSupply button{grid-column:1/-1;max-width:100%}

/* Keep a compact sidebar until the available game area requires stacking. */
@container pompeji-board (max-width:580px){
.pompejiTable{grid-template-columns:minmax(0,1fr)}
.pompejiSide{grid-template-columns:minmax(0,3fr) minmax(0,1fr)}
.pompejiHand{grid-template-columns:repeat(4,minmax(0,1fr))}
.pompejiSupply{grid-template-columns:minmax(0,1fr)}
.pompejiStack,.pompejiDrawnLava{width:clamp(32px,14cqw,130px)}
.isEscaping .pompejiSupply{grid-template-columns:minmax(0,1fr) minmax(0,4fr) minmax(0,1fr)}
.isEscaping .pompejiLavaCounts{grid-column:2;grid-row:1}
.isEscaping .pompejiDrawnLava{grid-column:3;grid-row:1}
}
@container pompeji-supply (max-width:240px){.pompejiLavaCounts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container pompeji-supply (min-width:450px){.isEscaping .pompejiLavaCounts{grid-template-columns:repeat(6,minmax(0,1fr))}}

.pompejiGateTarget.isBlocked{opacity:1;background:#d0bba0;border-color:#746454;box-shadow:none}

/* Selection stays within the original hit areas; artwork and pieces remain visible. */
.pompejiCard{position:relative;border-radius:8px;transition:box-shadow .15s,transform .15s}
.pompejiCard img{display:block;border-radius:inherit}
.pompejiCard.active{outline:none;box-shadow:0 0 0 2px #453514,0 0 0 5px #ffdf32,0 4px 9px #38250f66;cursor:pointer}
.pompejiCard.isSelected{box-shadow:0 0 0 2px #fff,0 0 0 6px #007f79,0 4px 10px #173e3966;transform:translateY(-3px)}
.pompejiCard:focus-visible{outline:3px solid #155e75;outline-offset:5px}
.pompejiCell.active{outline:none;background:#ffe13255;border-radius:1cqw;box-shadow:inset 0 0 0 .2cqw #463910,inset 0 0 0 .5cqw #ffe132,inset 0 0 0 .6cqw #fff8cb;cursor:pointer}
.pompejiCell:focus-visible{outline:3px solid #155e75;outline-offset:2px}
.pompejiCell.pompejiMoveSource.active,.pompejiCell.pompejiSelectedSource,.pompejiCell.pompejiMoveTarget.active,.pompejiCell.pompejiQuickSource.active{box-shadow:none}
.pompejiCell::after{content:attr(data-coordinate);display:none;position:absolute;left:4px;top:4px;padding:1px 3px;background:#fff7e6ed;border-radius:3px;color:#362914;font:600 clamp(9px,1.2cqw,15px)/1.2 sans-serif;pointer-events:none}
.showCoordinates .pompejiCell.hasField::after,.pompejiCell.pompejiLogFocus::after{display:block}
.showCoordinates .pompejiCell.hasField{border:1px solid #513c2355;border-radius:4px}
.pompejiCell.pompejiLogFocus{outline:3px solid #1e8fa1;background:#46d2e733;z-index:7}
.pompejiCoordinateLink{display:inline;border:0;border-bottom:1px dotted #776039;background:transparent;padding:0 .15em;color:inherit;font:inherit;font-weight:bold;cursor:pointer}
.pompejiCoordinateLink:hover,.pompejiCoordinateLink:focus-visible{background:#e2f0ec;outline:2px solid #2a7971;border-radius:3px}
.pompejiResult{display:inline-flex;gap:.65rem;vertical-align:middle;margin-left:.35rem}
#log .gameResultDescription .pompejiCounter img{position:static;width:auto;height:24px;max-width:none;object-fit:contain}
@media(hover:hover){.pompejiCard.active:hover{transform:translateY(-3px);filter:brightness(1.04)}.pompejiCell.active:hover{background:#ffe13288}}
@media(pointer:coarse){.pompejiCoordinateLink{padding:.25em .4em}}
@media(prefers-reduced-motion:reduce){.pompejiCard{transition:none}}

.pompejiHand{gap:.8rem;padding:5px}
.pompejiCard.active::after{content:'▶';position:absolute;right:-5px;bottom:-5px;display:grid;place-items:center;width:24px;height:24px;border:2px solid #453514;border-radius:50%;background:#ffdf32;color:#302707;font:700 12px/1 sans-serif;pointer-events:none}
.pompejiCard.isSelected::after{content:'✓';background:#007f79;color:white;border-color:white}

.pompejiPlacementTarget{position:absolute;visibility:hidden;pointer-events:none}
.pompejiFlyingCitizen{z-index:10000;pointer-events:none;object-fit:contain;filter:drop-shadow(0 5px 4px #0005)}

.pompejiBoardVolcano{position:absolute;left:86%;top:0;width:14%;aspect-ratio:1;pointer-events:none;z-index:3}
.pompejiBoardVolcano>img{display:block;width:100%;height:100%;object-fit:contain}
.pompejiCrater{position:absolute;left:50%;top:43%;width:1px;height:1px;visibility:hidden}
#log .action .pompejiLogOmen{position:static;width:32px;height:auto;max-width:none}

.pompejiMotionOverlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3;overflow:visible}
.pompejiLavaEdge{stroke:#ff542f;stroke-width:3;stroke-linecap:round;filter:drop-shadow(0 0 3px #ff1a00);animation:pompejiEmber 2s ease-in-out infinite alternate}
.pompejiFootprint{opacity:1;stroke:#fff9e8;stroke-width:1.5;paint-order:stroke fill;filter:drop-shadow(0 1px 1px #21180ddd)}
.pompejiWalkingCitizen{z-index:7;filter:drop-shadow(0 2px 2px #0006)}
.pompejiFlowingLava{z-index:1;filter:drop-shadow(0 0 4px #ff5a24)}
@keyframes pompejiEmber{to{stroke:#ffad52;stroke-opacity:.65}}
@media(prefers-reduced-motion:reduce){.pompejiLavaEdge{animation:none}}

.pompejiCell.pompejiMoveSource.active{outline:.2cqw solid #3f310a;background:#ffe23233;box-shadow:inset 0 0 0 .35cqw #ffdf19,0 0 0 .1cqw #fff8d6}
.pompejiCell.pompejiQuickSource.active{outline:.25cqw dashed #ffdf19;box-shadow:inset 0 0 0 .1cqw #493916;background:#ffe23222}
.pompejiExitLayer{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:10000}

.pompejiOutsideTrails{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:6}

/* Keep the secret volcano interaction behind actual board targets. */
.pompejiBoardVolcano{pointer-events:auto;border:0;padding:0;background:transparent;touch-action:manipulation}
.pompejiBoardVolcano:focus-visible{outline:2px solid #ffe600;outline-offset:-8px;border-radius:50%}
.pompejiCell:not(.hasField):not(.active){pointer-events:none}
.pompejiHiccupRing{position:absolute;left:50%;top:40%;width:30%;height:14%;border:4px solid #fff5e6;border-radius:50%;box-shadow:0 0 12px #ffe680, inset 0 0 6px #ff9900;pointer-events:none;z-index:1}
.pompejiHiccupSmoke{position:absolute;left:50%;top:38%;border-radius:50%;pointer-events:none;z-index:2;filter:blur(7px);background:radial-gradient(circle at 40% 35%, rgba(65,60,55,0.85) 0%, rgba(45,40,38,0.7) 40%, rgba(30,28,25,0.45) 70%, transparent 100%)}
.pompejiHiccupEmber{position:absolute;border-radius:50%;pointer-events:none;z-index:5;background:#ffee55;box-shadow:0 0 6px #ff7700, 0 0 12px #ff2200;mix-blend-mode:screen}
.pompejiHiccupLavaOverlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:4;overflow:visible;mix-blend-mode:screen;filter:drop-shadow(0 2px 4px rgba(0,0,0,0.4))}
.pompejiHiccupCitizen{position:absolute;left:50%;top:43%;width:16%;height:22%;background:center/contain no-repeat;filter:drop-shadow(0 0 8px #ffffff) drop-shadow(0 4px 6px rgba(0,0,0,0.85));pointer-events:none;z-index:10}

.pompejiBoardArtwork{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}

.pompejiPendingOmen{outline:4px solid #e8aa34;box-shadow:0 0 15px #e96f29;border-radius:5px}
.pompejiOmenChoices{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;padding:.6rem;background:#fff1d5;border:2px solid #b26d2c;border-radius:12px;grid-column:1/-1}
.pompejiOmenChoices button{border:2px solid #8a642b;border-radius:50%;background:#fff9e8;width:52px;height:52px;padding:8px;cursor:pointer;box-shadow:0 2px 4px #0005}
.pompejiOmenChoices img{height:100%;width:100%;object-fit:contain}
.pompejiOmenChoices button:hover,.pompejiOmenChoices button:focus-visible{outline:3px solid #ffd633;transform:scale(1.1)}

/* Inactive board controls must not inherit Bootstrap's button hand cursor. */
#Pompeji2 .pompejiCard:not(.active),#Pompeji2 .pompejiCell:not(.active),#Pompeji2 button:disabled{cursor:default}
#Pompeji2 .pompejiCard.active:not(:disabled),#Pompeji2 .pompejiCell.active:not(:disabled){cursor:pointer}
/* Plain slate keeps the table quiet around the illustrated board. */
body.pompejiGame,
body.pompejiGame #game {
    background-color:#66777e;
    background-image:none;
}
body.pompejiGame .pompejiSide {
    background:linear-gradient(135deg,#ede1cc,#c9b79b);
    border:1px solid #9e876a;
    box-shadow:0 3px 12px #211c1633;
}
body.pompejiGame #log { background-color:#eee7db; color:#29251f; }

.pompejiTutorialLink { display: inline-flex; align-items: center; gap: .25rem; align-self: flex-start; margin-top: .5rem; }