/* Territories: army counts on the map, the continents and log, the dice, the panels and cards. The rest comes from /rooms/room.css. */

.rk { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.rk > * { pointer-events: auto; }
.rk .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: middle; box-shadow: 0 0 0 1px rgba(0,0,0,.45); }

/* the armies on each territory */
.rk-labels { position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }
.rk-army { position: absolute; left: 0; top: 0; min-width: 18px; padding: 1px 5px; border-radius: 9px; text-align: center; font: 800 12px/15px system-ui, sans-serif;
  color: #111; background: var(--pc, #ddd); box-shadow: 0 1px 3px rgba(0,0,0,.6), inset 0 0 0 1px rgba(0,0,0,.35); white-space: nowrap; will-change: transform; }
.rk-army[hidden] { display: none; }
.rk-army.p0 { --pc: #e0574b; color: #fff; }
.rk-army.p1 { --pc: #5a80e0; color: #fff; }
.rk-army.p2 { --pc: #4fae5c; color: #fff; }
.rk-army.p3 { --pc: #f1cf52; }
.rk-army.p4 { --pc: #ad6acc; color: #fff; }
.rk-army.p5 { --pc: #f2f2ec; }
.rk-army.sel { outline: 2px solid #fff; outline-offset: 1px; }
.rk-army.tgt { outline: 2px solid #f1d59a; outline-offset: 1px; }
.rk-army.add { box-shadow: 0 0 0 2px #f1d59a, 0 1px 3px rgba(0,0,0,.6); }
@media (max-width: 700px) { .rk-army { font-size: 10.5px; line-height: 13px; min-width: 15px; padding: 0 4px; } }

/* continents and the log, on the left */
.rk-side { position: absolute; left: calc(12px + env(safe-area-inset-left, 0px)); top: calc(66px + env(safe-area-inset-top, 0px)); width: min(240px, 38vw); display: grid; gap: 8px; pointer-events: none; }
.rk-side > * { pointer-events: auto; }
.rk-conts, .rk-log { padding: 7px 10px; border-radius: 10px; background: var(--glass, rgba(10,12,16,.72)); backdrop-filter: blur(8px); color: #e8dfcd; font-size: 12px; }
.rk-conts:empty, .rk-log:empty { display: none; }
.rk-conts { display: grid; gap: 2px; }
.rk-cont { display: flex; align-items: center; color: #b8ad9a; }
.rk-cont b { margin-left: auto; color: #d9b26b; font-weight: 700; }
.rk-cont.held { color: #f1e6cf; }
.rk-cont .dot { box-shadow: 0 0 0 1px rgba(255,255,255,.25); }
.rk-log { list-style: none; margin: 0; display: grid; gap: 3px; line-height: 1.4; max-height: 32vh; overflow: hidden; }
.rk-log li.big { color: #f1d59a; font-weight: 700; }
@media (max-width: 700px), (max-height: 520px) { .rk:has(.rk-panel:not([hidden])) .rk-conts { display: none; } .rk-log { display: none; } .rk-side { top: auto; bottom: calc(132px + env(safe-area-inset-bottom, 0px)); width: 150px; } .rk-conts { font-size: 10.5px; padding: 5px 8px; } }

/* the last battle's dice */
.rk-dice { position: absolute; left: 50%; top: var(--rk-top, calc(14px + env(safe-area-inset-top, 0px))); transform: translateX(-50%); padding: 8px 14px 6px; border-radius: 14px;
  background: rgba(16,13,10,.9); border: 1px solid rgba(217,178,107,.35); box-shadow: 0 12px 30px rgba(0,0,0,.45); color: #efe6d6; text-align: center; pointer-events: none; z-index: 3; max-width: calc(100vw - 32px); }
.rk-dice[hidden] { display: none; }
.rk-dice.in { animation: rk-in .25s ease-out; }
@keyframes rk-in { from { opacity: 0; transform: translate(-50%, -8px); } }
.rk-dice p { margin: 4px 0 0; font-size: 12px; color: #d9cfbd; }
.rk-roll { display: flex; align-items: center; gap: 12px; justify-content: center; }
.rk-roll .who { display: grid; gap: 3px; justify-items: center; }
.rk-roll small { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: #d9b26b; }
.rk-roll .vs { font: italic 14px var(--gu-serif); color: #a99f8f; }
.rk-roll .dice { display: flex; gap: 5px; }
.rk-die { width: 28px; height: 28px; border-radius: 6px; display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); padding: 4px; box-sizing: border-box;
  background: var(--rk-die, #e6dcc6); box-shadow: inset 0 -2px 0 rgba(0,0,0,.25), 0 2px 4px rgba(0,0,0,.4); }
.rk-die b { width: 5px; height: 5px; margin: auto; border-radius: 50%; background: var(--rk-pip, #1a120a); visibility: hidden; }
.rk-die.def { background: var(--rk-def, #2a2c33); }
.rk-die.def b { background: var(--rk-defpip, #eee); }
.rk-die.lost { opacity: .4; }
.rk-die.d1 b:nth-child(5), .rk-die.d2 b:nth-child(1), .rk-die.d2 b:nth-child(9),
.rk-die.d3 b:nth-child(1), .rk-die.d3 b:nth-child(5), .rk-die.d3 b:nth-child(9),
.rk-die.d4 b:nth-child(1), .rk-die.d4 b:nth-child(3), .rk-die.d4 b:nth-child(7), .rk-die.d4 b:nth-child(9),
.rk-die.d5 b:nth-child(1), .rk-die.d5 b:nth-child(3), .rk-die.d5 b:nth-child(5), .rk-die.d5 b:nth-child(7), .rk-die.d5 b:nth-child(9),
.rk-die.d6 b:nth-child(1), .rk-die.d6 b:nth-child(3), .rk-die.d6 b:nth-child(4), .rk-die.d6 b:nth-child(6), .rk-die.d6 b:nth-child(7), .rk-die.d6 b:nth-child(9) { visibility: visible; }

/* what you're doing: placing, attacking, moving in, fortifying */
.rk-panel { position: absolute; right: calc(12px + env(safe-area-inset-right, 0px)); bottom: calc(96px + env(safe-area-inset-bottom, 0px)); width: min(290px, calc(100vw - 24px)); padding: 12px 14px; border-radius: 14px;
  background: rgba(16,13,10,.93); border: 1px solid rgba(217,178,107,.35); box-shadow: 0 18px 50px rgba(0,0,0,.5); color: #efe6d6; font-size: 13.5px; box-sizing: border-box; z-index: 3; }
.rk-panel h3 { margin: 0 0 4px; font: 400 19px var(--gu-serif); color: #f6ecd8; }
.rk-panel p { margin: 4px 0; }
.rk-panel .fine { font-size: 12px; color: #b8ad9a; }
.rk-panel ul { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 5px; max-height: 26vh; overflow-y: auto; }
.rk-panel li { display: flex; align-items: center; gap: 5px; }
.rk-panel li span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-panel li b { min-width: 28px; text-align: center; color: #f1d59a; }
.rk-panel .mini { width: 26px; height: 26px; border-radius: 7px; border: 1px solid rgba(217,178,107,.4); background: rgba(255,255,255,.04); color: #f1d59a; font-size: 15px; line-height: 1; cursor: pointer; padding: 0; }
.rk-panel .mini.wide { width: auto; padding: 0 8px; font-size: 12px; }
.rk-panel .mini:disabled { opacity: .35; cursor: default; }
.rk-panel .row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.rk-panel .lbl { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #d9b26b; }
.rk-panel .vs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.rk-panel .vs b { color: #f1d59a; }
.rk-chips { display: flex; gap: 6px; }
.rk-chips button { min-width: 34px; height: 30px; border-radius: 8px; border: 1px solid rgba(217,178,107,.4); background: rgba(255,255,255,.04); color: #efe6d6; font: 700 14px system-ui, sans-serif; cursor: pointer; }
.rk-chips button.on { background: linear-gradient(180deg, #f1d59a, #c99b4f); color: #1d150a; }
.rk-chips button:disabled { opacity: .3; cursor: default; }
.rk-step { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; }
.rk-step input { flex: 1; accent-color: #d9b26b; }
.rk-step b { min-width: 26px; text-align: center; font: 700 18px var(--gu-serif); color: #f1d59a; }
.rk-step button { width: 30px; height: 30px; border-radius: 8px; border: 1px solid rgba(217,178,107,.4); background: rgba(255,255,255,.04); color: #f1d59a; font-size: 17px; cursor: pointer; }
.dock .go.on { background: linear-gradient(180deg, #f1d59a, #c99b4f); color: #1d150a; }
.side .rk-chip { float: right; min-width: 24px; padding: 2px 6px; border-radius: 999px; text-align: center; font-weight: 800; font-size: 13px; color: #111; margin-left: 8px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.3); }

/* zooming the map */
.rk-zoom { position: absolute; right: calc(12px + env(safe-area-inset-right, 0px)); top: 50%; transform: translateY(-50%); display: grid; gap: 6px; }
.rk-zoom button { width: 36px; height: 36px; border-radius: 10px; border: 1px solid rgba(217,178,107,.35); background: rgba(16,13,10,.75); color: #f1d59a; font-size: 20px; cursor: pointer; }
@media (min-width: 1000px) { .rk-zoom { top: auto; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); right: auto; left: calc(12px + env(safe-area-inset-left, 0px)); } }

/* cards */
.rk-modal { position: fixed; inset: 0; display: grid; place-items: center; padding: 16px; background: rgba(0,0,0,.5); z-index: 30; overflow-y: auto; }
.rk-modal[hidden] { display: none; }
.rk-modal .card { width: min(560px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; padding: 18px 20px; border-radius: 16px; background: #15110d; border: 1px solid rgba(217,178,107,.35); box-shadow: 0 30px 80px rgba(0,0,0,.6); color: #efe6d6; box-sizing: border-box; }
.rk-modal h2 { margin: 0 0 6px; font: 400 26px var(--gu-serif); color: #f6ecd8; }
.rk-modal .row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.rk-hand { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.rk-card { appearance: none; position: relative; width: 86px; height: 118px; border-radius: 9px; border: 0; padding: 8px 6px; display: grid; grid-template-rows: 1fr auto auto; justify-items: center; gap: 2px; cursor: pointer;
  background: linear-gradient(170deg, #f3ead6, #d9c9a4); color: #2a1d10; box-shadow: 0 6px 14px rgba(0,0,0,.45), inset 0 0 0 2px rgba(120,90,40,.35); font: inherit; }
.rk-card:disabled { cursor: default; }
.rk-card .icon { font-size: 34px; line-height: 1.1; align-self: center; }
.rk-card small { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; font-weight: 800; color: #7a5a2a; }
.rk-card .name { font: 12px/1.15 var(--gu-serif); text-align: center; }
.rk-card .mine { position: absolute; top: 5px; right: 6px; font: 800 10px system-ui; font-style: normal; color: #2f6b2a; }
.rk-card.wild { background: linear-gradient(170deg, #f6e3a8, #d9a94a); }
.rk-card.on { outline: 3px solid #f1d59a; outline-offset: 3px; transform: translateY(-6px); }

/* an online room filling up */

/* the quartermaster's swatches */
.swatch-map { background: var(--table); padding: 10px; }
.swatch-map i:first-child { position: absolute; inset: 10px; border-radius: 6px; background: var(--sea); }
.swatch-map i:last-child { position: absolute; left: 24%; top: 26%; width: 30%; height: 40%; background: var(--land); clip-path: polygon(10% 0, 80% 10%, 100% 60%, 60% 100%, 20% 80%, 0 40%); box-shadow: 40px 6px 0 -2px var(--land); }
.swatch-armies { gap: 10px; background: #2a1d10; }
.swatch-armies i { display: block; width: 16px; height: 28px; background: #c4382c; box-shadow: 0 3px 5px rgba(0,0,0,.5); }
.swatch-armies i:nth-child(2) { background: #3d65c9; }
.swatch-armies i:nth-child(3) { background: #3f9a4b; }
.swatch-armies.tin i { border-radius: 8px 8px 3px 3px; background-image: linear-gradient(90deg, rgba(255,255,255,.35), transparent 60%); }
.swatch-armies.wood i { width: 20px; height: 20px; border-radius: 3px; background-image: linear-gradient(160deg, rgba(255,255,255,.18), transparent); }
.swatch-armies.gem i { width: 20px; height: 24px; clip-path: polygon(50% 0, 100% 35%, 50% 100%, 0 35%); background-image: linear-gradient(120deg, rgba(255,255,255,.5), transparent 50%); }
.swatch-dice { gap: 10px; background: #1c1712; }
.swatch-dice i { width: 30px; height: 30px; border-radius: 6px; background: var(--die); display: flex; flex-wrap: wrap; align-content: space-around; justify-content: space-around; padding: 5px; box-sizing: border-box; }
.swatch-dice i.def { background: var(--def); }
.swatch-dice b { width: 6px; height: 6px; border-radius: 50%; background: var(--pip); }
.swatch-dice i.def b { background: var(--defpip); }