body.heptalionGame #game {
    /* Keep fit() independent of vertical overflow, including on older browsers. */
    overflow-y:scroll;
    padding:8px; color:#e5edf0; background-color:#101c25;
    background-image:radial-gradient(ellipse at 18% 35%,#23677555,transparent 60%),
        radial-gradient(ellipse at 90% 85%,#b1763533,transparent 55%),
        repeating-linear-gradient(45deg,transparent 0 63px,#b5ced407 63px 64px),
        repeating-linear-gradient(-45deg,transparent 0 63px,#b5ced407 63px 64px);
}
@supports (scrollbar-gutter:stable) {
    body.heptalionGame #game { overflow-y:auto; scrollbar-gutter:stable; }
}
body.heptalionGame #board { width:100%; margin:auto; }
#Heptalion { --hp-board:500px; display:flex; justify-content:center; align-items:center; gap:14px; margin:auto; font-family:system-ui,sans-serif; }
#Heptalion .hpBoard { position:relative; width:var(--hp-board); height:var(--hp-board); flex:none; background:radial-gradient(ellipse,#588b9040 0%,#20495728 48%,transparent 72%); filter:drop-shadow(0 12px 14px #0005); }
#Heptalion .hpBoardOutline { position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; filter:drop-shadow(0 3px 2px #0009); }
#Heptalion .hpBoardOutline path { fill:none; stroke:url(#hpBoardRim); stroke-width:.12; stroke-linecap:round; }
#Heptalion .hpCell { position:absolute; width:9.09091%; height:9.09091%; display:grid; place-items:center; border:1px solid #74818b; border-radius:2px; padding:0; background:linear-gradient(135deg,#1c2730,#0e141b); opacity:1; cursor:default; }
#Heptalion .hpCell .hpSymbol { font-size:calc(var(--hp-board) / 15); }
#Heptalion .hpCell.hpOccupied { visibility:hidden; }
#Heptalion .hpCell.hpDestination { background:linear-gradient(135deg,#2c535b,#203e46); border-color:#74818b; }
#Heptalion .hpPlaced { position:absolute; border:2px solid #b1a591; border-radius:5px; background:linear-gradient(125deg,#f5eedf,#cfc3ad); box-shadow:inset 0 0 0 3px #e9e0cf; pointer-events:none; }
#Heptalion .hpPlaced.hpLast { border-color:#635030; box-shadow:inset 0 0 0 3px #c8ac74; }
#Heptalion .hpAside { width:296px; flex:none; }
#Heptalion .hpTitle { text-align:center; font-size:27px; letter-spacing:-1px; color:#f4f5ed; line-height:1.1; margin:0; }
#Heptalion .hpTitle>span { color:#ed7900; }
#Heptalion .hpPlayers { display:grid; gap:7px; }
#Heptalion .hpPlayer { padding:8px; border:1px solid #768c9b; border-left:4px solid var(--hp-color); border-radius:8px; background:linear-gradient(130deg,#354b5c,#293d4d); color:#edf2f5; box-shadow:inset 0 1px 0 #ffffff12,0 5px 14px #0003; }
#Heptalion .hpPlayer.hpOnTurn { box-shadow:0 0 0 2px var(--hp-color),0 6px 18px #0004; }
#Heptalion .hpPlayer header { display:flex; align-items:center; gap:3px; font-size:14px; margin-bottom:6px; }
#Heptalion .hpPlayer strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#Heptalion .hpCount { margin-left:auto; white-space:nowrap; font-size:12px; }
#Heptalion .hpRack { display:flex; flex-wrap:wrap; align-items:flex-start; gap:8px 16px; }
#Heptalion .hpAvailableTiles,#Heptalion .hpBlockedTiles { display:flex; flex-wrap:wrap; gap:4px; max-width:100%; }
#Heptalion .hpBlockedTiles { margin-left:auto; justify-content:flex-end; }
#Heptalion .hpAvailableTiles:empty,#Heptalion .hpBlockedTiles:empty { display:none; }
#Heptalion .hpTile,body.heptalionGame #log .hpLog .hpTile { display:inline-flex; align-items:center; justify-content:center; flex:none; width:34px; height:48px; flex-direction:column; border:1px solid #6d7279; border-radius:4px; background:#11151c; padding:1px; opacity:1; cursor:default; vertical-align:middle; }
#Heptalion .hpTile .hpSymbol,body.heptalionGame #log .hpLog .hpTile .hpSymbol { font-size:24px; line-height:.9; }
#Heptalion .hpSymbol,body.heptalionGame #log .hpLog .hpSymbol { font-family:Arial,sans-serif; font-weight:bold; line-height:1; text-align:center; }
#Heptalion .hpSymbol0,body.heptalionGame #log .hpLog .hpSymbol0 { color:#ff4040; }
#Heptalion .hpSymbol1,body.heptalionGame #log .hpLog .hpSymbol1 { color:#ff9400; }
#Heptalion .hpSymbol2,body.heptalionGame #log .hpLog .hpSymbol2 { color:#6778ff; }
#Heptalion .hpSymbol3,body.heptalionGame #log .hpLog .hpSymbol3 { color:#fbf323; }
#Heptalion .hpSymbol4,body.heptalionGame #log .hpLog .hpSymbol4 { color:#33ef41; }
#Heptalion .hpSymbol5,body.heptalionGame #log .hpLog .hpSymbol5 { color:#21e8ee; }
#Heptalion .hpSymbol6,body.heptalionGame #log .hpLog .hpSymbol6 { color:#fff; }
#Heptalion button.active:not(:disabled) { cursor:pointer; outline:2px solid #56d4b6; outline-offset:-2px; }
#Heptalion .hpTile.hpPlayable { background:#203b3c; border-color:#79e3c9; box-shadow:0 0 5px #56d4b655; }
#Heptalion .hpTile.hpBlocked,#Heptalion .hpTile.hpUnplayable { order:1; border:2px solid #ed7474; background:#301f26; }
#Heptalion .hpTile.hpBlocked .hpSymbol,#Heptalion .hpTile.hpUnplayable .hpSymbol { opacity:.4; filter:grayscale(.8); }
#Heptalion button.active:not(:disabled):hover,#Heptalion button.hpSelected { box-shadow:inset 0 0 0 3px #fff; }
#Heptalion .hpEdge { position:absolute; width:9.09091%; height:9.09091%; transform:translate(-50%,-50%); clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%); display:grid; place-items:center; border:0; padding:0; background:transparent; z-index:3; }
/* Diamond hit areas meet without overlapping, even where legal edges share a cell. */
#Heptalion .hpEdge.active:not(:disabled) { outline:0; box-shadow:none; }
#Heptalion .hpEdge::after { content:''; width:6px; height:55%; border-radius:4px; background:#ff9400; box-shadow:0 0 0 2px #101820; }
#Heptalion .hpEdgeHorizontal::after { width:55%; height:6px; }
#Heptalion .hpEdge.active:not(:disabled):hover::after { background:#fff; }
#Heptalion .hpEdge:focus-visible::after { background:#ffbb65; }
#Heptalion .hpTarget { position:absolute; box-sizing:border-box; border:3px solid #f5eedf; border-radius:5px; background:transparent; pointer-events:none; z-index:2; }
#Heptalion button:focus-visible { outline:3px solid #ffbb65; outline-offset:2px; z-index:2; }
#Heptalion .hpEliminated .hpTile .hpSymbol { opacity:.4; }
#Heptalion .hpBack { color:#a69a82; background:repeating-linear-gradient(45deg,#3b3935,#3b3935 3px,#46433c 3px,#46433c 6px); }
#Heptalion .hpDiscard { display:flex; align-items:center; gap:8px; font-size:12px; margin-top:6px; }
#Heptalion .hpDiscard:empty { display:none; }
#Heptalion .hpColor0 { --hp-color:#3477b8; } #Heptalion .hpColor1 { --hp-color:#bf4c4c; } #Heptalion .hpColor2 { --hp-color:#408456; } #Heptalion .hpColor3 { --hp-color:#895ba4; }
#Heptalion.hpStack { flex-direction:column; gap:8px; }
#Heptalion.hpStack .hpAside { width:100%; order:-1; }
#Heptalion.hpStack .hpTitle { font-size:25px; }
#Heptalion.hpStack .hpPlayers { grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
#Heptalion.hpStack .hpPlayer { padding:5px; }
#Heptalion.hpStack .hpTile { width:27px; height:39px; }
#Heptalion.hpStack .hpTile .hpSymbol { font-size:20px; }
#Heptalion.hpStack .hpAvailableTiles,#Heptalion.hpStack .hpBlockedTiles { gap:3px; }
body.heptalionGame #log .hpLog { display:inline-flex; flex-wrap:wrap; align-items:center; gap:6px; font-size:14px; }
body.heptalionGame #log .hpLog .hpTile { width:25px; height:35px; }
body.heptalionGame #log .hpLog .hpTile .hpSymbol { font-size:18px; }
body.heptalionGame #log .move.color0 { background:#dceafa; color:#194b7c; } body.heptalionGame #log .move.color1 { background:#fae0dd; color:#862f2f; } body.heptalionGame #log .move.color2 { background:#dceedd; color:#285c35; } body.heptalionGame #log .move.color3 { background:#eadff3; color:#623881; }
@media(max-width:480px) { #Heptalion.hpStack .hpPlayers { grid-template-columns:1fr; } #Heptalion.hpStack .hpTile { width:34px; height:48px; } #Heptalion.hpStack .hpTile .hpSymbol { font-size:24px; } }
@media(max-width:599px) {
    #Heptalion.hpStack .hpAside { display:contents; }
    #Heptalion.hpStack .hpBrand { order:-2; width:100%; }
    #Heptalion.hpStack .hpBoard { order:-1; }
    #Heptalion.hpStack .hpPlayers { width:100%; }
    #Heptalion.hpStack .hpDiscard { width:100%; }
}

#Heptalion .hpSymbol svg,body.heptalionGame #log .hpLog .hpSymbol svg { display:block; width:1em; height:1em; }

#Heptalion .hpBrand { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0 0 10px; }
#Heptalion .hpPublisher { display:block; flex:none; padding:3px 5px; border:1px solid #53616a; border-radius:5px; background:#26266b; }
#Heptalion .hpPublisherLogo { display:block; position:relative; width:108px; height:24px; }
#Heptalion .hpPublisherLogo::before { content:""; position:absolute; left:50%; top:50%; width:24px; height:108px; background:url('../images/nestorgames.png') center/contain no-repeat; transform:translate(-50%,-50%) rotate(90deg); }
#Heptalion .hpPublisher:hover { border-color:#f4bd76; }
#Heptalion .hpPublisher:focus-visible { outline:3px solid #ffbb65; outline-offset:3px; }
#Heptalion.hpStack .hpBrand { margin-bottom:7px; }
#Heptalion.hpStack .hpPublisherLogo { width:108px; height:24px; }
#Heptalion .hpAlmanac { display:grid; place-items:center; flex:none; width:34px; height:34px; padding:6px; border:1px solid #ad8756; border-radius:7px; color:#f4bd76; background:#28353e; cursor:pointer; }
#Heptalion .hpAlmanac svg { width:22px; height:22px; }
#Heptalion .hpAlmanac:hover,#Heptalion .hpAlmanac[aria-expanded="true"] { background:#40505a; border-color:#f4bd76; }
body.heptalionGame .hpAlmanacPopover { font-family:system-ui,sans-serif; --bs-popover-bg:#1b2b36; --bs-popover-border-color:#ad8756; --bs-popover-header-bg:#273b48; --bs-popover-header-color:#f4bd76; --bs-popover-body-color:#edf2f5; --bs-popover-max-width:340px; width:min(340px,calc(100vw - 16px)); box-shadow:0 12px 30px #0006; }
body.heptalionGame .hpAlmanacHeading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
body.heptalionGame .hpAlmanacPopover .popover-body { max-height:min(380px,calc(100dvh - 130px)); overflow-y:auto; }
body.heptalionGame .hpQuickRules { margin:0; font-size:13px; line-height:1.45; }
body.heptalionGame .hpQuickRules dt { color:#f4bd76; margin-bottom:3px; }
body.heptalionGame .hpQuickRules dd { margin:0 0 12px; }
body.heptalionGame .hpQuickRules dd:last-child { margin-bottom:0; }

#Heptalion .hpTutorialLink { display: block; margin: 8px; text-align: center; }