/* Scoped. History Is Told board games. Uses the site's Heebo font. */
.hitg-board-app{--bg-ink:#3d2530;--bg-wine:#612b42;--bg-cream:#fff9ed;--bg-gold:#b99a61;--bg-border:#d8c6a8;--bg-ivory:#f5e9d2;font-family:"Heebo",Arial,sans-serif;direction:rtl;color:var(--bg-ink);font-size:16px;line-height:1.55;max-width:1150px;margin:24px auto;isolation:isolate}
.hitg-board-app *, .hitg-board-app *::before, .hitg-board-app *::after{box-sizing:border-box}
.hitg-board-app :is(button,input,select){font-family:inherit;font-size:inherit}
.hitg-board-app button{cursor:pointer;touch-action:manipulation}
.hitg-board-app :is(button,input,select):focus-visible{outline:3px solid #136cab!important;outline-offset:3px!important;position:relative;z-index:2}
.hitg-board-app button:disabled{opacity:.54;cursor:not-allowed}
.hitg-board-app [hidden]{display:none!important}
.hitg-board-app .bg-shell{background:linear-gradient(160deg,#faf6ed,#f6eadc);border:1px solid #ddcbb1;border-radius:20px;box-shadow:0 14px 34px #3a152017;overflow:hidden;max-width:100%}
.hitg-board-app .bg-head{background:linear-gradient(105deg,#462034,#75334d);padding:18px clamp(16px,3vw,28px);display:flex;align-items:center;justify-content:space-between;gap:18px;color:#fff6e7}
.hitg-board-app .bg-head h2{font-family:inherit!important;font-size:clamp(24px,3vw,34px)!important;color:#fff6e7!important;font-weight:800;line-height:1.3;margin:0!important;padding:0!important}
.hitg-board-app .bg-head p{font-size:clamp(13px,1.8vw,16px);margin:5px 0 0;color:#f3d9df}
.hitg-board-app .bg-head-mark{font:normal 42px/1 "DejaVu Sans",serif;color:#edcd93}
.hitg-board-app .bg-setup{padding:clamp(18px,4vw,34px)}
.hitg-board-app .bg-setup h3{margin:0 0 15px!important;color:var(--bg-wine);font-size:23px;font-weight:800}
.hitg-board-app .bg-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.hitg-board-app .bg-choices button{padding:22px 14px;background:#fffdf8;color:var(--bg-wine);border:1px solid #d8c8af;border-radius:14px;font-size:22px;font-weight:800;box-shadow:0 6px 16px #42202610;min-height:110px;transition:transform .12s,border-color .12s}
.hitg-board-app .bg-choices button:hover{transform:translateY(-2px);border-color:#b08a51}
.hitg-board-app .bg-choices button span{display:block;font-size:13px;font-weight:500;color:#73565e;margin-top:6px}
.hitg-board-app .bg-join{margin-top:23px;display:grid;gap:9px;max-width:660px}
.hitg-board-app .bg-join label{font-weight:700}
.hitg-board-app .bg-join>div{display:flex;gap:8px}
.hitg-board-app .bg-join input{min-width:0;flex:1;max-width:440px;padding:10px 12px;min-height:48px;border-radius:9px;border:1px solid #baa68e;background:#fff}
.hitg-board-app :is(.bg-join button,.bg-invite button,.bg-top-actions button){background:var(--bg-wine);border:1px solid #653247;border-radius:10px;padding:10px 15px;color:#fff9ed;min-height:46px;font-weight:700;box-shadow:0 2px 4px #2c171b12}
.hitg-board-app .bg-play{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(235px,.85fr);gap:clamp(14px,3vw,30px);padding:clamp(12px,3vw,30px);align-items:start}
.hitg-board-app .bg-board-area{min-width:0;text-align:center}
.hitg-board-app .bg-status{display:table;width:auto;max-width:100%;margin:0 auto 13px;padding:9px 18px;border-radius:100px;background:#fffdf6;border:1px solid #c8af87;color:#58293e;font-weight:800;font-size:17px}
.hitg-board-app .bg-status.bg-ended{background:#f4e6c7}
.hitg-board-app .bg-board{margin:0 auto;display:grid;direction:ltr;min-width:0;width:min(100%,610px);border:5px solid #55263a;box-shadow:0 10px 25px #3a182731;overflow:hidden;touch-action:manipulation}
.hitg-board-app .bg-board.bg-checkers{grid-template-columns:repeat(8,minmax(0,1fr));grid-template-rows:repeat(8,minmax(0,1fr));aspect-ratio:1 / 1}
.hitg-board-app .bg-board.bg-connect4{grid-template-columns:repeat(7,minmax(0,1fr));grid-template-rows:repeat(6,minmax(0,1fr));aspect-ratio:7 / 6;background:#582742;gap:1px;padding:3px}
.hitg-board-app .bg-cell{appearance:none;display:flex;align-items:center;justify-content:center;position:relative;min-width:0;min-height:0;width:100%;height:100%;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;line-height:1!important;background:none;color:inherit;touch-action:manipulation}
.hitg-board-app .bg-cell.bg-light{background:#efe2ca!important}.hitg-board-app .bg-cell.bg-dark{background:#84475b!important}
.hitg-board-app .bg-cell.bg-well{background:#6d344f!important;aspect-ratio:1}
.hitg-board-app .bg-disc{display:grid;place-items:center;width:74%;aspect-ratio:1;border-radius:50%;border:2px solid #8b7f6f;box-shadow:inset -3px -5px 6px #29212225,inset 2px 3px 6px #ffffff7d,0 2px 4px #29142245;position:relative;pointer-events:none;font:700 clamp(13px,3.7vw,35px)/1 "DejaVu Sans",serif;z-index:1}
.hitg-board-app .bg-disc-first{background:radial-gradient(circle at 30% 27%,#fffdf3,#e6cfa7);border-color:#a98b62;color:#663749}
.hitg-board-app .bg-disc-second{background:radial-gradient(circle at 30% 27%,#a05872,#5f233c);border-color:#cfaa81;color:#f5d7a4}
.hitg-board-app .bg-connect4 .bg-disc{width:76%;border-width:2px}
.hitg-board-app .bg-checkers .bg-available{outline:3px dashed #edc970!important;outline-offset:-6px!important}
.hitg-board-app .bg-checkers .bg-selected{box-shadow:inset 0 0 0 7px #f8d35c99!important}
.hitg-board-app .bg-checkers .bg-recent:not(.bg-selected){box-shadow:inset 0 0 0 5px #edc97077!important}
.hitg-board-app .bg-cell.bg-well:hover{background:#8f4965!important}
.hitg-board-app .bg-hint{min-height:25px;margin:13px 0 9px;color:#755a61;font-size:14px;line-height:1.6}
.hitg-board-app .bg-top-actions{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.hitg-board-app .bg-top-actions button{background:#fff8ed;color:#653047;border-color:#cab291;min-width:130px}
.hitg-board-app .bg-sidebar{min-width:0;display:grid;gap:13px}
.hitg-board-app .bg-card{background:#fffdf8;border:1px solid #deceb5;border-radius:15px;padding:18px;min-width:0;text-align:right}
.hitg-board-app .bg-card h3{font-family:inherit!important;margin:0 0 12px!important;padding:0!important;color:var(--bg-wine);font-size:19px;font-weight:800}
.hitg-board-app .bg-card p{font-size:14px;margin:0 0 12px;color:#68525a}
.hitg-board-app .bg-invite button{display:block;width:100%;max-width:100%;white-space:normal}
.hitg-board-app .bg-code{margin-top:13px;font-weight:800;direction:ltr;unicode-bidi:isolate;letter-spacing:.1em;text-align:center;overflow-wrap:anywhere;color:#6b3b50}
.hitg-board-app .bg-invite .bg-wait{margin-top:10px;color:#745e63}
.hitg-board-app .bg-computer label{display:block;margin-bottom:7px;font-size:14px}
.hitg-board-app .bg-level{padding:9px 12px;min-height:44px;border:1px solid #b7a38a;border-radius:8px;width:100%;max-width:230px;background:#fff;color:#462936}
.hitg-board-app .bg-history{max-height:230px;overflow-y:auto;margin:0;padding:0 23px 0 0;color:#563a46;font-size:14px}
.hitg-board-app .bg-history li{margin:5px 0;overflow-wrap:anywhere}
.hitg-board-app .bg-toast[hidden]{display:none!important}
.hitg-board-app .bg-toast{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(350px,calc(100vw - 28px));max-height:calc(100dvh - 30px);overflow-y:auto;z-index:9999;display:flex;align-items:center;gap:10px;padding:13px;background:#fffcf4;border:1px solid #c6a574;border-radius:15px;box-shadow:0 15px 45px #24101846;color:#3f2633;font-weight:700;font-size:14px;direction:rtl}
.hitg-board-app .bg-toast-icon{flex:none;display:grid;place-items:center;background:#662b43;color:#f8e8c8;border:2px double #d6b478;border-radius:50%;width:37px;height:37px;font-size:20px}
.hitg-board-app .bg-toast-message{flex:1;min-width:0;overflow-wrap:anywhere}
.hitg-board-app .bg-toast button{border:1px solid #decdb6;border-radius:9px;background:#fff;min-width:44px;min-height:44px;font-size:25px;color:#5c3546;flex:none}
.hitg-board-app .bg-sr-only{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;clip-path:inset(50%)!important}
@media(max-width:760px){.hitg-board-app .bg-play{grid-template-columns:1fr}.hitg-board-app .bg-sidebar{grid-template-columns:repeat(2,minmax(0,1fr))}.hitg-board-app .bg-invite{grid-column:1/-1;order:-1}.hitg-board-app .bg-play:has(.bg-invite:not([hidden])) .bg-board-area{order:1}.hitg-board-app .bg-play:has(.bg-invite:not([hidden])) .bg-sidebar{display:contents}.hitg-board-app .bg-play:has(.bg-invite:not([hidden])) .bg-sidebar>.bg-card:not(.bg-invite){order:2;grid-column:1}.hitg-board-app .bg-play{gap:14px}.hitg-board-app .bg-board{border-width:4px}}
@media(max-width:460px){.hitg-board-app{margin:12px auto}.hitg-board-app .bg-shell{border-radius:14px}.hitg-board-app .bg-head{padding:13px 15px}.hitg-board-app .bg-setup{padding:14px}.hitg-board-app .bg-choices{gap:8px}.hitg-board-app .bg-choices button{font-size:16px;min-height:105px;padding:13px 6px}.hitg-board-app .bg-choices button span{font-size:12px}.hitg-board-app .bg-join>div{flex-direction:column}.hitg-board-app .bg-join button{width:100%}.hitg-board-app .bg-play{padding:10px;gap:12px}.hitg-board-app .bg-board{border-width:3px}.hitg-board-app .bg-disc{border-width:1px;font-size:clamp(15px,4.9vw,24px)}.hitg-board-app .bg-sidebar{grid-template-columns:1fr}.hitg-board-app .bg-status{font-size:15px}.hitg-board-app .bg-card{padding:14px}.hitg-board-app .bg-hint{font-size:13px}}
@media(prefers-reduced-motion:reduce){.hitg-board-app *, .hitg-board-app *::before,.hitg-board-app *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media(forced-colors:active){.hitg-board-app .bg-cell{border:1px solid CanvasText!important}.hitg-board-app .bg-disc{border:3px solid CanvasText!important}.hitg-board-app .bg-cell.bg-available,.hitg-board-app .bg-cell.bg-selected{outline:3px dashed Highlight!important;outline-offset:-4px}.hitg-board-app :is(.bg-status,.bg-toast,.bg-card,.bg-choices button){color:CanvasText!important;background:Canvas!important;border:1px solid CanvasText!important}}

/* 1.1 integration polish: scoped strictly to the two new board games. */
.hitg-board-app .bg-kicker{display:block;color:#efcf93;font-size:12px;letter-spacing:.13em;font-weight:800;margin-bottom:7px}
.hitg-board-app .bg-head{position:relative;min-height:118px;background:linear-gradient(118deg,#361626 0%,#612741 58%,#76344b 100%);border-bottom:3px solid #c29b66}
.hitg-board-app .bg-head::after{content:"";position:absolute;inset:10px;pointer-events:none;border:1px solid #d9b48045;border-radius:8px}
.hitg-board-app .bg-head>div,.hitg-board-app .bg-head-mark{position:relative;z-index:1}
.hitg-board-app .bg-head-mark{font-size:44px;line-height:1;display:grid;place-items:center;width:65px;height:65px;flex:none;border:1px solid #e1bd8170;border-radius:18px;color:#e9cb99;background:#ffffff0b}
.hitg-board-app .bg-setup{width:100%;max-width:790px;margin-inline:auto;padding-block:clamp(24px,4vw,43px)}
.hitg-board-app .bg-setup h3{text-align:center;margin-bottom:3px!important;font-size:clamp(21px,3vw,27px)}
.hitg-board-app .bg-setup-description{margin:0 auto 24px;text-align:center;color:#74565c;line-height:1.5;font-size:15px}
.hitg-board-app .bg-choices button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center;border:1px solid #cbb28a;box-shadow:0 4px 0 #c7ae8b33,0 12px 28px #3e1a2520;min-height:165px;line-height:1.4}
.hitg-board-app .bg-choices button:hover{background:#fff7e8;border-color:#997448;box-shadow:0 8px 27px #3e1a2528}
.hitg-board-app .bg-choices button .bg-choice-icon{display:grid;place-items:center;margin:0 auto 7px;width:46px;height:46px;font-size:29px;line-height:1;border-radius:13px;background:#642b44;color:#f7e4bc;border:1px solid #c69c63}
.hitg-board-app .bg-choices button .bg-choice-caption{font-size:14px;font-weight:500;color:#694b58;margin-top:0}
.hitg-board-app .bg-join{max-width:590px;margin:26px auto 0;padding-top:20px;border-top:1px solid #e1d3bd}
.hitg-board-app .bg-board-instructions{font-size:13px;line-height:1.5;color:#6d525c;margin:0 auto 9px;max-width:610px}
.hitg-board-app .bg-status{box-shadow:0 2px 7px #3d152411}
.hitg-board-app .bg-can-drop.bg-well:hover{background:#83516b!important}
.hitg-board-app .bg-cell.bg-well:focus-visible{outline-offset:-5px!important;z-index:3}
.hitg-board-app .bg-cell.bg-dark:focus-visible,.hitg-board-app .bg-cell.bg-light:focus-visible{outline-offset:-5px!important;z-index:3}
.hitg-board-app .bg-hint{max-width:610px;margin-inline:auto;text-align:center}
.hitg-board-app .bg-top-actions{margin-top:2px}
.hitg-board-app .bg-board-area:focus-within .bg-board-instructions{color:#502439;font-weight:650}
@media(max-width:760px){.hitg-board-app .bg-head{min-height:104px}.hitg-board-app .bg-setup{max-width:100%}.hitg-board-app .bg-choices button{min-height:140px}.hitg-board-app .bg-board-instructions{font-size:12px}}
@media(max-width:460px){.hitg-board-app .bg-head{min-height:100px}.hitg-board-app .bg-head-mark{width:50px;height:50px;border-radius:12px;font-size:34px}.hitg-board-app .bg-setup-description{font-size:13px;margin-bottom:17px}.hitg-board-app .bg-choices button{min-height:135px;padding:11px 7px;font-size:16px}.hitg-board-app .bg-choices button .bg-choice-icon{width:39px;height:39px;font-size:25px;margin-bottom:3px}.hitg-board-app .bg-choices button .bg-choice-caption{font-size:12px}.hitg-board-app .bg-join{margin-top:19px;padding-top:16px}.hitg-board-app .bg-board-instructions{font-size:11px;line-height:1.5}}
@media(prefers-reduced-motion:reduce){.hitg-board-app *, .hitg-board-app *::before,.hitg-board-app *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media(forced-colors:active){.hitg-board-app .bg-head,.hitg-board-app .bg-choices button .bg-choice-icon{background:Canvas!important;color:CanvasText!important;border:1px solid CanvasText!important}.hitg-board-app .bg-setup-description,.hitg-board-app .bg-board-instructions,.hitg-board-app .bg-kicker{color:CanvasText!important}.hitg-board-app .bg-choices button{box-shadow:none!important}}

/* The Connect Four board needs visible sockets even when it is empty. */
.hitg-board-app .bg-cell.bg-well::before{content:"";position:absolute;inset:11%;border-radius:50%;pointer-events:none;background:radial-gradient(circle at 36% 32%,#311b2d 0%,#271423 72%,#1b0e1b 100%);border:2px solid #b0808c;box-shadow:inset 2px 3px 5px #0c080e75,0 1px 1px #ffffff26;z-index:0}
.hitg-board-app .bg-cell.bg-well.bg-can-drop:hover::before{border-color:#f1d394;box-shadow:0 0 0 2px #f1d39455,inset 2px 3px 5px #09050b80}
.hitg-board-app .bg-connect4 .bg-disc{z-index:1;box-shadow:inset -3px -5px 7px #21172228,inset 2px 3px 5px #ffffff80,0 2px 4px #180f1c40}
@media(max-width:460px){.hitg-board-app .bg-board-instructions{font-size:12px}}
@media(forced-colors:active){.hitg-board-app .bg-cell.bg-well::before{border:2px solid CanvasText;background:Canvas}.hitg-board-app .bg-disc-first{background:Canvas!important;color:CanvasText!important}.hitg-board-app .bg-disc-second{background:Highlight!important;color:HighlightText!important}}

/* Quiet, accessible, inline feedback shared by checkers and Connect Four.
   Deliberately no drop shadow, decorative dot or floating overlay. */
.hitg-board-app .bg-toast{
 position:static!important;inset:auto!important;transform:none!important;
 z-index:auto;display:flex;align-items:center;justify-content:space-between;
 width:min(100%,610px)!important;max-width:100%;max-height:none;overflow:visible;
 margin:0 auto 12px;padding:9px 12px;gap:11px;
 background:#fffbf4!important;border:1px solid #c8ad82!important;
 border-radius:12px;box-shadow:none!important;filter:none!important;
 color:#462538;font:650 14px/1.55 "Heebo",Arial,sans-serif;direction:rtl;text-align:start;
}
.hitg-board-app .bg-toast-icon{display:none!important}
.hitg-board-app .bg-toast-message{flex:1;min-width:0;overflow-wrap:anywhere}
.hitg-board-app .bg-toast button{
 width:44px;height:44px;min-width:44px;min-height:44px;flex:none;
 margin:0;padding:0;background:#fffdf9;border:1px solid #dccbb3;
 border-radius:9px;color:#542d3e;font-size:25px;box-shadow:none!important;
}
.hitg-board-app .bg-toast button:focus-visible{outline:3px solid #136cab!important;outline-offset:2px}
@media(max-width:460px){.hitg-board-app .bg-toast{padding:7px 8px;gap:7px;font-size:13px;min-height:52px}}
@media(forced-colors:active){
 .hitg-board-app .bg-toast{background:Canvas!important;color:CanvasText!important;border:2px solid CanvasText!important;box-shadow:none!important}
 .hitg-board-app .bg-toast button{background:ButtonFace!important;color:ButtonText!important;border:1px solid ButtonText!important}
}

/* Fixed square tracks: prevent empty checkers rows from collapsing to strips.
   Set the tracks explicitly rather than relying on content-sized implicit rows. */
.hitg-board-app .bg-board.bg-checkers{grid-auto-rows:minmax(0,1fr)}
.hitg-board-app .bg-board.bg-connect4{grid-auto-rows:minmax(0,1fr)}
/* Compact, thumb-friendly game controls without decorative floating UI. */
.hitg-board-app .bg-top-actions{margin:11px auto 12px;max-width:610px;display:flex;align-items:stretch;justify-content:center;flex-wrap:wrap;gap:8px}
.hitg-board-app .bg-top-actions button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-width:0;min-height:46px;padding:8px 12px;border:1px solid #cbb79b;border-radius:10px;background:#fffcf6;color:#5a2b40;font-size:14px;font-weight:700;line-height:1.3;box-shadow:none!important;transition:background-color .15s,border-color .15s}
.hitg-board-app .bg-top-actions button.bg-action-primary{background:#672b44;color:#fffaf0;border-color:#672b44}
.hitg-board-app .bg-top-actions button.bg-action-secondary{background:#f0e6d6;color:#59334a}
.hitg-board-app .bg-top-actions button:not(:disabled):hover{border-color:#946c4e;background:#f4e6d4}
.hitg-board-app .bg-top-actions button.bg-action-primary:hover{background:#542237;color:white}
.hitg-board-app .bg-top-actions button:disabled{opacity:.55}
.hitg-board-app .bg-top-actions svg{width:18px;height:18px;flex:none;display:block}
@media(max-width:540px){
 .hitg-board-app .bg-top-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
 .hitg-board-app .bg-top-actions button{width:100%;min-width:0;padding:9px 7px;font-size:13px}
 .hitg-board-app .bg-top-actions svg{width:17px;height:17px}
}
@media(forced-colors:active){.hitg-board-app .bg-top-actions button{border:1px solid ButtonText!important;background:ButtonFace!important;color:ButtonText!important}}


/* Accessible popup feedback (1.5). Fixed positioning means the board cannot
   move when notices appear or expire. This never blocks the rest of the UI. */
.hitg-board-app .bg-toast{
 position:fixed!important;inset:auto!important;left:50%!important;right:auto!important;
 bottom:calc(26px + env(safe-area-inset-bottom,0px))!important;
 transform:translateX(-50%)!important;
 z-index:9999!important;display:flex;align-items:center;justify-content:space-between;
 width:min(420px,calc(100vw - 32px))!important;max-width:calc(100vw - 32px)!important;
 max-height:min(48dvh,260px)!important;overflow-y:auto!important;
 margin:0!important;padding:9px 11px!important;gap:10px;
 background:#fffcf5!important;border:1px solid #b99c77!important;border-radius:13px;
 color:#462538;box-shadow:none!important;filter:none!important;
 font:650 14px/1.5 "Heebo",Arial,sans-serif;direction:rtl;text-align:start;
}
.hitg-board-app .bg-toast[hidden]{display:none!important}
.hitg-board-app .bg-toast-message{overflow-wrap:anywhere;min-width:0}
.hitg-board-app .bg-toast button{flex:none;min-width:44px;min-height:44px;width:44px;height:44px}
@media(max-width:600px){
 .hitg-board-app .bg-toast{bottom:calc(84px + env(safe-area-inset-bottom,0px))!important;
 width:min(400px,calc(100vw - 24px))!important;max-width:calc(100vw - 24px)!important;
 padding:8px 10px!important;font-size:14px}
}
@media(max-height:470px){.hitg-board-app .bg-toast{bottom:calc(10px + env(safe-area-inset-bottom,0px))!important;max-height:36dvh!important}}
@media(forced-colors:active){.hitg-board-app .bg-toast{background:Canvas!important;color:CanvasText!important;border:2px solid CanvasText!important}}
/* Keyboard focus must not alter instruction text metrics or push the board down. */
.hitg-board-app .bg-board-area:focus-within .bg-board-instructions{font-weight:400}