:root{--ink:#0b1510;--field:#12251b;--field2:#1a3527;--line:rgba(233,214,166,.16);--sand:#e9d6a6;--dim:#b3a47c;--brass:#cfa961;--wood:#c48d54;--woodd:#7d5225;--red:#b0453a;--ally:#3f6f8f;--paper:#eee2c6;--pad:clamp(16px,4vw,32px);--max:1040px}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:radial-gradient(120% 80% at 50% -10%,#1d3a2a 0%,var(--field) 42%,var(--ink) 100%);color:var(--paper);font:400 17px/1.72 Georgia,"Iowan Old Style","Times New Roman",serif;letter-spacing:.005em}
img{max-width:100%;display:block}
a{color:var(--sand);text-decoration:none;border-bottom:1px solid rgba(233,214,166,.35)}
a:hover{color:#fff;border-bottom-color:var(--brass)}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.skip{position:absolute;left:-9999px}
.kicker{font:700 11px/1.4 ui-sans-serif,system-ui,"Helvetica Neue",Arial,sans-serif;letter-spacing:.22em;text-transform:uppercase;color:var(--brass);margin:0 0 10px}
.masthead{position:sticky;top:0;z-index:40;background:rgba(11,21,16,.88);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.masthead-in{display:flex;align-items:center;gap:18px;min-height:58px}
.brand{display:flex;align-items:center;gap:10px;border:0;flex:0 0 auto}
.brand-token{width:30px;height:34px;border-radius:4px;display:grid;place-items:center;font:700 15px/1 ui-sans-serif,system-ui,sans-serif;color:#2b1a08;background:linear-gradient(170deg,#e0aa70,var(--wood) 55%,var(--woodd));box-shadow:inset 0 0 0 2px rgba(0,0,0,.18),0 2px 0 #4d3417}
.brand-word{font:700 15px/1 ui-sans-serif,system-ui,"Helvetica Neue",Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--paper);border:0}
.mast-nav{margin-left:auto;display:flex;gap:20px;overflow-x:auto;scrollbar-width:none}
.mast-nav::-webkit-scrollbar{display:none}
.mast-nav a{font:700 11px/1 ui-sans-serif,system-ui,sans-serif;letter-spacing:.15em;text-transform:uppercase;color:var(--dim);border:0;white-space:nowrap;padding:6px 0}
.mast-nav a:hover{color:var(--brass)}
.hero{padding:clamp(22px,5vw,42px) var(--pad) 14px;text-align:center}
.h1{margin:0;font:700 clamp(30px,6.4vw,54px)/1.02 ui-sans-serif,system-ui,"Helvetica Neue",Arial,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#f5ecd6;text-shadow:0 2px 0 rgba(0,0,0,.45)}
.h1.small{font-size:clamp(24px,4.6vw,36px);letter-spacing:.04em}
.dek{margin:12px auto 0;max-width:56ch;color:var(--dim);font-style:italic}
.stage-wrap{max-width:var(--max);margin:16px auto 0;padding:8px;background:linear-gradient(180deg,#203c2c,#122218);border:1px solid rgba(207,169,97,.42);border-radius:12px;box-shadow:0 18px 40px -22px #000,inset 0 0 0 1px rgba(0,0,0,.4)}
.stage{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:7px;background:#08120c}
.cover{position:absolute;inset:0;display:grid;place-items:center;z-index:2;background:radial-gradient(90% 120% at 50% 120%,#2a4d36 0%,#16301f 50%,#0d1c13 100%)}
.cover-grid{position:absolute;inset:0;opacity:.5;background-image:linear-gradient(rgba(233,214,166,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(233,214,166,.13) 1px,transparent 1px);background-size:10% 20%}
.cover-armies{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:space-between;padding:0 clamp(8px,3vw,26px) clamp(8px,3vw,22px);opacity:.42}
.army{display:flex;gap:clamp(3px,.9vw,8px)}
.army span{width:clamp(18px,4.4vw,38px);height:clamp(24px,5.8vw,50px);border-radius:3px;display:grid;place-items:center;font:700 clamp(9px,2vw,15px)/1 ui-sans-serif,system-ui,sans-serif;box-shadow:inset 0 0 0 2px rgba(0,0,0,.22)}
.army.ally span{background:linear-gradient(170deg,#e2b47e,#b9843f);color:#2a1a08}
.army.enemy span{background:linear-gradient(170deg,#cf9284,#a8463c);color:#2b0f0b}
.cover-copy{position:relative;z-index:2;text-align:center;padding:0 14px}
.cover-kicker{margin:0 0 6px;font:700 clamp(9px,2vw,12px)/1.4 ui-sans-serif,system-ui,sans-serif;letter-spacing:.24em;text-transform:uppercase;color:var(--brass)}
.cover-word{margin:0 0 clamp(10px,2.4vw,18px);font:700 clamp(26px,7.6vw,62px)/.96 ui-sans-serif,system-ui,"Helvetica Neue",Arial,sans-serif;letter-spacing:.13em;text-transform:uppercase;color:#f6eed9;text-shadow:0 3px 0 #0a1710,0 0 26px rgba(207,169,97,.32)}
.play{display:inline-block;cursor:pointer;border:0;border-radius:6px;padding:clamp(12px,2.4vw,17px) clamp(20px,4.6vw,38px);font:700 clamp(13px,2.3vw,17px)/1 ui-sans-serif,system-ui,"Helvetica Neue",Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#2b1a08;background:linear-gradient(170deg,#e7b57c,var(--wood) 52%,#a06a2c);box-shadow:inset 0 0 0 2px rgba(255,255,255,.28),0 4px 0 #563a18,0 10px 24px -8px #000}
.play:hover{background:linear-gradient(170deg,#f2c58e,#cc9357 52%,#a8702f)}
.play:active{transform:translateY(2px);box-shadow:inset 0 0 0 2px rgba(255,255,255,.22),0 2px 0 #563a18}
.play.inline{display:inline-block;margin-top:16px}
.cover-note{margin:clamp(8px,2vw,14px) 0 0;font:400 clamp(10px,1.8vw,13px)/1.4 ui-sans-serif,system-ui,sans-serif;letter-spacing:.06em;color:var(--dim)}
.loader{position:absolute;inset:0;z-index:3;display:none;flex-direction:column;align-items:center;justify-content:center;gap:clamp(8px,2vw,16px);background:radial-gradient(80% 110% at 50% 50%,#1d3a2a,#0b1a12 75%)}
.stage[data-gf-state="loading"] .loader,.stage[data-gf-state="loading"] .cover~.loader{display:flex}
.flips{display:flex;gap:clamp(6px,1.6vw,12px);perspective:600px}
.flips span{width:clamp(28px,7vw,52px);height:clamp(36px,9vw,66px);border-radius:4px;display:grid;place-items:center;font:700 clamp(13px,3vw,22px)/1 ui-sans-serif,system-ui,sans-serif;color:#3a2410;background:linear-gradient(170deg,#e7b57c,#c48d54 55%,#8d5f2f);box-shadow:inset 0 0 0 2px rgba(0,0,0,.2),0 3px 0 #513719;transform-style:preserve-3d;animation:deal 1.7s ease-in-out infinite}
.flips span:nth-child(2){animation-delay:.28s;background:linear-gradient(170deg,#e0917f,#b0453a 55%,#7d2b23);color:#f4e0d4}
.flips span:nth-child(3){animation-delay:.56s}
@keyframes deal{0%,100%{transform:rotateY(0) translateY(0)}35%{transform:rotateY(96deg) translateY(-6px)}60%{transform:rotateY(180deg) translateY(0)}}
.loading-txt{margin:0;font:700 clamp(10px,1.9vw,13px)/1.4 ui-sans-serif,system-ui,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--sand)}
.controls{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:12px 4px 0;justify-content:center}
.btn{display:inline-flex;align-items:center;gap:8px;cursor:pointer;border:1px solid rgba(233,214,166,.3);border-radius:5px;background:transparent;color:var(--sand);font:700 11px/1 ui-sans-serif,system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;padding:11px 15px;min-height:42px}
.btn:hover{border-color:var(--brass);color:#fff;background:rgba(207,169,97,.1)}
.btn .ic{font-size:13px;line-height:1}
.btn[data-gf-liked]{background:linear-gradient(170deg,#e7b57c,#c48d54);border-color:#8d5f2f;color:#2b1a08}
.btn .cnt{font-variant-numeric:tabular-nums;opacity:.85}
.sharemsg{margin:0;flex-basis:100%;text-align:center;font:400 12px/1.4 ui-sans-serif,system-ui,sans-serif;color:var(--brass);min-height:1em}
.prose{max-width:72ch;margin:clamp(26px,5vw,46px) auto 0;font-size:clamp(16px,2.1vw,18px)}
.prose h2{margin:clamp(28px,5vw,44px) 0 10px;padding-top:16px;border-top:1px solid var(--line);font:700 clamp(19px,3.1vw,25px)/1.22 ui-sans-serif,system-ui,"Helvetica Neue",Arial,sans-serif;letter-spacing:.02em;color:#f4ecd8}
.prose h3{margin:22px 0 6px;font:700 15px/1.3 ui-sans-serif,system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--brass)}
.prose p{margin:0 0 14px}
.prose ul,.prose ol{margin:0 0 16px;padding-left:22px}
.prose li{margin:0 0 7px}
.prose strong{color:#fff8e6}
.prose table{width:100%;border-collapse:collapse;margin:6px 0 20px;font:400 14px/1.5 ui-sans-serif,system-ui,sans-serif}
.prose th,.prose td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line)}
.prose th{font-weight:700;font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--brass);border-bottom-color:rgba(207,169,97,.4)}
.prose tbody tr:nth-child(odd){background:rgba(255,255,255,.022)}
.prose td:first-child,.prose td:nth-child(2){font-variant-numeric:tabular-nums;white-space:nowrap}
.comments{max-width:72ch;margin:clamp(34px,6vw,58px) auto 0;padding-bottom:clamp(30px,6vw,60px)}
.sec-h{margin:0 0 16px;padding-top:16px;border-top:1px solid var(--line);font:700 clamp(19px,3.1vw,25px)/1.22 ui-sans-serif,system-ui,"Helvetica Neue",Arial,sans-serif;color:#f4ecd8}
.cform{display:grid;gap:10px;margin-bottom:26px;padding:14px;border:1px solid var(--line);border-radius:8px;background:rgba(255,255,255,.026)}
.cform input,.cform textarea{width:100%;padding:11px 12px;border:1px solid rgba(233,214,166,.26);border-radius:5px;background:rgba(0,0,0,.3);color:var(--paper);font:400 15px/1.5 ui-sans-serif,system-ui,sans-serif}
.cform textarea{resize:vertical;min-height:84px}
.cform input:focus,.cform textarea:focus{outline:2px solid var(--brass);outline-offset:1px;border-color:var(--brass)}
.cform-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.cform button{cursor:pointer;border:1px solid var(--brass);border-radius:5px;padding:11px 18px;font:700 11px/1 ui-sans-serif,system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#2b1a08;background:linear-gradient(170deg,#e7b57c,#c48d54)}
.cform button.cform-cancel{background:transparent;color:var(--dim);border-color:var(--line)}
.cmsg{margin:0;font:400 12px/1.4 ui-sans-serif,system-ui,sans-serif;color:var(--brass)}
.cform-note{margin:0;font:400 12px/1.4 ui-sans-serif,system-ui,sans-serif;color:var(--brass)}
.clist{display:grid;gap:2px}
.citem{padding:15px 0;border-top:1px solid var(--line)}
.citem header{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;margin-bottom:5px}
.cname{font:700 13px/1 ui-sans-serif,system-ui,sans-serif;letter-spacing:.05em;color:var(--sand)}
.citem time{font:400 11px/1 ui-sans-serif,system-ui,sans-serif;color:#8b8267}
.owner-tag{display:none;font:700 9px/1 ui-sans-serif,system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#2b1a08;background:var(--brass);border-radius:3px;padding:3px 6px}
.citem[data-gf-owner]{border-left:3px solid var(--brass);padding-left:14px;background:rgba(207,169,97,.055)}
.citem[data-gf-owner] .owner-tag{display:inline-block}
.ctext{margin:0;white-space:pre-wrap;word-break:break-word;font-size:16px}
.cactions{display:flex;align-items:center;gap:10px;margin-top:7px}
.cactions button{cursor:pointer;border:0;background:none;padding:0;font:700 10px/1 ui-sans-serif,system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.cactions button:hover{color:var(--brass)}
.cto{font:400 11px/1 ui-sans-serif,system-ui,sans-serif;color:var(--brass)}
.creplies{margin-top:10px;padding-left:14px;border-left:1px solid var(--line);display:grid;gap:2px}
.creply{border-top:1px solid rgba(233,214,166,.08);padding:10px 0}
.cempty{margin:14px 0 0;color:var(--dim);font-style:italic}
.clist:not([data-gf-empty]) .cempty{display:none}
.cnote{margin:18px 0 0;font:400 11px/1.6 ui-sans-serif,system-ui,sans-serif;color:#7d765f}
.legal{max-width:72ch;margin:0 auto;padding:clamp(28px,5vw,48px) 0 clamp(34px,6vw,56px)}
.legal .prose{margin-top:18px}
.updated{margin:10px 0 0;font:400 12px/1.4 ui-sans-serif,system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#8b8267}
.footer{margin-top:clamp(30px,6vw,56px);border-top:1px solid var(--line);background:rgba(0,0,0,.26);padding:clamp(26px,4vw,40px) 0}
.footer-in{display:flex;flex-wrap:wrap;gap:26px;justify-content:space-between;align-items:flex-start}
.footer-brand{font:700 13px/1.3 ui-sans-serif,system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--paper)}
.footer p{margin:8px 0 0;max-width:46ch;font:400 12px/1.65 ui-sans-serif,system-ui,sans-serif;color:#8e866c}
.fnav{display:flex;flex-wrap:wrap;gap:8px 18px;max-width:340px}
.fnav a{font:400 12px/1.6 ui-sans-serif,system-ui,sans-serif;border:0;color:var(--dim);padding:2px 0}
.fnav a:hover{color:var(--brass)}
@media (max-width:880px){
 .stage-wrap{margin-left:calc(-1 * var(--pad));margin-right:calc(-1 * var(--pad));border-radius:0;border-left:0;border-right:0;padding:0}
 .stage{border-radius:0;aspect-ratio:16/10}
 .mast-nav{gap:14px}
 .controls{gap:8px}
 .btn{padding:10px 12px;font-size:10px;letter-spacing:.1em}
}
@media (max-width:420px){.mast-nav a:nth-child(n+4){display:none}}
@media (prefers-reduced-motion:reduce){.flips span{animation:none}}

/* Keep the square board inside the viewport on narrow screens. */
.stage-wrap{max-width:740px;width:calc(100% - 32px)}
.stage{width:100%}
.skip:focus{left:12px;top:12px;z-index:100;background:var(--field);padding:12px}
.clist:not([data-gf-empty]) .empty{display:none}
.c[data-gf-owner]{border-left:3px solid var(--brass);padding-left:14px}
.c-text{white-space:pre-wrap;overflow-wrap:anywhere}
.c-head{display:flex;gap:12px;flex-wrap:wrap}
.c-head time{color:var(--dim);font-size:12px}
.prose{overflow-wrap:anywhere}
@media(max-width:880px){.stage-wrap{margin:16px auto 0;width:100%;max-width:720px}.masthead-in{flex-wrap:wrap;gap:12px;padding-top:12px;padding-bottom:12px}.mast-nav{margin-left:0;min-width:0;max-width:100%}.prose table{font-size:12px}.prose th,.prose td{padding:6px 4px}.prose td:nth-child(2){white-space:normal}}

/* Respect engine visibility; author display rules must not override hidden. */
[hidden]{display:none!important}
[data-gf-frame][data-gf-state="loading"] [data-gf-cover],
[data-gf-frame][data-gf-state="playing"] [data-gf-cover]{display:none!important;pointer-events:none}
[data-gf-frame][data-gf-state="playing"] [data-gf-loading]{display:none!important;pointer-events:none}
[data-gf-frame] iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}

/* Recovery stays outside the game and never covers an active match. */
.game-help{max-width:740px;margin:12px auto 0;font:400 14px/1.6 ui-sans-serif,system-ui,sans-serif;color:var(--dim)}
.game-help details{border:1px solid var(--line);border-radius:6px;padding:12px 16px}
.game-help summary{cursor:pointer;color:var(--sand);min-height:24px}
.game-help p{margin:12px 0}
.game-help .recovery-actions{display:flex;flex-wrap:wrap;gap:10px}
.game-help .btn{letter-spacing:.04em;line-height:1.4;min-height:44px}
.game-help .btn:disabled{opacity:.5;cursor:wait}
.game-help [data-retry-confirm]{border-left:2px solid var(--brass);padding-left:12px}
.game-help .connection-note,.game-help .recovery-status{color:var(--sand)}
.game-help :focus-visible{outline:2px solid var(--brass);outline-offset:4px}