/* Card Wars: treehouse wood, green felt, riveted steel, parchment.
   Look taken from the "Card Wars Web" Claude Design project. */
:root {
  --ink: #16212b; --gold: #ffd34d; --parch: #f4e6bf; --parch-ink: #2a1f10; --paper: #f6ebc6;
  --hand-font: 'Patrick Hand', 'Comic Sans MS', 'Chalkboard SE', cursive;
  --big-font: 'Luckiest Guy', 'Impact', cursive;
  color-scheme: light;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: #a8793f; }
body { margin: 0; min-height: 100vh; font-family: var(--hand-font); font-size: 18px; color: #fff; }
a { color: #fff; } a:hover { color: #ffe7a3; }
button { font: inherit; }
button:not(:disabled) { cursor: pointer; }
button:disabled { cursor: default; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

/* ---------- materials */
.wood { background-color: #a8793f; background-image: repeating-linear-gradient(180deg, rgba(40,22,6,.75) 0 3px, transparent 3px 64px), repeating-linear-gradient(180deg, rgba(255,225,170,.09) 0 2px, transparent 2px 11px), repeating-linear-gradient(90deg, transparent 0 300px, rgba(40,22,6,.5) 300px 303px, transparent 303px 600px); }
.steel { background-color: #3f6a8f; background-image: radial-gradient(circle at 12px 12px, #dbe6ee 0 2.5px, #16212b 2.5px 4px, transparent 4.5px), radial-gradient(circle at calc(100% - 12px) 12px, #dbe6ee 0 2.5px, #16212b 2.5px 4px, transparent 4.5px), radial-gradient(circle at 12px calc(100% - 12px), #dbe6ee 0 2.5px, #16212b 2.5px 4px, transparent 4.5px), radial-gradient(circle at calc(100% - 12px) calc(100% - 12px), #dbe6ee 0 2.5px, #16212b 2.5px 4px, transparent 4.5px), linear-gradient(180deg, #4d7ca5, #345a7b); border: 3px solid var(--ink); border-radius: 14px; box-shadow: inset 0 3px 0 rgba(255,255,255,.3), inset 0 -4px 0 rgba(0,0,0,.28), 0 5px 0 var(--ink); color: #fff; }
.well { background: #1c3045; border: 3px solid #0e1822; border-radius: 10px; box-shadow: inset 0 4px 10px rgba(0,0,0,.55); color: #fff; }
.felt { position: relative; background-color: #3b7a37; background-image: radial-gradient(rgba(0,0,0,.12) 1px, transparent 1.6px); background-size: 6px 6px; border: 12px solid #7a4e26; border-radius: 28px; box-shadow: 0 0 0 3px #1f1a12, inset 0 0 0 3px #1f1a12, inset 0 14px 30px rgba(0,0,0,.35), 0 10px 0 3px #1f1a12; margin-bottom: 10px; /* room for the drop shadow below */ }
.parch { background-color: var(--parch); background-image: radial-gradient(rgba(140,100,40,.14) 1px, transparent 1.6px); background-size: 7px 7px; border: 3px solid #3a2a14; border-radius: 10px; box-shadow: inset 0 0 0 3px #e3cd96, 0 4px 0 #3a2a14; color: var(--parch-ink); }
.h { font-family: var(--hand-font); font-weight: 400; color: #fff; -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; text-shadow: 0 3px 0 var(--ink); letter-spacing: .5px; margin: 0; }
.ink { text-shadow: 0 2px 0 var(--ink); }
.muted { color: #d6e2ec; }
.parch .muted { color: #6b5a3a; }

/* ---------- buttons */
.btn-red, .btn-green, .btn-purple, .btn-steel { font-family: var(--big-font); color: #fff; padding: 4px 18px 0; letter-spacing: .5px; }
.btn-red { -webkit-text-stroke: 3px #3b0d0a; paint-order: stroke fill; text-shadow: 0 3px 0 #3b0d0a; background: linear-gradient(180deg, #f2584a 0 48%, #d2352b 48% 100%); border: 3px solid #3b0d0a; border-radius: 14px; box-shadow: 0 0 0 5px #7d9bb3, 0 0 0 8px var(--ink), inset 0 3px 0 rgba(255,255,255,.35), 0 10px 0 4px var(--ink); }
.btn-green { -webkit-text-stroke: 3px #173a0c; paint-order: stroke fill; text-shadow: 0 3px 0 #173a0c; background: linear-gradient(180deg, #7dd24c 0 48%, #4fa62c 48% 100%); border: 3px solid #173a0c; border-radius: 14px; box-shadow: 0 0 0 5px #7d9bb3, 0 0 0 8px var(--ink), inset 0 3px 0 rgba(255,255,255,.35), 0 10px 0 4px var(--ink); }
.btn-purple { -webkit-text-stroke: 2.5px #1f1033; paint-order: stroke fill; background: linear-gradient(180deg, #9b6ad6 0 48%, #7442b0 48% 100%); border: 3px solid #1f1033; border-radius: 12px; box-shadow: inset 0 2px 0 rgba(255,255,255,.35), 0 4px 0 #1f1033; }
.btn-steel { font-family: var(--hand-font); padding: 0 16px; text-shadow: 0 2px 0 var(--ink); background: linear-gradient(180deg, #5a8bb5, #3a6386); border: 3px solid var(--ink); border-radius: 12px; box-shadow: inset 0 2px 0 rgba(255,255,255,.3), 0 4px 0 var(--ink); text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
button:disabled.btn-steel, button:disabled.btn-red, button:disabled.btn-green { filter: grayscale(.75); opacity: .6; }
button:not(:disabled).btn-red:active, button:not(:disabled).btn-green:active { transform: translateY(3px); }
.orb { border-radius: 50%; background: radial-gradient(circle at 35% 30%, #c39cf0 0 16%, #7d48bd 46%, #48207c 100%); border: 3px solid #1f1033; box-shadow: 0 0 0 5px #7d9bb3, 0 0 0 8px var(--ink), 0 8px 0 4px var(--ink); color: #fff; font-family: var(--big-font); -webkit-text-stroke: 4px #1f1033; paint-order: stroke fill; display: flex; align-items: center; justify-content: center; }
.pill { display: inline-block; border: 2.5px solid #1f1a12; border-radius: 999px; padding: 1px 12px; font-size: 16px; color: var(--parch-ink); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

/* ---------- page shell */
.table { max-width: 1400px; margin: 0 auto; padding: 16px 20px 56px; display: flex; flex-direction: column; gap: 16px; }
.cols { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; }
.main { flex: 999 1 760px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.side { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.topbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.topbar .l { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.topbar .btn-steel { min-height: 44px; font-size: 19px; }
.topbar h1 { font-size: 36px; color: var(--gold); }
.turnbox { display: flex; align-items: center; gap: 10px; padding: 6px 24px; flex-wrap: wrap; }
.turnbox .chip { border: 2px solid #3b0d0a; border-radius: 999px; padding: 0 12px; font-size: 17px; text-shadow: 0 2px 0 #3b0d0a; background: #d2352b; }
.turnbox .chip.theirs { background: #2e5f9c; border-color: var(--ink); text-shadow: 0 2px 0 var(--ink); }
.conn { position: fixed; right: 12px; bottom: 10px; z-index: 5; font-size: 14px; border-radius: 999px; padding: 0 12px; border: 2px solid var(--ink); background: #3a6386; text-shadow: 0 1px 0 var(--ink); }
.conn.ok { background: #4fa62c; } .conn.bad { background: #d2352b; }
.banner { position: fixed; left: 50%; top: 12px; transform: translateX(-50%); z-index: 20; max-width: min(92vw, 720px); padding: 8px 18px; font-size: 18px; text-align: center; color: #fff; background: #b8301f; border: 3px solid #3b0d0a; border-radius: 12px; box-shadow: 0 4px 0 #3b0d0a; }
.banner.info { background: #2e5f9c; border-color: var(--ink); box-shadow: 0 4px 0 var(--ink); }

/* ---------- home screen (the "Lobby" board of the Card Wars Web design) */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.lobby { max-width: 1240px; margin: 0 auto; padding: 18px 20px 72px; font-size: 19px; display: flex; flex-direction: column; gap: 34px; }
.lsection { display: flex; flex-direction: column; gap: 16px; scroll-margin-top: 16px; }
.lsection > h2, .deckhead h2 { margin: 0; font-size: 38px; }
.lhead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }
.who { display: flex; align-items: center; gap: 12px; padding: 10px 28px 10px 21px; min-width: 0; } /* clear of the rivets in the corners */
.avatar { position: relative; overflow: hidden; flex: 0 0 auto; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; background: #c98a1f; font-family: var(--big-font); font-size: 26px; padding-top: 4px; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.avatar.pic { color: transparent; -webkit-text-stroke: 0; } /* the picture covers the letter, even where it is see-through */
.whotext { display: flex; flex-direction: column; min-width: 0; }
.whoname { font: inherit; font-size: 24px; line-height: 1.1; color: #fff; text-shadow: 0 3px 0 var(--ink); background: transparent; border: 0; border-bottom: 2px dashed transparent; padding: 0; min-width: 0; width: 12em; max-width: 100%; }
.whoname:hover:not(:disabled), .whoname:focus { border-bottom-color: rgba(255,255,255,.55); }
.whoname:disabled { opacity: 1; -webkit-text-fill-color: #fff; }
.whotext .ink { font-size: 16px; }
.laccount a, .laccount button { display: inline-flex; align-items: center; min-height: 46px; padding: 0 18px; text-decoration: none; font-size: 20px; }
.laccount { display: flex; flex-wrap: wrap; gap: 10px; }
.lobby .felt { border-width: 14px; border-radius: 32px; }
.hero { padding: 30px 28px 40px; display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; }
.herodecks { align-self: stretch; width: 100%; max-width: 1100px; margin: 0 auto; text-align: left; }
.hero h1 { margin: 0; font-family: var(--big-font); font-weight: 400; font-size: clamp(60px, 10vw, 128px); line-height: .95; color: #ffb428; -webkit-text-stroke: 8px #3b1a05; paint-order: stroke fill; text-shadow: 0 6px 0 #3b1a05, 0 14px 18px rgba(0,0,0,.35); letter-spacing: 3px; }
.modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; max-width: 820px; }
.mode { display: flex; flex-direction: column; gap: 12px; padding: 22px 22px 26px; min-width: 0; }
.mode h3 { margin: 0; font-size: 28px; }
.mode p { margin: 0; line-height: 1.3; flex: 1 1 auto; }
.mode label { font-size: 17px; }
.modeicon { flex: 0 0 auto; width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, #6a9cc6, #3f6a8f); border: 3px solid var(--ink); border-radius: 14px; box-shadow: inset 0 3px 0 rgba(255,255,255,.4), inset 0 -5px 0 rgba(0,0,0,.3), 0 4px 0 var(--ink); }
.modeicon svg { width: 40px; height: 40px; }
.mode .big { display: inline-flex; justify-content: center; align-items: center; min-height: 60px; margin: 8px; font-size: 28px; padding-top: 5px; letter-spacing: 1px; }
.joinrow { display: flex; gap: 8px; }
.joinrow input { flex: 1 1 auto; min-width: 0; min-height: 48px; padding: 0 12px; font-family: var(--hand-font); font-size: 21px; letter-spacing: 2px; text-transform: uppercase; }
.joinrow button, .mode > .btn-steel:not(.big) { min-height: 48px; padding: 0 16px; font-size: 19px; }
.lobby input.well::placeholder { color: #8fa3b5; }
.lobby input.well, .lobby select.well { font-family: var(--hand-font); color: #fff; }
.lobby select.well { min-height: 44px; padding: 0 10px; font-size: 18px; width: 100%; }
.lobby select.well option { color: var(--ink); background: var(--parch); }
.options { font-size: 16px; }
.options summary { cursor: pointer; }
.options label { display: flex; flex-direction: column; gap: 3px; margin-top: 8px; }
.deckhead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.deckhead .btn-steel { display: inline-flex; align-items: center; min-height: 46px; padding: 0 18px; font-size: 19px; }
.shelf { padding: 22px 22px 34px; background-color: #5e3a1a; background-image: repeating-linear-gradient(180deg, rgba(255,220,160,.07) 0 2px, transparent 2px 9px); border: 3px solid #1f1a12; border-radius: 16px; box-shadow: inset 0 -14px 0 #3e240e, inset 0 3px 0 rgba(255,255,255,.15), 0 6px 0 #1f1a12; }
.shelfgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 20px; }
.deckbox { position: relative; display: flex; flex-direction: column; padding: 0; border: 3px solid #1f1a12; border-radius: 12px; box-shadow: inset 0 3px 0 rgba(255,255,255,.25), 0 6px 0 #1f1a12; transition: transform 120ms ease; font-family: var(--hand-font); color: var(--parch-ink); text-align: left; overflow: hidden; min-width: 0; }
.deckbox[aria-pressed="true"] { box-shadow: 0 0 0 4px #ffd34d, 0 0 22px 8px rgba(255,211,77,.55), 0 8px 0 #1f1a12; transform: translateY(-6px); }
.deckbox:disabled { filter: grayscale(.7); opacity: .75; }
@media (prefers-reduced-motion: reduce) { .deckbox { transition: none; } }
.deckbox .lid { height: 22px; background: rgba(0,0,0,.22); border-bottom: 3px solid #1f1a12; }
.deckbox .dbody { padding: 14px 12px 12px; display: flex; flex-direction: column; gap: 10px; }
.deckbox .lands { display: flex; gap: 6px; min-height: 22px; }
.deckbox .lands i { display: block; width: 22px; height: 22px; border: 2.5px solid #1f1a12; border-radius: 4px; transform: rotate(45deg); box-shadow: inset 0 2px 0 rgba(255,255,255,.45); }
.deckbox .plate { padding: 6px 10px; box-shadow: none; display: flex; flex-direction: column; gap: 2px; }
.deckbox .plate b { font-weight: 400; font-size: 22px; line-height: 1.1; overflow-wrap: anywhere; }
.deckbox .plate span { font-size: 16px; line-height: 1.2; }
.deckbox .dfoot { display: flex; justify-content: space-between; align-items: center; font-size: 16px; color: #fff; text-shadow: 0 2px 0 #1f1a12; }
.deckbox .picked { background: #ffd34d; color: var(--parch-ink); text-shadow: none; border: 2px solid #1f1a12; border-radius: 999px; padding: 0 10px; }
.lobby .hint { margin: 0; min-height: 1.2em; font-size: 17px; text-shadow: 0 2px 0 var(--ink); }
.rules { padding: 22px 24px; display: flex; flex-direction: column; gap: 14px; }
.ruleshead { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px; }
.ruleshead h2 { margin: 0; font-family: var(--hand-font); font-weight: 400; font-size: 32px; }
.steps { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.steps li { display: flex; align-items: center; gap: 10px; border: 2px dashed #b89a5c; border-radius: 10px; padding: 8px 10px; font-size: 18px; line-height: 1.15; }
.stepno { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #c39cf0 0 16%, #7d48bd 46%, #48207c 100%); border: 2.5px solid #1f1033; color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--big-font); font-size: 17px; padding-top: 3px; }
.disclaimer { text-align: center; font-size: 16px; line-height: 1.4; padding: 10px 16px; align-self: center; max-width: 720px; }
.serverbox { margin-top: 8px; font-size: 15px; text-align: left; }
.serverbox summary { cursor: pointer; text-align: center; }
.serverbox label { display: flex; flex-direction: column; gap: 3px; margin-top: 8px; }
.serverbox input { min-height: 40px; padding: 0 10px; font-family: var(--hand-font); font-size: 17px; color: #fff; }
.serverbox button { margin-top: 8px; min-height: 40px; padding: 0 16px; font-size: 17px; }

/* ---------- players */
.pbar { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 12px 28px; }
.shield { position: relative; width: 58px; height: 64px; flex: 0 0 auto; }
.shield svg { width: 100%; height: 100%; display: block; }
.shield span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding-top: 4px; font-family: var(--big-font); font-size: 24px; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; }
.avatar { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; font-family: var(--big-font); font-size: 26px; padding-top: 4px; }
.pname { flex: 1 1 200px; min-width: 0; }
.pname .h { font-size: 26px; line-height: 1.1; }
.pname .sub { font-size: 16px; text-shadow: 0 2px 0 var(--ink); }
.backs { display: flex; align-items: center; padding-left: 6px; }
.back { width: 24px; height: 34px; margin-left: -6px; background: #b8301f; border: 2px solid #3b0d0a; border-radius: 5px; box-shadow: inset 0 0 0 2px #e8a33a; display: flex; align-items: center; justify-content: center; }
.back i { width: 8px; height: 8px; background: #e8a33a; border: 1.5px solid #3b0d0a; transform: rotate(45deg); }
.counts { display: flex; gap: 6px; flex-wrap: wrap; font-size: 16px; }
.counts button { padding: 2px 10px; border-radius: 999px; color: #fff; font-size: 16px; }
.counts button:not(:disabled):hover { border-color: var(--gold); }
.herochip { display: flex; align-items: center; gap: 8px; flex: 0 1 auto; }
.herochip .hero { display: flex; align-items: baseline; gap: 8px; padding: 4px 12px; border-radius: 999px; cursor: pointer; font: inherit; color: inherit; }
.herochip .hero .tag { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; opacity: .75; }
.herochip .hero .nm { font-family: var(--big-font); font-size: 18px; }
.herochip .hero.go { outline: 4px solid #7dd24c; outline-offset: 2px; }
.herochip .hero.sel { outline-color: var(--gold); }
.hpbar { flex: 0 1 200px; height: 20px; padding: 2px; border-radius: 999px; }
.hpbar div { height: 100%; border-radius: 999px; background: linear-gradient(180deg, #ff7a6b 0 45%, #d2352b 45% 100%); transition: width 300ms ease; }

/* ---------- prompt bar */
.prompt { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; padding: 10px 16px; font-size: 19px; line-height: 1.2; text-align: center; border-radius: 16px; min-height: 56px; }
.prompt.you { box-shadow: inset 0 4px 10px rgba(0,0,0,.55), 0 0 0 3px rgba(255,211,77,.7); }
.prompt button { min-height: 36px; font-size: 17px; }
.prompt .btn-green, .prompt .btn-purple, .prompt .btn-red { font-size: 20px; min-height: 40px; box-shadow: inset 0 2px 0 rgba(255,255,255,.35), 0 4px 0 var(--ink); }

/* ---------- battlefield */
.lanes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.lane { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.strip { box-sizing: border-box; height: 46px; width: 100%; display: flex; align-items: center; justify-content: center; border: 2.5px dashed rgba(255,255,255,.45); border-radius: 10px; padding: 4px 6px; font-size: 15px; background: transparent; color: #e3f0dc; font-family: inherit; }
.strip.mine.empty { color: #e3f0dc; }
.strip .row { width: 100%; display: flex; align-items: center; gap: 6px; padding: 2px 6px; min-width: 0; border: 2px solid #3a2a14; border-radius: 8px; background: var(--parch); color: var(--parch-ink); }
.strip .row .orb { flex: 0 0 auto; width: 24px; height: 24px; font-size: 13px; padding-top: 2px; box-shadow: none; border-width: 2px; -webkit-text-stroke: 2px #1f1033; }
.strip .row .nm { flex: 1 1 auto; min-width: 0; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.strip .row .tag { flex: 0 0 auto; background: #dccbf3; border: 2px solid var(--parch-ink); border-radius: 999px; padding: 0 6px; font-size: 13px; }
.strip.pick { outline: 4px dashed var(--gold); outline-offset: 2px; background: rgba(255,211,77,.25); }
.strip.pick.foe { outline-color: #ff6b5a; background: rgba(255,107,90,.2); }
.strip.go { outline: 3px solid #7dd24c; outline-offset: 2px; }
.strip.sel { outline: 4px solid var(--gold); outline-offset: 2px; }

.tile { position: relative; display: block; width: 100%; height: clamp(96px, 19.5vh, 230px); padding: 0; border: 3px solid #1f1a12; border-radius: 8px; overflow: hidden; font-family: inherit; color: #1f1a12; background: var(--tile, #9cc43a); }
.tile.mine { box-shadow: inset 0 6px 0 rgba(255,255,255,.18); }
.tile.theirs { box-shadow: inset 0 -6px 0 rgba(0,0,0,.18); }
.tile .hex { position: absolute; inset: 0; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='13.86'%3E%3Cpath d='M0 6.93 L4 0 H12 L16 6.93 L12 13.86 H4 Z M16 6.93 H24' fill='none' stroke='rgba(20,20,10,0.22)' stroke-width='1.2'/%3E%3C/svg%3E"); }
.tile.down { background: repeating-linear-gradient(180deg, #6b4a2b 0 22px, #3a2614 22px 25px); }
.tile.down .hex { display: none; }
/* The card fills 94% of the tile's height but never grows into the ATK and DEF bubbles at its top
   corners: --stat-gutter is the bubble's inset and width plus a small gap, kept on both sides. */
.tile { container-type: size; --stat-gutter: 52px; }
/* A turned card is made smaller by its size, not by scale(): it is drawn at the size it ends up, so its art and
   text are not resampled from a larger raster. Its width must not transition: it is measured from the tile in
   container units, which a freshly built card first resolves against the window, and it would shrink into place
   like a card being played. The turn is animated by the settle effect in anim.js. */
.tile .at { --w: min(calc(94cqh * 5 / 7), max(calc(100cqw - 2 * var(--stat-gutter)), 45cqw)); position: absolute; left: 50%; top: 50%; width: var(--w); aspect-ratio: 5 / 7; transform: translate(-50%, -50%); transition: transform 200ms ease; z-index: 1; }
.tile .at.flooped { width: calc(var(--w) * .7); transform: translate(-50%, -50%) rotate(-90deg); }
.tile .at.fought { width: calc(var(--w) * .7); transform: translate(-50%, -50%) rotate(90deg); }
/* Whole pixels, so the card is not drawn across pixel boundaries (soft edges and text). */
@supports (width: round(down, 10px, 2px)) {
  .tile .at { --w: round(down, min(calc(94cqh * 5 / 7), max(calc(100cqw - 2 * var(--stat-gutter)), 45cqw)), 2px); left: round(down, 50cqw, 1px); top: round(down, 50cqh, 1px); }
  .tile .at.flooped, .tile .at.fought { width: round(down, calc(var(--w) * .7), 2px); }
}
.tile .stat { position: absolute; right: 8px; background: #48207c; border: 2px solid #1f1033; color: #fff; border-radius: 999px; padding: 0 10px; font-size: 14px; z-index: 2; }
.tile .stat { bottom: 8px; }
.tile.go { outline: 4px solid #7dd24c; outline-offset: 3px; }
.tile.go, .strip.go { animation: act-outline 220ms ease-out both; animation-delay: var(--act-delay, 0ms); }
.tilewrap .tileacts { animation: act-button 220ms ease-out both; animation-delay: var(--act-delay, 0ms); }
@keyframes act-outline { from { outline-color: transparent; } }
@keyframes act-button { from { opacity: 0; pointer-events: none; } }
.acts-again .tile.go, .acts-again .strip.go, .acts-again .tileacts { animation: none; }
@media (prefers-reduced-motion: reduce) { .tile.go, .strip.go, .tilewrap .tileacts { animation: none; } }
.tile.sel { outline: 4px solid var(--gold); outline-offset: 3px; box-shadow: 0 0 18px 6px rgba(255,211,77,.55); }
.tile.pick { outline: 4px dashed var(--gold); outline-offset: 3px; }
.tile.pick.foe { outline-color: #ff6b5a; }
.lane .info { display: flex; justify-content: center; }
.lane .info small { font-size: 14px; color: #e3f0dc; }
.tilewrap { position: relative; }
.tilewrap .tileacts { position: absolute; z-index: 3; left: 8px; bottom: 8px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.tilewrap .floop { min-height: 34px; padding: 3px 10px 0; font-size: 15px; }

[data-land="cornfield"]     { --tile: #9cc43a; }
[data-land="blue_plains"]   { --tile: #7aa6d6; }
[data-land="useless_swamp"] { --tile: #a7b57a; }
[data-land="sandy_lands"]   { --tile: #f0c673; }
[data-land="nice_lands"]    { --tile: #f5b3d0; }
[data-land="icy_lands"]     { --tile: #bfe6f2; }
[data-land="rainbow"]       { --tile: linear-gradient(135deg, #f6b3a8, #f9e3a0, #b8e0a0, #a8cdf0, #cdb3ee); }
.tile[data-land] { background: var(--tile); }
.tile.down[data-land] { background: repeating-linear-gradient(180deg, #6b4a2b 0 22px, #3a2614 22px 25px); }

/* ---------- cards */
/* The scans have a 12px transparent margin (about 1.6% across, 1.1% down) and rounded corners of their own.
   The image is enlarged past the card so only the art shows, the card is clipped to the art's corner radius, and
   the shadow is the clipped card's own box-shadow, so nothing floats around the art like a halo. A filter would
   blur the card whenever it is scaled or rotated, so it is not used. (Percentages, not cqw: a container's own
   cq units measure the container outside it.) */
.card { position: relative; width: 100%; aspect-ratio: 5 / 7; container-type: inline-size; font-family: var(--hand-font); color: #1f1a12; border-radius: 4.7% / 3.36%; overflow: hidden; box-shadow: 0 3px 8px rgba(0,0,0,.45); }
.card .noart { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 6cqw; border-radius: 4.7cqw; background: #2b2f3a; color: #fff; font-size: 11cqw; text-align: center; line-height: 1.1; }
.card > img { position: absolute; left: -1.6%; top: -1.15%; width: 103.2%; height: 102.3%; max-width: none; object-fit: fill; }
.card .badge { position: absolute; bottom: 3cqw; display: flex; align-items: center; gap: 1cqw; border: 2.5px solid #1f1a12; border-radius: 999px; padding: 1.2cqw 3cqw 0; font-family: var(--big-font); font-size: 11cqw; line-height: 1.25; background: var(--paper); color: #1f1a12; z-index: 1; }
.card .badge.atk { left: 3cqw; } .card .badge.def { right: 3cqw; }
.card .badge.up { background: #c4ee9f; } .card .badge.hurt { background: #ffb39e; }

.landname { align-self: center; max-width: 100%; padding: 0 12px; font-size: 15px; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: var(--parch); color: var(--parch-ink); border: 2px solid #3a2a14; border-radius: 999px; }
.side .steel.pbar { flex-direction: row; flex-wrap: wrap; align-items: center; padding: 12px 18px; gap: 10px; }
.side .steel.pbar .pname { flex: 1 1 100px; }
.side .steel.pbar .pname .h { font-size: 22px; -webkit-text-stroke-width: 4px; }
.side .steel.pbar .hpbar { flex: 1 1 100%; }
.side .steel.pbar .counts { flex: 1 1 100%; }

/* ---------- hand and actions */
.handbox { display: flex; flex-wrap: wrap; align-items: stretch; gap: 16px; padding: 12px 26px; }
.piles { flex: 0 0 auto; display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.piles .well { display: flex; align-items: center; gap: 8px; padding: 6px 12px; font-size: 18px; }
.piles .well b { font-family: var(--big-font); font-weight: 400; font-size: 22px; padding-top: 3px; margin-left: auto; }
.piles button.well { color: #fff; }
.piles button.well:not(:disabled):hover { border-color: var(--gold); }
.piles svg { width: 24px; height: 24px; }
.hand { flex: 1 1 400px; min-width: 0; display: flex; justify-content: center; align-items: flex-end; padding: 14px 28px 12px; min-height: 172px; }
.hand .empty { align-self: center; color: #d6e2ec; }
.hbtn { flex: 0 1 100px; min-width: 56px; margin: 0 -6px; padding: 0; background: none; border: none; border-radius: 10px; color: inherit; transition: transform 160ms ease, opacity 160ms ease; }
.hbtn:hover { z-index: 6; transform: translateY(-64px) scale(1.55) !important; }
.hbtn.sel .card { box-shadow: 0 0 0 4px var(--gold), 0 0 18px 6px rgba(255,211,77,.55); }
.hbtn.pick .card { box-shadow: 0 0 0 4px #ff6b5a, 0 0 18px 6px rgba(255,107,90,.55); }
.hbtn.off { opacity: .62; }
.hbtn.rainbow .card { box-shadow: 0 0 0 3px #fff, 0 0 16px 5px rgba(255,92,200,.55), 0 0 22px 8px rgba(80,200,255,.4); }
.stripgroup { display: flex; flex-direction: column; gap: 4px; }
.strip.extra { height: 36px; }
.acts { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; gap: 14px; padding: 4px; }
.acts .actcount { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.acts .orb { width: 52px; height: 52px; font-size: 30px; padding-top: 4px; box-shadow: 0 0 0 4px #7d9bb3, 0 0 0 6px var(--ink); }
.acts .lbl { font-size: 14px; text-shadow: 0 2px 0 var(--ink); margin-top: 6px; }
.acts .btns { display: flex; flex-direction: column; gap: 8px; width: 170px; }
.acts .btn-steel { width: 100%; min-height: 38px; font-size: 17px; text-align: center; }
.acts .btn-red, .acts .btn-green { width: 100%; min-height: 48px; font-size: 24px; white-space: nowrap; padding-top: 5px; box-shadow: inset 0 3px 0 rgba(255,255,255,.35), 0 5px 0 var(--ink); }

/* ---------- sidebar */
.side .parch, .side .steel, .log { padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.side h2, .log h2 { font-size: 24px; align-self: flex-start; }
.side .parch h2, .log h2 { font-family: var(--hand-font); font-weight: 400; font-size: 26px; margin: 0; }
.detail { align-items: center; }
.detail .well { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px; }
.detail .well .card { width: 210px; }
.detail .well p { margin: 0; font-size: 17px; text-align: center; color: #d6e2ec; padding: 22px 6px; }
.detail .well .txt { font-size: 16px; color: #fff; padding: 0 4px; line-height: 1.25; }
.detail .well .tl { font-size: 15px; color: #a9c3d8; }
.log ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.log li { font-size: 16px; line-height: 1.25; padding-bottom: 6px; border-bottom: 2px dashed #cbb37a; }
.log li.turn { font-weight: 700; color: #48207c; }
.log li.big { font-family: var(--big-font); color: #b8301f; }

/* ---------- overlays on the felt */
.veil { position: absolute; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(10,25,10,.55); border-radius: 12px; }
.veil .parch { max-width: 520px; padding: 22px 28px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.veil h2 { margin: 0; font-family: var(--hand-font); font-weight: 400; font-size: 34px; }
.veil p { margin: 0; font-size: 19px; }
.veil .row { display: flex; flex-wrap: wrap; gap: 22px; justify-content: center; padding: 6px 8px 14px; }
.veil .row button { min-height: 58px; font-size: 24px; padding: 5px 22px 0; }
.veil.pile .parch { max-width: 760px; width: 100%; max-height: 100%; overflow: auto; align-items: stretch; }
.pilegrid { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.pilegrid button { width: 110px; padding: 0; background: none; border: none; border-radius: 8px; }
.pilegrid button.pick .card { box-shadow: 0 0 0 4px var(--gold), 0 0 12px 4px rgba(255,211,77,.6); }

/* ---------- animation helpers (the motion itself is in js/anim.js) */
.fx-float { font-style: normal; position: absolute; left: 50%; top: 24%; z-index: 6; pointer-events: none; font-family: var(--big-font); font-size: 34px; color: #fff; -webkit-text-stroke: 5px #7a0f08; paint-order: stroke fill; text-shadow: 0 3px 0 #3b0d0a; }
.fx-float.heal { -webkit-text-stroke-color: #1c5a24; text-shadow: 0 3px 0 #0e2d12; }
.fx-float.side { left: calc(100% + 6px); top: 6px; font-size: 28px; }
.tile .at.ghost { z-index: 4; pointer-events: none; }
.fx-banner { position: absolute; left: 50%; top: 50%; z-index: 12; pointer-events: none; padding: 6px 40px 0; font-family: var(--big-font); font-size: 52px; white-space: nowrap; color: #fff; -webkit-text-stroke: 6px #16212b; paint-order: stroke fill; text-shadow: 0 5px 0 #16212b; border-radius: 18px; background: rgba(15,30,15,.55); }
.fx-banner.mine { color: var(--gold); }
.fx-cast { position: absolute; left: 50%; top: 50%; z-index: 12; pointer-events: none; width: clamp(130px, 18vh, 200px); filter: drop-shadow(0 8px 14px rgba(0,0,0,.6)); }
@media (max-width: 900px) {
  .tile { height: 150px; --stat-gutter: 44px; } .lanes { gap: 6px; }
  .tile .tstat { min-width: 32px; padding: 2px 4px 0; border-width: 2px; font-size: 20px; } .tile .tstat small { font-size: 9px; } .felt { border-width: 8px; padding: 10px !important; }
  .strip { font-size: 12px; } .strip .row .tag { display: none; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
.log ul { max-height: 190px; overflow-y: auto; }
.cardref { text-decoration: underline dotted; text-underline-offset: 3px; cursor: help; }
.cardref:hover, .cardref:focus-visible { color: #7442b0; outline: none; }

.roomcode { font-family: var(--big-font); font-size: 64px; letter-spacing: 8px; margin: 8px 0 0; color: #fff; -webkit-text-stroke: 4px #1f1033; paint-order: stroke fill; user-select: all; }

/* stats beside the card, outside its art */
.tstats { position: absolute; inset: 6px 6px auto 6px; display: flex; justify-content: space-between; pointer-events: none; z-index: 3; }
.tstat { display: flex; flex-direction: column; align-items: center; min-width: 40px; padding: 2px 6px 0; border: 3px solid #1f1a12; border-radius: 12px; background: var(--paper); color: #1f1a12; font-family: var(--big-font); font-size: 26px; line-height: 1; box-shadow: 0 3px 0 #1f1a12; }
.tstat small { font-family: var(--hand-font); font-size: 11px; line-height: 1; letter-spacing: .5px; opacity: .7; }
.tstat.atk { background: #ffd9a0; } .tstat.def { background: #bfe9a6; }
.tstat.up { background: #c4ee9f; } .tstat.hurt { background: #ffb39e; }

/* the modal for a Choice */
.modal-backdrop { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; background: rgba(10, 18, 28, .78); animation: modal-fade 220ms ease-out both; animation-delay: var(--modal-delay, 350ms); }
.modal-backdrop.again { animation: none; }
.modal { width: min(94vw, 760px); max-height: 92vh; overflow: auto; display: flex; flex-direction: column; gap: 12px; padding: 22px 26px; box-shadow: 0 0 0 5px #7d9bb3, 0 0 0 8px var(--ink), 0 24px 60px rgba(0,0,0,.6); }
.modal h2 { margin: 0; font-family: var(--big-font); font-size: 34px; color: #48207c; font-weight: 400; }
.modal p { margin: 0; font-size: 20px; line-height: 1.25; }
.modalrow { display: flex; justify-content: center; margin-top: 14px; }
.modalcards { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; padding: 6px 0; }
.modalopt.cardopt { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 132px; padding: 0; background: none; border: none; color: inherit; border-radius: 12px; transition: transform 120ms ease; }
.modalopt.cardopt .card { width: 100%; }
.modalopt.cardopt .cap { font-size: 15px; line-height: 1.1; text-align: center; }
.modalopt.cardopt:hover, .modalopt.cardopt:focus-visible { transform: translateY(-6px) scale(1.06); }
.modalrow .modalopt { min-height: 52px; font-size: 20px; padding: 6px 20px 0; }
@keyframes modal-fade { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .modal-backdrop { animation: none; } }

/* ---------- deck builder (the "Deck builder" board of the Card Wars Web design) */
.bwrap { max-width: 1400px; margin: 0 auto; padding: 16px 20px 48px; display: flex; flex-direction: column; gap: 18px; }
.bhead { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.bhead h1 { margin: 0; font-size: 42px; color: var(--gold); }
.bhead .tolobby { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; font-size: 19px; }
.bhead .tolobby svg { width: 18px; height: 18px; }
.bcols { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.bleft { flex: 999 1 640px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.bright { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.builder h2 { margin: 0; }
.builder .steel h2 { font-size: 30px; }
.builder .parch h2 { font-family: var(--hand-font); font-weight: 400; font-size: 26px; }
.builder .field { display: flex; flex-direction: column; gap: 2px; }
.builder .field label { font-size: 15px; }
.builder .well { font-family: var(--hand-font); font-size: 18px; color: #fff; min-height: 44px; padding: 0 12px; min-width: 0; }
.builder input.well::placeholder { color: #8fa3b5; }
.builder select.well option, .builder select.well optgroup { color: var(--ink); background: var(--parch); }
.builder .well.big { font-size: 21px; min-height: 46px; }
.builder .small { font-size: 14px; margin: 0; }
.bfilters { display: flex; flex-direction: column; gap: 12px; padding: 16px 24px; }
.bfilterhead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
.bfilterhead .field { flex: 0 1 300px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; color: #fff; text-shadow: 0 2px 0 var(--ink); background: linear-gradient(180deg, #5a8bb5, #3a6386); border: 3px solid var(--ink); border-radius: 999px; box-shadow: inset 0 2px 0 rgba(255,255,255,.3), 0 3px 0 var(--ink); font-family: var(--hand-font); font-size: 18px; }
.chip[aria-pressed="true"] { background: linear-gradient(180deg, #ffe07a, #f0b928); color: var(--parch-ink); text-shadow: none; }
.diamond { display: inline-block; flex: 0 0 auto; border: 2px solid var(--ink); transform: rotate(45deg); }
.bfelt { padding: 20px; }
.cardgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 20px; }
.cell { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.cell .card { background: #2b2f3a; } /* what shows while the picture loads */
.stepper { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 4px; }
.stepper .step { width: 44px; height: 44px; padding: 3px 0 0; font-family: var(--big-font); font-size: 24px; flex: 0 0 auto; }
.stepper .btn-green.step { box-shadow: inset 0 2px 0 rgba(255,255,255,.35), 0 3px 0 #173a0c; }
.ncopies { font-size: 18px; }
.nocards { grid-column: 1 / -1; margin: 0; padding: 24px; text-align: center; color: #e3f0dc; border: 3px dashed rgba(255,255,255,.45); border-radius: 14px; }
.bdeck { padding: 18px 24px 24px; display: flex; flex-direction: column; gap: 14px; }
.bdeck .rowsplit, .meter .rowsplit { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.bdeck .lead { font-size: 17px; }
.landtiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.landtile { min-height: 70px; display: flex; align-items: flex-end; justify-content: center; padding: 4px 2px 6px; background: #8aa0b2; border: 3px solid var(--ink); border-radius: 6px; box-shadow: inset 0 3px 0 rgba(255,255,255,.35), inset 0 -4px 0 rgba(0,0,0,.2); font-size: 14px; color: var(--parch-ink); line-height: 1.1; text-align: center; }
.landtile span { background: var(--parch); border: 2px solid #3a2a14; border-radius: 999px; padding: 0 6px; }
.meter { padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.meter .total { font-family: var(--big-font); font-size: 32px; line-height: 1; padding-top: 4px; }
.meter .of { font-family: var(--big-font); font-size: 18px; }
.meter .bar { height: 16px; background: #0e1822; border: 2px solid #0e1822; border-radius: 999px; overflow: hidden; }
.barfill { height: 100%; border-radius: 999px; background: linear-gradient(180deg, #ffe07a 0 45%, #f0b928 45% 100%); transition: width 200ms ease; }
.barfill.full { background: linear-gradient(180deg, #7dd24c 0 45%, #4fa62c 45% 100%); }
.checks { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.check { display: flex; gap: 8px; align-items: flex-start; color: var(--parch-ink); border: 2.5px solid var(--ink); border-radius: 10px; padding: 6px 10px; font-size: 16px; line-height: 1.25; }
.check.warn { background: #ffc7a8; } .check.good { background: #c4ee9f; } .check.info { background: var(--parch); }
.check .mark { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--big-font); font-size: 13px; padding-top: 2px; }
.bactions { display: flex; gap: 14px; flex-wrap: wrap; padding-top: 6px; }
.bactions .btn-green { flex: 1 1 140px; min-height: 56px; font-size: 22px; padding-top: 4px; margin: 6px; }
.bactions .btn-steel { flex: 1 1 120px; min-height: 56px; font-size: 19px; margin: 6px 0; }
.bactions button:disabled { filter: grayscale(.75); opacity: .6; }
.bmore { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.bmore .danger { min-height: 40px; padding: 0 14px; font-size: 16px; }
.note { flex: 1 1 200px; min-height: 1.3em; margin: 0; font-size: 16px; color: #d6f2c4; }
.note.bad { color: #ffb39e; }
.bcurve, .blist { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.curve, .curvelabels { display: grid; gap: 14px; }
.curve { align-items: end; height: 130px; }
.curvelabels { text-align: center; font-size: 15px; }
.barcol { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; font-size: 17px; }
.curvebar { width: 100%; min-height: 4px; box-sizing: border-box; background: linear-gradient(90deg, #9b6ad6, #6a3aa6); border: 2.5px solid #1f1033; border-radius: 8px 8px 3px 3px; box-shadow: inset 0 3px 0 rgba(255,255,255,.3); }
.cardlist { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.cardlist li { display: flex; align-items: center; gap: 10px; border-bottom: 2px dashed #cbb37a; padding-bottom: 6px; }
.cardlist li.empty { display: block; border: 0; color: #6b5a3a; }
.costorb { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #c39cf0 0 16%, #7d48bd 46%, #48207c 100%); border: 2.5px solid #1f1033; color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--big-font); font-size: 14px; padding-top: 2px; }
.lname { flex: 1 1 auto; min-width: 0; }
.lkind { font-size: 14px; color: #5c4826; }
.lcount { font-family: var(--big-font); font-size: 18px; padding-top: 2px; }