.cn-theme-root{
 --cn-accent:var(--bj-accent,#1475d4);--cn-accent2:var(--bj-accent2,#55b6ff);--cn-deep:var(--bj-deep,#0b4d91);
 --cn-soft:var(--bj-soft,#edf6ff);--cn-card:var(--bj-card,#fff);--cn-ink:var(--bj-ink,#17283b);--cn-muted:var(--bj-muted,#708399);--cn-line:var(--bj-line,#d9e6f2);
 color:var(--cn-ink);font-family:inherit
}
.cn-shell{width:min(calc(100% - 32px),1360px);margin:0 auto;padding:18px 0 42px}
.cn-hero{min-height:150px;padding:28px 32px;border-radius:20px;background:radial-gradient(circle at 84% 18%,color-mix(in srgb,var(--cn-accent2) 28%,transparent),transparent 30%),linear-gradient(135deg,var(--cn-deep),var(--cn-accent));color:#fff;display:flex;align-items:center;justify-content:space-between;gap:24px;box-shadow:0 15px 38px color-mix(in srgb,var(--cn-deep) 20%,transparent)}
.cn-kicker{display:block;font-size:10px;letter-spacing:.16em;font-weight:950;color:var(--cn-accent);margin-bottom:5px}.cn-hero .cn-kicker{color:#fff}.cn-hero h1{font-size:38px;margin:4px 0 8px}.cn-hero p{margin:0;color:rgba(255,255,255,.9);font-size:14px}.cn-hero-actions .cn-btn{background:#fff!important;color:var(--cn-deep)!important}
.cn-btn,.cn-action{border:1px solid var(--cn-line);border-radius:11px;background:var(--cn-card);color:var(--cn-ink);font:inherit;font-weight:900;text-decoration:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}.cn-btn{min-height:42px;padding:0 16px}.cn-primary{background:var(--cn-accent)!important;color:#fff!important;border-color:var(--cn-accent)!important}
.cn-summary-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:13px}.cn-summary-strip span{padding:11px 12px;border:1px solid var(--cn-line);border-radius:12px;background:var(--cn-card);text-align:center;color:var(--cn-muted);font-size:11px}.cn-summary-strip b{color:var(--cn-deep)}
.cn-room-section{margin-top:26px}.cn-section-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:12px}.cn-section-head h2{font-size:25px;margin:3px 0}.cn-section-head p{font-size:12px;color:var(--cn-muted);margin:0}.cn-section-head>b{font-size:12px;color:var(--cn-muted)}
.cn-room-list{display:grid;gap:11px}.cn-room-row{display:grid;grid-template-columns:100px minmax(0,1.25fr) minmax(260px,.78fr) 260px;gap:16px;align-items:center;min-height:112px;padding:17px 18px;border:1px solid var(--cn-line);border-radius:18px;background:var(--cn-card);box-shadow:0 8px 24px rgba(34,68,104,.065);transition:.18s}.cn-room-row:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--cn-accent) 42%,var(--cn-line))}
.cn-status{display:grid;grid-template-columns:10px 1fr;gap:2px 7px;align-items:center;font-size:11px;font-weight:950}.cn-status i{width:9px;height:9px;border-radius:50%;grid-row:1/3}.cn-status small{font-size:9px;font-weight:800;opacity:.72}.cn-status.is-active{color:#dc4747}.cn-status.is-active i{background:#ef4545;box-shadow:0 0 0 5px rgba(239,69,69,.12),0 0 12px rgba(239,69,69,.55)}.cn-status.is-waiting{color:#278761}.cn-status.is-waiting i{background:#27ae72;box-shadow:0 0 0 5px rgba(39,174,114,.12),0 0 10px rgba(39,174,114,.4)}.cn-status.is-paused{color:#bf8515}.cn-status.is-paused i{background:#e3a225;box-shadow:0 0 0 5px rgba(227,162,37,.13)}
.cn-room-title{display:flex;align-items:center;gap:8px}.cn-room-title h3{margin:0;font-size:17px}.cn-room-title span{font-size:9px;color:#93a4b5}.cn-room-main p{font-size:12px;color:var(--cn-muted);margin:6px 0}.cn-room-meta{display:flex;gap:9px;align-items:center;font-size:11px;color:var(--cn-muted)}.cn-room-meta strong{color:var(--cn-deep)}.cn-room-meta em{font-style:normal;padding:3px 7px;border-radius:999px;background:var(--cn-soft);font-size:10px;font-weight:900;color:var(--cn-deep)}.cn-room-meta em.is-invite{background:#f6eefc;color:#7137a3}
.cn-members>b{font-size:14px}.cn-members>div{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}.cn-members span{display:inline-flex;align-items:center;padding:4px 7px;border-radius:8px;background:var(--cn-soft);font-size:10px;font-weight:850}.cn-members i{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:8px;font-style:normal;margin-right:5px}.cn-members .p1{background:#2584e8}.cn-members .p2{background:#e54848}.cn-members .p3{background:#36a86b}.cn-members .p4{background:#7139a6}
.cn-room-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px}.cn-action{min-height:34px;padding:0 8px;font-size:10px}.cn-action.is-play{background:var(--cn-accent);color:#fff;border-color:var(--cn-accent)}.cn-action.is-watch{background:var(--cn-soft);color:var(--cn-deep)}.cn-action.is-invite{background:#fff7e8;color:#a16800;border-color:#f1d89e}.cn-action.is-close{color:#b33b3b}.cn-action:disabled{opacity:.42;cursor:not-allowed}
.cn-empty,.cn-placeholder{min-height:180px;padding:30px;border:1px dashed var(--cn-line);border-radius:18px;background:var(--cn-card);display:grid;place-content:center;text-align:center;color:var(--cn-muted)}.cn-placeholder h1,.cn-placeholder h2,.cn-empty b{color:var(--cn-ink)}.cn-member-grid{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}.cn-member-grid>div{padding:10px 14px;border:1px solid var(--cn-line);border-radius:12px;background:var(--cn-soft);display:grid}.cn-code-form{display:flex;justify-content:center;gap:8px}.cn-code-form input{min-height:42px}
.cn-modal{position:fixed;inset:0;z-index:99990;background:rgba(4,15,28,.52);display:none;align-items:center;justify-content:center;padding:20px}.cn-modal.is-open{display:flex}.cn-dialog{position:relative;width:min(520px,100%);background:var(--cn-card);border:1px solid var(--cn-line);border-radius:20px;padding:24px;color:var(--cn-ink);box-shadow:0 24px 70px rgba(0,0,0,.25)}.cn-x{position:absolute;right:14px;top:12px;border:0;background:transparent;font-size:25px;color:var(--cn-muted);cursor:pointer}.cn-dialog h3{margin:4px 0 16px;font-size:23px}.cn-dialog form{display:grid;gap:12px}.cn-dialog label{display:grid;gap:5px;font-size:11px;font-weight:900;color:var(--cn-muted)}.cn-dialog input,.cn-dialog select{width:100%;min-height:42px;border:1px solid var(--cn-line);border-radius:10px;background:var(--cn-card);color:var(--cn-ink);padding:0 11px}.cn-two{display:grid;grid-template-columns:1fr 1fr;gap:10px}.cn-toast{position:fixed;z-index:99999;right:24px;bottom:24px;padding:12px 16px;border-radius:12px;background:#153451;color:#fff;font-weight:850;font-size:12px;box-shadow:0 10px 35px rgba(0,0,0,.22)}.cn-toast.bad{background:#9c3030}
html.bp-dark .cn-theme-root,body.bp-dark .cn-theme-root,html[data-theme="dark"] .cn-theme-root{--cn-card:#112131;--cn-ink:#edf5fc;--cn-muted:#a7b7c8;--cn-line:#2e455b;--cn-soft:#172c40}.cn-theme-root{transition:background .15s,color .15s}
html.bp-dark .cn-room-row,body.bp-dark .cn-room-row,html[data-theme="dark"] .cn-room-row{box-shadow:0 8px 24px rgba(0,0,0,.18)}
@media(max-width:1050px){.cn-room-row{grid-template-columns:90px 1fr 210px}.cn-room-actions{grid-column:2/4;display:flex;flex-wrap:wrap}.cn-action{padding:0 12px}.cn-summary-strip{grid-template-columns:1fr 1fr}}
@media(max-width:680px){.cn-shell{width:calc(100% - 18px)}.cn-hero{padding:22px 18px;flex-direction:column;align-items:flex-start}.cn-room-row{grid-template-columns:1fr}.cn-room-actions{grid-column:auto}.cn-summary-strip{grid-template-columns:1fr 1fr}.cn-two{grid-template-columns:1fr}.cn-code-form{flex-direction:column}}


/* v4 lobby content ads */
.cn-content-ad{width:100%;margin:18px auto 0}
.cn-content-ad--bottom{margin-top:26px}
.cn-content-ad__label{text-align:center;font-size:9px;letter-spacing:.16em;font-weight:900;color:var(--cn-muted);margin-bottom:6px}
.cn-content-ad__slot{
  width:100%;min-height:90px;
  border:1px dashed color-mix(in srgb,var(--cn-accent) 24%,var(--cn-line));
  border-radius:15px;
  background:color-mix(in srgb,var(--cn-card) 94%,transparent);
  display:flex;align-items:center;justify-content:center;overflow:hidden
}
html.bp-dark .cn-content-ad__slot,
body.bp-dark .cn-content-ad__slot,
html[data-theme="dark"] .cn-content-ad__slot{
  background:#0f1d2b;border-color:#30485f
}


/* v5 — Promise Land game / spectator / guide */
.cn-game-shell{width:min(calc(100% - 32px),1360px);margin:0 auto;padding:12px 0 38px}
.cn-game-banner{height:94px;display:grid;grid-template-columns:300px 1fr auto;align-items:center;gap:15px;padding:15px 20px;border-radius:17px;background:radial-gradient(circle at 78% 20%,color-mix(in srgb,var(--cn-accent2) 23%,transparent),transparent 28%),linear-gradient(135deg,var(--cn-deep),var(--cn-accent));color:#fff;margin-bottom:12px}
.cn-game-brand{display:flex;align-items:center;gap:12px}.cn-game-emblem{font-size:37px}.cn-game-kicker{font-size:9px;font-weight:950;letter-spacing:.13em;color:#fff;opacity:.83}.cn-game-brand h1{font-size:24px;margin:2px 0;color:#fff}.cn-game-brand small{font-size:8.5px;color:rgba(255,255,255,.8)}
.cn-game-banner>p{font-size:11px;color:rgba(255,255,255,.91);line-height:1.55;margin:0;text-align:center}.cn-game-banner-actions{display:flex;align-items:center;gap:7px}.cn-game-btn,.cn-spectator-badge{min-height:36px;padding:0 12px;border-radius:10px;border:1px solid rgba(255,255,255,.25);display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:900;text-decoration:none}.cn-game-btn{background:rgba(255,255,255,.12);color:#fff}.cn-game-btn:hover{background:rgba(255,255,255,.2)}.cn-spectator-badge{background:#fff;color:var(--cn-deep);border-color:#fff}
.cn-game-ad-top{margin:0 0 12px}.cn-game-ad-bottom{margin-top:18px}
.cn-game-grid{display:grid;grid-template-columns:205px minmax(0,1fr) 300px;gap:12px;align-items:start}.cn-game-left,.cn-game-right{display:grid;gap:10px}.cn-game-panel{background:var(--cn-card);border:1px solid var(--cn-line);border-radius:13px;overflow:hidden}.cn-game-panel-title{padding:9px 11px;background:linear-gradient(135deg,var(--cn-deep),var(--cn-accent));color:#fff;font-size:11px;font-weight:950;display:flex;justify-content:space-between;align-items:center}.cn-game-panel-title small{font-size:8px;opacity:.8}
.cn-info-row{display:flex;justify-content:space-between;align-items:center;padding:9px 10px;border-bottom:1px solid var(--cn-line);font-size:9.5px}.cn-info-row:last-child{border-bottom:0}.cn-info-row b{font-size:9.5px;color:var(--cn-ink)}
.cn-game-player{display:grid;grid-template-columns:30px minmax(0,1fr) auto;align-items:center;gap:7px;padding:8px;border-bottom:1px solid var(--cn-line)}.cn-game-player:last-child{border-bottom:0}.cn-game-player.is-turn{background:var(--cn-soft)}.cn-player-color{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:9px;font-style:normal;font-weight:950}.cn-player-color.p1,.cn-map-legend i.p1{background:#2584e8}.cn-player-color.p2,.cn-map-legend i.p2{background:#e54848}.cn-player-color.p3,.cn-map-legend i.p3{background:#36a86b}.cn-player-color.p4,.cn-map-legend i.p4{background:#7139a6}.cn-game-player b{display:block;font-size:9.5px}.cn-game-player small{display:block;font-size:7.5px;color:var(--cn-muted);margin-top:2px}.cn-game-player strong{font-size:9px;color:var(--cn-deep)}
.cn-army-stock{display:grid;grid-template-columns:1fr 1fr;gap:5px;padding:9px}.cn-army-stock span{padding:6px;border-radius:8px;background:var(--cn-soft);font-size:8px}.cn-army-stock b{float:right;color:var(--cn-deep)}.cn-panel-note{padding:0 10px 10px;margin:0;color:var(--cn-muted);font-size:8px;line-height:1.55}
.cn-game-center{min-width:0}.cn-map-toolbar{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px}.cn-map-toolbar>div{padding:8px 10px;border:1px solid var(--cn-line);border-radius:11px;background:var(--cn-card);display:flex;justify-content:space-between;gap:8px;font-size:9px}.cn-map-toolbar span{color:var(--cn-muted)}.cn-map-toolbar strong{color:var(--cn-deep)}
.cn-conquest-map{position:relative;height:665px;border:1px solid var(--cn-line);border-radius:17px;overflow:hidden;background:radial-gradient(circle at 28% 28%,rgba(136,184,198,.24),transparent 26%),radial-gradient(circle at 67% 63%,rgba(203,181,126,.20),transparent 34%),linear-gradient(145deg,#eef1dc,#e7efe7 48%,#e9e0c9);box-shadow:inset 0 0 80px rgba(85,107,88,.12)}
.cn-conquest-map:before{content:"";position:absolute;inset:7% 8%;border-radius:44% 56% 50% 47%/27% 35% 65% 73%;background:linear-gradient(145deg,rgba(206,218,169,.6),rgba(224,210,160,.62));box-shadow:0 0 0 16px rgba(132,169,178,.14);transform:rotate(-3deg)}
.cn-map-caption{position:absolute;z-index:3;left:18px;top:15px;padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.78);backdrop-filter:blur(5px);display:grid}.cn-map-caption b{font-size:14px;color:#294b3b}.cn-map-caption span{font-size:8px;color:#65776b}
.cn-hex-field{position:absolute;z-index:4;inset:64px 38px 48px;display:grid;grid-template-columns:repeat(7,1fr);grid-auto-rows:73px;align-content:center;justify-content:center;gap:0 4px;transform:rotate(-1deg)}
.cn-hex{position:relative;width:76px;height:68px;justify-self:center;border:0;background:rgba(255,255,255,.73);clip-path:polygon(25% 4%,75% 4%,100% 50%,75% 96%,25% 96%,0 50%);display:grid;place-content:center;text-align:center;color:#334638;cursor:pointer;filter:drop-shadow(0 2px 2px rgba(45,65,48,.15));transition:.14s}.cn-hex:nth-child(14n+8),.cn-hex:nth-child(14n+9),.cn-hex:nth-child(14n+10),.cn-hex:nth-child(14n+11),.cn-hex:nth-child(14n+12),.cn-hex:nth-child(14n+13),.cn-hex:nth-child(14n+14){transform:translateX(40px)}.cn-hex span{font-size:19px;font-weight:950}.cn-hex small{font-size:7px;font-weight:850;opacity:.7}.cn-hex:hover:not(:disabled){filter:drop-shadow(0 4px 5px rgba(45,65,48,.26));transform:scale(1.06)}.cn-hex.is-selected{outline:3px solid #ffc928;outline-offset:-5px}.cn-hex.owner-p1{background:rgba(70,147,230,.78);color:#fff}.cn-hex.owner-p2{background:rgba(229,72,72,.78);color:#fff}.cn-hex.owner-p3{background:rgba(54,168,107,.78);color:#fff}.cn-hex.owner-p4{background:rgba(113,57,166,.78);color:#fff}
.cn-map-legend{position:absolute;z-index:6;right:15px;bottom:13px;display:flex;gap:8px;flex-wrap:wrap;padding:6px 9px;background:rgba(255,255,255,.82);border-radius:9px;font-size:7.5px}.cn-map-legend span{display:flex;align-items:center;gap:3px}.cn-map-legend i{width:8px;height:8px;border-radius:50%}.cn-map-legend i.neutral{background:#e2debf;border:1px solid #b9b38e}
.cn-battle-feed{margin-top:8px;padding:9px 11px;border:1px solid var(--cn-line);border-radius:11px;background:var(--cn-card);display:flex;gap:10px;font-size:9px}.cn-battle-feed b{color:var(--cn-deep);white-space:nowrap}.cn-battle-feed span{color:var(--cn-muted)}
.cn-attack-box{padding:10px;display:grid;gap:8px}.cn-attack-box label{display:grid;gap:4px;font-size:8px;font-weight:900;color:var(--cn-muted)}.cn-attack-box input{height:34px;border:1px solid var(--cn-line);border-radius:8px;padding:0 8px;background:var(--cn-card);color:var(--cn-ink)}.cn-attack-main{height:38px;border:0;border-radius:9px;background:var(--cn-accent);color:#fff;font-weight:950;cursor:pointer}.cn-attack-main:disabled{opacity:.45}.cn-battle-method{display:grid;grid-template-columns:1fr;gap:5px;padding-top:4px}.cn-battle-method b{font-size:9px}.cn-battle-method button{height:34px;border:1px solid var(--cn-line);border-radius:8px;background:var(--cn-soft);color:var(--cn-deep);font-weight:900;cursor:pointer}
.cn-troop-select{padding:9px;display:grid;gap:6px}.cn-troop-select label{display:grid;grid-template-columns:1fr 75px;align-items:center;font-size:8.5px;font-weight:850}.cn-troop-select input{height:30px;border:1px solid var(--cn-line);border-radius:7px;background:var(--cn-card);color:var(--cn-ink);padding:0 6px}
.cn-chat-log{height:125px;padding:9px;overflow:auto;font-size:8px;color:var(--cn-muted);background:var(--cn-soft)}.cn-chat-input{display:grid;grid-template-columns:1fr 48px;gap:5px;padding:7px}.cn-chat-input input{min-width:0;height:31px;border:1px solid var(--cn-line);border-radius:7px;background:var(--cn-card);color:var(--cn-ink);padding:0 7px}.cn-chat-input button{border:0;border-radius:7px;background:var(--cn-accent);color:#fff;font-size:8px;font-weight:900}
.cn-guide-wrap{display:grid;gap:13px;margin-top:13px}.cn-guide-section{padding:22px 24px;border:1px solid var(--cn-line);border-radius:17px;background:var(--cn-card)}.cn-guide-kicker{font-size:9px;letter-spacing:.14em;color:var(--cn-accent);font-weight:950}.cn-guide-section h2{font-size:22px;margin:5px 0 10px;color:var(--cn-ink)}.cn-guide-section>p{font-size:12px;color:var(--cn-muted);line-height:1.75;margin:0}.cn-guide-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:12px}.cn-guide-grid article{padding:14px;border-radius:12px;background:var(--cn-soft);border:1px solid var(--cn-line)}.cn-guide-grid b{font-size:11px;color:var(--cn-deep)}.cn-guide-grid p{font-size:9.5px;line-height:1.65;color:var(--cn-muted);margin:6px 0 0}.cn-guide-steps{display:grid;gap:7px;padding:0;margin:14px 0 0;list-style:none}.cn-guide-steps li{display:grid;grid-template-columns:170px 1fr;gap:10px;padding:10px 12px;border-radius:10px;background:var(--cn-soft);font-size:10px}.cn-guide-steps b{color:var(--cn-deep)}.cn-guide-steps span{color:var(--cn-muted)}.cn-guide-callout{margin-top:12px;padding:12px;border-left:4px solid var(--cn-accent);background:var(--cn-soft);border-radius:8px;font-size:10px;color:var(--cn-muted)}
html.bp-dark .cn-conquest-map,body.bp-dark .cn-conquest-map,html[data-theme="dark"] .cn-conquest-map{background:radial-gradient(circle at 28% 28%,rgba(45,86,100,.22),transparent 26%),radial-gradient(circle at 67% 63%,rgba(102,88,51,.18),transparent 34%),linear-gradient(145deg,#1a2824,#142a2b 48%,#2b281d);border-color:#344b51}.cn-theme-root .cn-game-panel,.cn-theme-root .cn-guide-section{transition:background .15s,color .15s}
html.bp-dark .cn-map-caption,body.bp-dark .cn-map-caption,html[data-theme="dark"] .cn-map-caption{background:rgba(15,29,43,.83)}html.bp-dark .cn-map-caption b,body.bp-dark .cn-map-caption b,html[data-theme="dark"] .cn-map-caption b{color:#e8f3ef}html.bp-dark .cn-map-caption span,body.bp-dark .cn-map-caption span,html[data-theme="dark"] .cn-map-caption span{color:#a8b8b1}
html.bp-dark .cn-map-legend,body.bp-dark .cn-map-legend,html[data-theme="dark"] .cn-map-legend{background:rgba(15,29,43,.83);color:#c7d3dc}.cn-hex:disabled{cursor:default}
@media(max-width:1180px){.cn-game-grid{grid-template-columns:190px minmax(0,1fr)}.cn-game-right{grid-column:1/3;grid-template-columns:repeat(3,1fr)}.cn-conquest-map{height:610px}.cn-hex-field{transform:scale(.9) rotate(-1deg)}}
@media(max-width:780px){.cn-game-shell{width:calc(100% - 18px)}.cn-game-banner{height:auto;min-height:94px;grid-template-columns:1fr;padding:14px}.cn-game-banner>p{text-align:left}.cn-game-grid{grid-template-columns:1fr}.cn-game-left,.cn-game-right{grid-column:auto}.cn-game-right{grid-template-columns:1fr}.cn-conquest-map{height:590px;overflow:auto}.cn-hex-field{width:650px;transform:scale(.82) rotate(-1deg);transform-origin:top left}.cn-guide-grid{grid-template-columns:1fr}.cn-guide-steps li{grid-template-columns:1fr}}


/* v6 — create/invite modal: variables must exist outside .cn-theme-root */
.cn-modal{
  --cn-accent:var(--bj-accent,#1475d4);
  --cn-accent2:var(--bj-accent2,#55b6ff);
  --cn-deep:var(--bj-deep,#0b4d91);
  --cn-soft:var(--bj-soft,#edf6ff);
  --cn-card:var(--bj-card,#fff);
  --cn-ink:var(--bj-ink,#17283b);
  --cn-muted:var(--bj-muted,#708399);
  --cn-line:var(--bj-line,#d9e6f2);
  background:rgba(4,15,28,.58)!important;
  backdrop-filter:blur(2px);
}
.cn-modal .cn-dialog{
  background:var(--cn-card,#fff)!important;
  color:var(--cn-ink,#17283b)!important;
  border:1px solid var(--cn-line,#d9e6f2)!important;
  opacity:1!important;
  isolation:isolate;
}
.cn-modal .cn-dialog:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  border-radius:inherit;
  background:var(--cn-card,#fff);
}
.cn-modal .cn-kicker{color:var(--cn-accent,#1475d4)!important}
.cn-modal .cn-dialog h3{color:var(--cn-ink,#17283b)!important}
.cn-modal .cn-dialog label{color:var(--cn-muted,#708399)!important}
.cn-modal .cn-dialog input,
.cn-modal .cn-dialog select{
  background:var(--cn-card,#fff)!important;
  color:var(--cn-ink,#17283b)!important;
  border-color:var(--cn-line,#d9e6f2)!important;
}
.cn-modal .cn-x{color:var(--cn-muted,#708399)!important}
html.bp-dark .cn-modal,
body.bp-dark .cn-modal,
html[data-theme="dark"] .cn-modal{
  --cn-card:#112131;
  --cn-ink:#edf5fc;
  --cn-muted:#a7b7c8;
  --cn-line:#2e455b;
  --cn-soft:#172c40;
}

/* v7 — 49 large regions, each with 7 grade cells */
.cn-conquest-map-v2{
 position:relative;height:690px;border:1px solid var(--cn-line);border-radius:17px;overflow:hidden;
 background:
 linear-gradient(rgba(246,247,238,.80),rgba(246,247,238,.80)),
 url('./canaan-map-bg.svg') center/80% 90% no-repeat,
 linear-gradient(145deg,#eef1dc,#e6eee6 50%,#ece2c9);
}
.cn-conquest-map-v2:before{display:none!important}
.cn-large-hex-field{
 position:absolute;z-index:4;left:17px;right:17px;top:52px;bottom:45px;
 display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(7,1fr);
 align-items:center;justify-items:center;column-gap:0;row-gap:0;
}
.cn-large-hex{
 position:relative;width:91px;height:79px;margin:-7px -2px;padding:0;border:0;
 clip-path:polygon(25% 2%,75% 2%,100% 50%,75% 98%,25% 98%,0 50%);
 background:rgba(239,232,201,.88);color:#263b32;cursor:pointer;display:block;transition:.12s;
}
.cn-large-hex:after{
 content:"";position:absolute;inset:1px;clip-path:inherit;border:3px solid rgba(68,78,67,.76);pointer-events:none;
}
.cn-large-hex:nth-child(14n+8),.cn-large-hex:nth-child(14n+9),.cn-large-hex:nth-child(14n+10),
.cn-large-hex:nth-child(14n+11),.cn-large-hex:nth-child(14n+12),.cn-large-hex:nth-child(14n+13),.cn-large-hex:nth-child(14n+14){
 transform:translateX(45px)
}
.cn-large-hex:hover:not(:disabled){z-index:8;filter:brightness(1.04) drop-shadow(0 2px 3px rgba(0,0,0,.2))}
.cn-large-hex.is-selected{filter:drop-shadow(0 0 6px #ffc400)}
.cn-large-hex.is-selected:after{border:4px solid #ffb600}
.cn-large-name{
 position:absolute;z-index:1;inset:0;display:flex;align-items:center;justify-content:center;
 font-size:13px;font-weight:950;color:rgba(38,57,47,.19);letter-spacing:-.04em;pointer-events:none
}
.cn-mini-grid{position:absolute;z-index:3;left:50%;top:50%;width:54px;height:48px;transform:translate(-50%,-50%)}
.cn-mini-hex{
 position:absolute;width:19px;height:17px;clip-path:polygon(25% 2%,75% 2%,100% 50%,75% 98%,25% 98%,0 50%);
 background:rgba(255,255,255,.9);display:flex;align-items:center;justify-content:center;color:#23352a
}
.cn-mini-hex:after{content:"";position:absolute;inset:0;clip-path:inherit;border:1px solid rgba(50,67,55,.72)}
.cn-mini-hex b{position:relative;z-index:2;font-size:7px;line-height:1;font-weight:950}
.cn-mini-hex:nth-child(1){left:18px;top:15px}.cn-mini-hex:nth-child(2){left:18px;top:0}
.cn-mini-hex:nth-child(3){left:33px;top:7px}.cn-mini-hex:nth-child(4){left:33px;top:23px}
.cn-mini-hex:nth-child(5){left:18px;top:30px}.cn-mini-hex:nth-child(6){left:3px;top:23px}.cn-mini-hex:nth-child(7){left:3px;top:7px}
.cn-large-hex.owner-p1{background:rgba(91,158,228,.86)}.cn-large-hex.owner-p2{background:rgba(229,100,100,.86)}
.cn-large-hex.owner-p3{background:rgba(84,180,124,.86)}.cn-large-hex.owner-p4{background:rgba(137,87,185,.86)}
html.bp-dark .cn-conquest-map-v2,body.bp-dark .cn-conquest-map-v2,html[data-theme="dark"] .cn-conquest-map-v2{
 background:
 linear-gradient(rgba(13,27,35,.76),rgba(13,27,35,.76)),
 url('./canaan-map-bg.svg') center/80% 90% no-repeat,
 linear-gradient(145deg,#182521,#14292a 50%,#29261d)
}
html.bp-dark .cn-large-name,body.bp-dark .cn-large-name,html[data-theme="dark"] .cn-large-name{color:rgba(255,255,255,.18)}
html.bp-dark .cn-large-hex.owner-neutral,body.bp-dark .cn-large-hex.owner-neutral,html[data-theme="dark"] .cn-large-hex.owner-neutral{background:rgba(85,88,68,.85)}
html.bp-dark .cn-mini-hex,body.bp-dark .cn-mini-hex,html[data-theme="dark"] .cn-mini-hex{background:rgba(25,39,45,.9);color:#eff7f1}
@media(max-width:1180px){.cn-large-hex-field{transform:scale(.86);transform-origin:top left;width:760px}}

/* v8 — true honeycomb geometry */
.cn-invite-code-row small{font-size:9px;line-height:1.5;color:var(--cn-muted);font-weight:600}
.cn-invite-gate{gap:14px}.cn-invite-gate .cn-code-form{margin:5px 0}
.cn-invite-gate .cn-code-form input{text-transform:uppercase;letter-spacing:.08em;font-weight:900;text-align:center}

/*
  Flat-top hex geometry:
  big W=104, H=90
  horizontal center stride = 0.75W = 78px
  odd columns move down H/2 = 45px
  => neighboring large regions touch edge-to-edge.
*/
.cn-large-hex-field{
  position:absolute!important;
  z-index:4!important;
  left:50%!important;
  top:50%!important;
  right:auto!important;
  bottom:auto!important;
  width:572px!important;      /* 104 + 6*78 */
  height:675px!important;     /* 7*90 + 45 */
  transform:translate(-50%,-50%)!important;
  display:grid!important;
  grid-template-columns:repeat(7,78px)!important;
  grid-template-rows:repeat(7,90px)!important;
  gap:0!important;
  align-items:start!important;
  justify-items:start!important;
  overflow:visible!important;
}
.cn-large-hex{
  width:104px!important;
  height:90px!important;
  margin:0!important;
  justify-self:start!important;
  align-self:start!important;
  clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%)!important;
}
.cn-large-hex:nth-child(7n+2),
.cn-large-hex:nth-child(7n+4),
.cn-large-hex:nth-child(7n+6){
  transform:translateY(45px)!important;
}
.cn-large-hex:nth-child(14n+8),
.cn-large-hex:nth-child(14n+9),
.cn-large-hex:nth-child(14n+10),
.cn-large-hex:nth-child(14n+11),
.cn-large-hex:nth-child(14n+12),
.cn-large-hex:nth-child(14n+13),
.cn-large-hex:nth-child(14n+14){
  transform:none!important;
}
.cn-large-hex:nth-child(7n+2):hover:not(:disabled),
.cn-large-hex:nth-child(7n+4):hover:not(:disabled),
.cn-large-hex:nth-child(7n+6):hover:not(:disabled){
  transform:translateY(45px) scale(1.025)!important;
}
.cn-large-hex:hover:not(:disabled){transform:scale(1.025)}
.cn-large-hex:after{inset:0!important;border-width:3px!important}
.cn-large-name{font-size:14px!important;color:rgba(38,57,47,.15)!important}

/*
  Inner 7-cell honeycomb:
  mini W=25, H=22
  adjacent horizontal center stride = 18.75px
  diagonal vertical delta = 16.5px
  The center + six neighbors touch with no gaps.
*/
.cn-mini-grid{
  width:63px!important;
  height:55px!important;
  left:50%!important;
  top:50%!important;
  transform:translate(-50%,-50%)!important;
}
.cn-mini-hex{
  width:25px!important;
  height:22px!important;
  clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%)!important;
}
.cn-mini-hex:after{border-width:1px!important}
.cn-mini-hex b{font-size:8px!important}
.cn-mini-hex:nth-child(1){left:19px!important;top:16.5px!important} /* center */
.cn-mini-hex:nth-child(2){left:19px!important;top:0!important}    /* N */
.cn-mini-hex:nth-child(3){left:38px!important;top:8.25px!important} /* NE/E */
.cn-mini-hex:nth-child(4){left:38px!important;top:24.75px!important}
.cn-mini-hex:nth-child(5){left:19px!important;top:33px!important}
.cn-mini-hex:nth-child(6){left:0!important;top:24.75px!important}
.cn-mini-hex:nth-child(7){left:0!important;top:8.25px!important}

@media(max-width:1180px){
  .cn-large-hex-field{
    transform:translate(-50%,-50%) scale(.86)!important;
    transform-origin:center!important;
  }
}

/* v9 — 40x40 coordinate grid map */
.cn-grid-board{
  border:1px solid var(--cn-line);
  border-radius:15px;
  background:var(--cn-card);
  padding:10px;
}
.cn-grid-board-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:0 0 8px 30px}
.cn-grid-board-head b{font-size:11px;color:var(--cn-deep)}
.cn-grid-board-head span{font-size:8px;color:var(--cn-muted)}
.cn-coordinate-wrap{position:relative;padding:22px 0 0 25px}
.cn-grid-map-stage{
  position:relative;
  width:100%;
  aspect-ratio:1/1;
  max-height:810px;
  background:
    linear-gradient(rgba(248,248,240,.70),rgba(248,248,240,.70)),
    url('./promise-map-bg.jpg') center/cover no-repeat;
  border:1px solid color-mix(in srgb,var(--cn-line) 75%,transparent);
  overflow:hidden;
}
.cn-cell-grid{
  position:absolute;inset:0;z-index:4;
  display:grid;
  grid-template-columns:repeat(40,1fr);
  grid-template-rows:repeat(40,1fr);
}
.cn-map-cell{
  position:relative;min-width:0;min-height:0;padding:0;margin:0;
  border:0;border-right:1px solid rgba(57,72,63,.15);border-bottom:1px solid rgba(57,72,63,.15);
  background:transparent;color:rgba(30,45,35,.82);cursor:pointer;
  display:flex;align-items:center;justify-content:center;font:700 7px/1 sans-serif;
}
.cn-map-cell:nth-child(40n+1){border-left:1px solid rgba(57,72,63,.15)}
.cn-map-cell:nth-child(-n+40){border-top:1px solid rgba(57,72,63,.15)}
.cn-map-cell.grade-1{background:rgba(129,190,133,.075)}
.cn-map-cell.grade-2{background:rgba(223,191,91,.075)}
.cn-map-cell.grade-3{background:rgba(225,150,74,.075)}
.cn-map-cell.grade-4{background:rgba(215,104,104,.075)}
.cn-map-cell.grade-5{background:rgba(149,100,186,.075)}
.cn-map-cell span{pointer-events:none;opacity:.78}
.cn-map-cell:hover:not(:disabled){background:color-mix(in srgb,var(--cn-accent) 24%,transparent);z-index:5}
.cn-map-cell.is-target{
  background:color-mix(in srgb,var(--cn-accent) 30%,transparent)!important;
  outline:1px solid color-mix(in srgb,var(--cn-accent) 75%,#fff);
  outline-offset:-1px;z-index:6
}
.cn-region-label-layer{position:absolute;inset:0;z-index:3;pointer-events:none}
.cn-region-label{
  position:absolute;transform:translate(-50%,-50%);white-space:nowrap;
  font-size:clamp(9px,1.05vw,14px);font-weight:950;letter-spacing:-.04em;
  color:rgba(37,53,43,.20);text-shadow:0 1px rgba(255,255,255,.45);
}
.cn-col-coordinates{
  position:absolute;left:25px;right:0;top:0;height:20px;
  display:grid;grid-template-columns:repeat(40,1fr);font:700 6px/1 sans-serif;color:var(--cn-muted)
}
.cn-col-coordinates span{display:grid;place-items:center}
.cn-row-coordinates{
  position:absolute;left:0;top:22px;bottom:0;width:23px;
  display:grid;grid-template-rows:repeat(40,1fr);font:700 6px/1 sans-serif;color:var(--cn-muted)
}
.cn-row-coordinates span{display:grid;place-items:center}
.cn-grid-board .cn-map-legend{position:static!important;margin:8px 0 0 25px;display:flex;justify-content:flex-end;background:transparent!important;padding:0!important}
.cn-map-legend i.grade{width:11px;height:11px;border-radius:3px;border:1px solid rgba(0,0,0,.12)}
.cn-map-legend i.g1{background:rgba(129,190,133,.55)}.cn-map-legend i.g2{background:rgba(223,191,91,.55)}
.cn-map-legend i.g3{background:rgba(225,150,74,.55)}.cn-map-legend i.g4{background:rgba(215,104,104,.55)}
.cn-map-legend i.g5{background:rgba(149,100,186,.55)}
html.bp-dark .cn-grid-map-stage,body.bp-dark .cn-grid-map-stage,html[data-theme="dark"] .cn-grid-map-stage{
 background:
  linear-gradient(rgba(12,25,34,.72),rgba(12,25,34,.72)),
  url('./promise-map-bg.jpg') center/cover no-repeat;
}
html.bp-dark .cn-map-cell,body.bp-dark .cn-map-cell,html[data-theme="dark"] .cn-map-cell{
 color:rgba(240,247,241,.78);border-color:rgba(220,235,225,.10)
}
html.bp-dark .cn-region-label,body.bp-dark .cn-region-label,html[data-theme="dark"] .cn-region-label{
 color:rgba(240,247,241,.18);text-shadow:none
}
@media(max-width:1180px){
  .cn-grid-board-head{align-items:flex-start;flex-direction:column}
  .cn-map-cell{font-size:6px}
}

/* v10 — initial player territories and naval regions */
.cn-map-cell.owner-1{box-shadow:inset 0 0 0 999px rgba(37,132,232,.15)}
.cn-map-cell.owner-2{box-shadow:inset 0 0 0 999px rgba(229,72,72,.15)}
.cn-map-cell.owner-3{box-shadow:inset 0 0 0 999px rgba(54,168,107,.15)}
.cn-map-cell.owner-4{box-shadow:inset 0 0 0 999px rgba(113,57,166,.15)}
.cn-map-cell.owner-0{box-shadow:none}
.cn-region-label.is-water{color:rgba(29,92,143,.32)!important;font-style:italic}
html.bp-dark .cn-region-label.is-water,body.bp-dark .cn-region-label.is-water,html[data-theme="dark"] .cn-region-label.is-water{color:rgba(120,190,242,.34)!important}

.cn-grid-map-stage{background:linear-gradient(rgba(245,241,218,.16),rgba(245,241,218,.16)),url('./promise-map-bg.jpg') center/cover no-repeat!important;filter:saturate(1.3) contrast(1.14)}
.cn-map-cell{border-color:rgba(25,38,28,.25)!important;font-weight:950!important}.cn-map-cell span{opacity:1!important;color:#101d14!important;text-shadow:0 1px #fff}
.cn-map-cell.grade-1{background:rgba(55,150,70,.2)!important}.cn-map-cell.grade-2{background:rgba(210,163,20,.22)!important}.cn-map-cell.grade-3{background:rgba(216,105,20,.23)!important}.cn-map-cell.grade-4{background:rgba(202,48,48,.24)!important}.cn-map-cell.grade-5{background:rgba(110,42,157,.25)!important}
.cn-map-cell.owner-1{box-shadow:inset 0 0 0 999px rgba(20,100,215,.29)!important}.cn-map-cell.owner-2{box-shadow:inset 0 0 0 999px rgba(215,35,35,.29)!important}.cn-map-cell.owner-3{box-shadow:inset 0 0 0 999px rgba(25,145,75,.29)!important}.cn-map-cell.owner-4{box-shadow:inset 0 0 0 999px rgba(90,32,150,.29)!important}
.cn-map-cell.is-target{background:rgba(255,205,30,.58)!important;outline:1px solid #ff9800!important}.cn-map-cell.edge-l{border-left:1.5px solid rgba(20,30,22,.65)!important}.cn-map-cell.edge-r{border-right:1.5px solid rgba(20,30,22,.65)!important}.cn-map-cell.edge-t{border-top:1.5px solid rgba(20,30,22,.65)!important}.cn-map-cell.edge-b{border-bottom:1.5px solid rgba(20,30,22,.65)!important}
.cn-chat-log{height:330px!important;min-height:330px!important;padding:10px!important;overflow-y:auto!important}.cn-chat-message{margin:0 0 7px;padding:7px 8px;border-radius:8px;background:var(--cn-card);border:1px solid var(--cn-line);font-size:9px;color:var(--cn-ink)}.cn-chat-input{grid-template-columns:1fr 58px!important;padding:9px!important;gap:7px!important}.cn-chat-input input,.cn-chat-input button{height:39px!important}
html.bp-dark .cn-map-cell span,body.bp-dark .cn-map-cell span,html[data-theme="dark"] .cn-map-cell span{color:#fff!important;text-shadow:0 1px 2px #000!important}

/* v12 — approved full-map artwork + 40x40 cells across land and water */
.cn-coordinate-wrap{padding:0!important}
.cn-grid-map-stage{
  width:100%!important;
  aspect-ratio:1/1!important;
  max-height:none!important;
  background:
    linear-gradient(rgba(255,255,255,.04),rgba(255,255,255,.04)),
    url('./promise-map-english-v14.jpg') center/100% 100% no-repeat!important;
  filter:saturate(1.08) contrast(1.08)!important;
}
.cn-col-coordinates,.cn-row-coordinates{display:none!important}
.cn-cell-grid{inset:0!important}
.cn-map-cell{
  border-right:1px solid rgba(25,34,28,.38)!important;
  border-bottom:1px solid rgba(25,34,28,.38)!important;
  background:rgba(255,255,255,.035)!important;
  font-size:7px!important;
}
.cn-map-cell span{
  color:#fff!important;
  font-weight:950!important;
  opacity:1!important;
  text-shadow:
    -1px -1px 0 rgba(0,0,0,.68),
     1px -1px 0 rgba(0,0,0,.68),
    -1px  1px 0 rgba(0,0,0,.68),
     1px  1px 0 rgba(0,0,0,.68)!important;
}
.cn-map-cell.grade-1{background:rgba(60,145,72,.07)!important}
.cn-map-cell.grade-2{background:rgba(208,159,22,.07)!important}
.cn-map-cell.grade-3{background:rgba(216,102,26,.075)!important}
.cn-map-cell.grade-4{background:rgba(202,52,52,.08)!important}
.cn-map-cell.grade-5{background:rgba(111,46,158,.085)!important}
.cn-map-cell.owner-1{box-shadow:inset 0 0 0 999px rgba(28,116,226,.24)!important}
.cn-map-cell.owner-2{box-shadow:inset 0 0 0 999px rgba(222,54,54,.24)!important}
.cn-map-cell.owner-3{box-shadow:inset 0 0 0 999px rgba(39,163,88,.24)!important}
.cn-map-cell.owner-4{box-shadow:inset 0 0 0 999px rgba(113,52,174,.24)!important}
.cn-map-cell.owner-0{box-shadow:none!important}
.cn-map-cell.is-target{
  background:rgba(255,211,39,.40)!important;
  box-shadow:inset 0 0 0 999px rgba(255,211,39,.18)!important;
  outline:1px solid #ff9d00!important;
  z-index:8!important
}
.cn-region-label{
  color:rgba(255,255,255,.74)!important;
  font-weight:950!important;
  text-shadow:0 1px 3px rgba(0,0,0,.88)!important;
}
.cn-region-label.is-water{
  color:rgba(215,245,255,.90)!important;
  font-style:italic
}
html.bp-dark .cn-grid-map-stage,
body.bp-dark .cn-grid-map-stage,
html[data-theme="dark"] .cn-grid-map-stage{
  background:
    linear-gradient(rgba(0,0,0,.14),rgba(0,0,0,.14)),
    url('./promise-map-english-v14.jpg') center/100% 100% no-repeat!important;
  filter:saturate(1.10) contrast(1.11)!important;
}

/* v13 biblical geography map */
.cn-grid-map-stage{background-image:linear-gradient(rgba(255,255,255,.03),rgba(255,255,255,.03)),url('./promise-map-english-v14.jpg')!important}

/* v14 — English map + natural pointer drag selection */
.cn-grid-map-stage{background-image:linear-gradient(rgba(255,255,255,.02),rgba(255,255,255,.02)),url('./promise-map-english-v14.jpg')!important}
.cn-map-cell{touch-action:none;user-select:none}
.cn-map-cell.is-drag-selected{
  background:rgba(61,190,255,.52)!important;
  box-shadow:inset 0 0 0 999px rgba(34,164,235,.22)!important;
  outline:1px solid rgba(0,145,255,.95)!important;
  z-index:9!important;
}
.cn-map-cell.is-drag-selected span{color:#fff!important;text-shadow:0 1px 2px #003a60!important}

/* v15 water grades */
.cn-region-label.is-water{font-style:italic!important}


/* v16 — make grade numbers visible on every sea/lake/river cell */
.cn-map-cell .cn-cell-grade{
  position:relative;
  z-index:12;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:10px;
  min-height:10px;
  font-size:7px;
  line-height:1;
  font-weight:950;
  color:#fff!important;
  opacity:1!important;
  text-shadow:
    -1px -1px 0 rgba(0,0,0,.82),
     1px -1px 0 rgba(0,0,0,.82),
    -1px  1px 0 rgba(0,0,0,.82),
     1px  1px 0 rgba(0,0,0,.82),
     0 1px 2px rgba(0,0,0,.85)!important;
  pointer-events:none;
}
.cn-map-cell.is-water-cell{
  background:rgba(30,139,198,.10)!important;
}
.cn-map-cell.is-water-cell.grade-1{background:rgba(22,116,184,.14)!important}
.cn-map-cell.is-water-cell.grade-2{background:rgba(28,139,202,.16)!important}
.cn-map-cell.is-water-cell.grade-3{background:rgba(40,158,214,.18)!important}
.cn-map-cell.is-water-cell.grade-4{background:rgba(52,177,222,.20)!important}
.cn-map-cell.is-water-cell .cn-cell-grade{
  color:#fff!important;
  background:rgba(0,52,84,.34);
  border-radius:3px;
  padding:1px 2px;
}
html.bp-dark .cn-map-cell.is-water-cell .cn-cell-grade,
body.bp-dark .cn-map-cell.is-water-cell .cn-cell-grade,
html[data-theme="dark"] .cn-map-cell.is-water-cell .cn-cell-grade{
  background:rgba(0,0,0,.42);
  color:#fff!important;
}


/* v17 — FORCE water grade rendering from data-grade, independent of inner span */
.cn-map-cell.is-water-cell{
  position:relative!important;
  overflow:visible!important;
}
.cn-map-cell.is-water-cell::after{
  content:attr(data-grade)!important;
  position:absolute!important;
  inset:0!important;
  z-index:30!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  color:#ffffff!important;
  font-size:8px!important;
  line-height:1!important;
  font-weight:1000!important;
  font-family:Arial,Helvetica,sans-serif!important;
  text-shadow:
    -1px -1px 0 #00324d,
     1px -1px 0 #00324d,
    -1px  1px 0 #00324d,
     1px  1px 0 #00324d,
     0  1px 2px rgba(0,0,0,.9)!important;
  pointer-events:none!important;
}
.cn-map-cell.is-water-cell .cn-cell-grade{
  /* avoid double-printing because ::after is the guaranteed visible number */
  visibility:hidden!important;
}
.cn-map-cell.is-water-cell.grade-1::after{color:#ffffff!important}
.cn-map-cell.is-water-cell.grade-2::after{color:#fff8cf!important}
.cn-map-cell.is-water-cell.grade-3::after{color:#fff2a8!important}
html.bp-dark .cn-map-cell.is-water-cell::after,
body.bp-dark .cn-map-cell.is-water-cell::after,
html[data-theme="dark"] .cn-map-cell.is-water-cell::after{
  color:#ffffff!important;
  text-shadow:
    -1px -1px 0 #000,
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000,
     0 1px 3px #000!important;
}


/* v18 — universal grade overlay for every one of the 1,600 cells */
.cn-map-cell{
  position:relative!important;
  overflow:visible!important;
}
.cn-map-cell .cn-cell-grade{
  display:none!important;
}
.cn-map-cell::after{
  content:none!important;
}
.cn-map-cell .cn-grade-overlay{
  position:absolute!important;
  inset:0!important;
  z-index:100!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  height:100%!important;
  margin:0!important;
  padding:0!important;
  color:#ffffff!important;
  opacity:1!important;
  visibility:visible!important;
  font-family:Arial,Helvetica,sans-serif!important;
  font-size:8px!important;
  line-height:1!important;
  font-weight:900!important;
  letter-spacing:0!important;
  text-align:center!important;
  pointer-events:none!important;
  text-shadow:
    -1px -1px 0 rgba(0,0,0,.90),
     1px -1px 0 rgba(0,0,0,.90),
    -1px  1px 0 rgba(0,0,0,.90),
     1px  1px 0 rgba(0,0,0,.90),
     0 1px 2px rgba(0,0,0,.95)!important;
}
.cn-map-cell.is-water-cell .cn-grade-overlay{
  color:#fffbd6!important;
  background:rgba(0,65,105,.18)!important;
}
.cn-map-cell.is-water-cell.grade-1 .cn-grade-overlay{color:#ffffff!important}
.cn-map-cell.is-water-cell.grade-2 .cn-grade-overlay{color:#fff7c2!important}
.cn-map-cell.is-water-cell.grade-3 .cn-grade-overlay{color:#ffe889!important}
.cn-map-cell.is-water-cell.grade-4 .cn-grade-overlay{color:#ffd95c!important}
html.bp-dark .cn-map-cell .cn-grade-overlay,
body.bp-dark .cn-map-cell .cn-grade-overlay,
html[data-theme="dark"] .cn-map-cell .cn-grade-overlay{
  color:#ffffff!important;
  text-shadow:
    -1px -1px 0 #000,
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000,
     0 1px 3px #000!important;
}


/* v19 — clean image background + programmatically generated 40x40 game board */
.cn-coordinate-wrap{
  padding:0!important;
}
.cn-grid-map-stage{
  position:relative!important;
  width:100%!important;
  aspect-ratio:1/1!important;
  overflow:hidden!important;
  background:
    linear-gradient(rgba(255,255,255,.015),rgba(255,255,255,.015)),
    url('./promise-map-background-v19.jpg') center/100% 100% no-repeat!important;
  filter:none!important;
}
.cn-col-coordinates,
.cn-row-coordinates{
  display:none!important;
}
.cn-cell-grid{
  position:absolute!important;
  inset:0!important;
  z-index:20!important;
  display:grid!important;
  grid-template-columns:repeat(40,minmax(0,1fr))!important;
  grid-template-rows:repeat(40,minmax(0,1fr))!important;
  width:100%!important;
  height:100%!important;
  pointer-events:auto!important;
}
.cn-map-cell{
  position:relative!important;
  box-sizing:border-box!important;
  min-width:0!important;
  min-height:0!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  border-right:1px solid rgba(255,255,255,.28)!important;
  border-bottom:1px solid rgba(255,255,255,.28)!important;
  background:rgba(0,0,0,.015)!important;
  cursor:pointer!important;
  overflow:hidden!important;
  touch-action:none!important;
  user-select:none!important;
}
.cn-map-cell:nth-child(40n+1){
  border-left:1px solid rgba(255,255,255,.28)!important;
}
.cn-map-cell:nth-child(-n+40){
  border-top:1px solid rgba(255,255,255,.28)!important;
}
/* grade number is drawn by code, never by the background image */
.cn-map-cell .cn-cell-grade{
  display:none!important;
}
.cn-map-cell::after{
  content:none!important;
}
.cn-map-cell .cn-grade-overlay{
  position:absolute!important;
  inset:0!important;
  z-index:50!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  height:100%!important;
  padding:0!important;
  margin:0!important;
  opacity:1!important;
  visibility:visible!important;
  color:#fff!important;
  font-family:Arial,Helvetica,sans-serif!important;
  font-size:7.5px!important;
  font-weight:900!important;
  line-height:1!important;
  pointer-events:none!important;
  text-shadow:
    -1px -1px 0 rgba(0,0,0,.88),
     1px -1px 0 rgba(0,0,0,.88),
    -1px  1px 0 rgba(0,0,0,.88),
     1px  1px 0 rgba(0,0,0,.88)!important;
}
/* all territory shading is also code-generated */
.cn-map-cell.grade-1{background:rgba(31,106,173,.055)!important}
.cn-map-cell.grade-2{background:rgba(56,144,83,.060)!important}
.cn-map-cell.grade-3{background:rgba(214,174,46,.065)!important}
.cn-map-cell.grade-4{background:rgba(216,113,38,.070)!important}
.cn-map-cell.grade-5{background:rgba(202,59,52,.078)!important}
.cn-map-cell.owner-1{box-shadow:inset 0 0 0 999px rgba(27,111,221,.20)!important}
.cn-map-cell.owner-2{box-shadow:inset 0 0 0 999px rgba(219,55,55,.20)!important}
.cn-map-cell.owner-3{box-shadow:inset 0 0 0 999px rgba(37,158,82,.20)!important}
.cn-map-cell.owner-4{box-shadow:inset 0 0 0 999px rgba(111,52,176,.20)!important}
.cn-map-cell.owner-0{box-shadow:none!important}
.cn-map-cell.is-target,
.cn-map-cell.is-drag-selected{
  background:rgba(0,166,255,.34)!important;
  box-shadow:inset 0 0 0 999px rgba(0,166,255,.16)!important;
  outline:1px solid rgba(116,221,255,.95)!important;
  outline-offset:-1px!important;
  z-index:60!important;
}
.cn-map-cell.is-target .cn-grade-overlay,
.cn-map-cell.is-drag-selected .cn-grade-overlay{
  font-size:8px!important;
  color:#fff!important;
}
/* region boundaries are drawn by code from territories.json */
.cn-map-cell.edge-l{border-left:2px solid rgba(255,235,180,.82)!important}
.cn-map-cell.edge-r{border-right:2px solid rgba(255,235,180,.82)!important}
.cn-map-cell.edge-t{border-top:2px solid rgba(255,235,180,.82)!important}
.cn-map-cell.edge-b{border-bottom:2px solid rgba(255,235,180,.82)!important}
.cn-region-label-layer{
  position:absolute!important;
  inset:0!important;
  z-index:10!important;
  pointer-events:none!important;
}
.cn-region-label{
  font-family:Arial,Helvetica,sans-serif!important;
  font-size:clamp(8px,.9vw,13px)!important;
  font-weight:900!important;
  color:#fff!important;
  text-shadow:0 1px 3px rgba(0,0,0,.94)!important;
}
html.bp-dark .cn-grid-map-stage,
body.bp-dark .cn-grid-map-stage,
html[data-theme="dark"] .cn-grid-map-stage{
  background:
    linear-gradient(rgba(0,0,0,.10),rgba(0,0,0,.10)),
    url('./promise-map-background-v19.jpg') center/100% 100% no-repeat!important;
}


/* =========================================================
   BiblePang 7-color theme + future-proof complete dark mode
   New Promise pages should use .cn-theme-root and these variables.
   ========================================================= */
.cn-theme-root{
 --cn-accent:var(--bp-main-accent,var(--bp-home-accent,var(--bj-accent,#1769e0)));
 --cn-accent2:var(--bp-main-accent2,var(--bp-home-accent-2,var(--bj-accent2,#4388eb)));
 --cn-deep:var(--bp-main-deep,var(--bp-home-accent-deep,var(--bj-deep,#0d52bc)));
 --cn-soft:var(--bp-main-soft,var(--bp-home-accent-soft,var(--bj-soft,#edf5ff)));
}
.cn-hero{background:radial-gradient(circle at 84% 18%,rgba(255,255,255,.16),transparent 30%),linear-gradient(120deg,var(--cn-deep),var(--cn-accent) 68%,var(--cn-accent2))!important}
.cn-primary,.cn-action.is-play{background:linear-gradient(135deg,var(--cn-deep),var(--cn-accent))!important;border-color:var(--cn-accent)!important;color:#fff!important}

/* generic dark foundation for existing and future cards/panels/dialogs */
html.bp-dark .cn-theme-root,body.bp-dark .cn-theme-root,html[data-theme="dark"] .cn-theme-root,body.dark-mode .cn-theme-root,body.theme-dark .cn-theme-root{
 --cn-card:#132233;--cn-ink:#edf5fd;--cn-muted:#9eafc2;--cn-line:#2c4258;
 background:#0b1623!important;color:#edf5fd!important;
}
html.bp-dark :is(.cn-card,.cn-panel,.cn-room-row,.cn-modal-card,.cn-dialog,.cn-placeholder,.cn-empty,.cn-stat-card,.cn-shop-card,.cn-player-card,.cn-action-panel,.cn-game-panel),
body.bp-dark :is(.cn-card,.cn-panel,.cn-room-row,.cn-modal-card,.cn-dialog,.cn-placeholder,.cn-empty,.cn-stat-card,.cn-shop-card,.cn-player-card,.cn-action-panel,.cn-game-panel),
html[data-theme="dark"] :is(.cn-card,.cn-panel,.cn-room-row,.cn-modal-card,.cn-dialog,.cn-placeholder,.cn-empty,.cn-stat-card,.cn-shop-card,.cn-player-card,.cn-action-panel,.cn-game-panel){
 background:#132233!important;color:#edf5fd!important;border-color:#2c4258!important;box-shadow:0 10px 30px rgba(0,0,0,.2)!important;
}
html.bp-dark :is(.cn-theme-root input,.cn-theme-root textarea,.cn-theme-root select),
body.bp-dark :is(.cn-theme-root input,.cn-theme-root textarea,.cn-theme-root select),
html[data-theme="dark"] :is(.cn-theme-root input,.cn-theme-root textarea,.cn-theme-root select){
 background:#0f1c2a!important;color:#eef6fd!important;border-color:#30485f!important;
}
html.bp-dark .cn-btn:not(.cn-primary),body.bp-dark .cn-btn:not(.cn-primary),html[data-theme="dark"] .cn-btn:not(.cn-primary),
html.bp-dark .cn-action:not(.is-play),body.bp-dark .cn-action:not(.is-play),html[data-theme="dark"] .cn-action:not(.is-play){
 background:#1b2c40!important;color:#e9f2fb!important;border-color:#334b63!important;
}

/* all ordinary images are dark-mode aware; map keeps its dedicated rule */
html.bp-dark .cn-theme-root img:not(.cn-map-background),
body.bp-dark .cn-theme-root img:not(.cn-map-background),
html[data-theme="dark"] .cn-theme-root img:not(.cn-map-background){filter:brightness(.72) saturate(.86) contrast(1.03)}

/* Google ads */
html.bp-dark :is(.bp-side-ad,.bp-content-ad,.cn-content-ad,.cn-ad,.pl-ad,.pl-ad-slot),
body.bp-dark :is(.bp-side-ad,.bp-content-ad,.cn-content-ad,.cn-ad,.pl-ad,.pl-ad-slot),
html[data-theme="dark"] :is(.bp-side-ad,.bp-content-ad,.cn-content-ad,.cn-ad,.pl-ad,.pl-ad-slot){
 background:#0c1724!important;color:#93a8bc!important;border-color:#294159!important;
}
html.bp-dark :is(.bp-side-ad,.bp-content-ad,.cn-content-ad,.cn-ad,.pl-ad) iframe,
body.bp-dark :is(.bp-side-ad,.bp-content-ad,.cn-content-ad,.cn-ad,.pl-ad) iframe,
html[data-theme="dark"] :is(.bp-side-ad,.bp-content-ad,.cn-content-ad,.cn-ad,.pl-ad) iframe{filter:brightness(.76) saturate(.82)!important}