@import url("https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600;700&family=Lilita+One&display=swap");

/* IMPERIUM interface.
   The look is taken from the game's own dialogs so the pages around the game read as part of it:
   parchment panels in riveted wooden frames, outlined display lettering, chunky green buttons,
   all sitting on the sea the islands float in. One stylesheet serves the play page, the entry
   pages, the admin panel and the public statistics page. */

:root {
  --sea-deep: #0b2233;
  --sea: #14405c;
  --sea-light: #1f6286;
  --paper: #f8eed5;
  --paper-2: #f0e1bd;
  --paper-3: #e3cf9f;
  --ink: #3a2311;
  --ink-soft: #7c5d3c;
  --wood: #7a4d27;
  --wood-dark: #3f2610;
  --wood-light: #a8733c;
  --brass: #e3b54d;
  --sun: #ffc93c;
  --orange: #f29418;
  --orange-dark: #b9590a;
  --green: #69b92b;
  --green-dark: #2f6a0d;
  --green-light: #a9e55f;
  --red: #d8452c;
  --red-dark: #8c2412;
  --display: "Lilita One", "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;
  --body: "Jost", "Futura", "Century Gothic", "Trebuchet MS", sans-serif;
  --frame: inset 0 0 0 3px var(--wood), inset 0 0 0 5px rgba(255, 255, 255, .28);
}

* { box-sizing: border-box; scrollbar-color: var(--wood-light) transparent; scrollbar-width: thin; }
html, body { margin: 0; min-height: 100%; }
body {
  color: var(--ink);
  font: 500 16px/1.45 var(--body);
  background:
    repeating-linear-gradient(115deg, rgba(255, 255, 255, .025) 0 2px, transparent 2px 26px),
    radial-gradient(ellipse 120% 80% at 50% -10%, var(--sea-light) 0, var(--sea) 42%, var(--sea-deep) 100%) fixed;
  background-color: var(--sea-deep);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--orange-dark); font-weight: 600; }
a:hover { color: var(--red-dark); }
::selection { background: var(--sun); color: var(--wood-dark); }
:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; border-radius: 6px; }
[hidden] { display: none !important; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-thumb { background: var(--wood-light); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; }

/* Outlined display lettering, like the game's dialog titles. */
.brand span, .page h1, .card h1, .drawer h2, .tile-value, .lot-price strong, .btn, .bar-tab, .loading p {
  font-family: var(--display); font-weight: 400; letter-spacing: .02em;
}
.brand span, .page h1, .card h1, .drawer h2 {
  color: var(--sun); paint-order: stroke fill; -webkit-text-stroke: 5px var(--wood-dark);
  text-shadow: 0 3px 0 var(--wood-dark);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 20px; padding: 10px 26px 11px;
  border: 2px solid var(--green-dark); border-radius: 12px;
  background: linear-gradient(180deg, var(--green-light) 0, var(--green) 46%, #4f9a1c 100%);
  color: #fff; font-size: 19px; line-height: 1.15; font-style: italic; text-decoration: none; white-space: nowrap; cursor: pointer;
  paint-order: stroke fill; -webkit-text-stroke: 3px var(--green-dark);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .55), 0 4px 0 var(--green-dark), 0 6px 10px rgba(0, 0, 0, .25);
  transition: transform .07s, box-shadow .07s, filter .12s;
}
.btn:hover { color: #fff; filter: brightness(1.07) saturate(1.05); }
.btn:active { transform: translateY(3px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .55), 0 1px 0 var(--green-dark); }
.btn.ghost {
  border-color: var(--wood); background: linear-gradient(180deg, #fff8e6, var(--paper-3)); color: var(--ink);
  -webkit-text-stroke: 0; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .8), 0 4px 0 var(--wood), 0 6px 10px rgba(0, 0, 0, .2);
}
.btn.ghost:hover { color: var(--ink); }
.btn.ghost:active { box-shadow: inset 0 2px 0 rgba(255, 255, 255, .8), 0 1px 0 var(--wood); }
.btn.danger { border-color: var(--red-dark); background: linear-gradient(180deg, #ff8d6e, var(--red) 55%, #b9341d); -webkit-text-stroke-color: var(--red-dark); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), 0 4px 0 var(--red-dark); }
.btn.small { margin-top: 0; padding: 6px 14px 7px; font-size: 15px; border-radius: 10px; -webkit-text-stroke-width: 2.5px; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .55), 0 3px 0 var(--green-dark); }
.btn.small.ghost { -webkit-text-stroke-width: 0; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .8), 0 3px 0 var(--wood); }
.btn.small:active { transform: translateY(2px); }
.btn[disabled] { filter: grayscale(.9) brightness(.95); opacity: .65; cursor: not-allowed; transform: none; }

/* ---------- Form controls ---------- */
/* :where() keeps these defaults at zero specificity so any component rule can resize a field. */
:where(input:not([type=checkbox]):not([type=radio]):not([type=hidden]), select) {
  width: 100%; padding: 9px 12px;
  border: 2px solid #b48f5f; border-radius: 9px;
  background: #fffaf0; color: var(--ink); font: 500 16px var(--body);
  box-shadow: inset 0 2px 3px rgba(90, 56, 22, .18);
  transition: border-color .12s, box-shadow .12s;
}
:where(input:not([type=checkbox]):not([type=radio]), select):focus { outline: none; border-color: var(--orange); box-shadow: inset 0 2px 3px rgba(90, 56, 22, .18), 0 0 0 3px rgba(242, 148, 24, .3); }
input::placeholder { color: #b39a78; }
input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--green); }
:where(select) {
  appearance: none; padding-right: 34px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--wood) 50%), linear-gradient(135deg, var(--wood) 50%, transparent 50%);
  background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-size: 5px 5px; background-repeat: no-repeat;
}
label { color: var(--ink); }

/* ---------- Top bar: a wooden rail with folder tabs ---------- */
.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: stretch; gap: 20px;
  height: 62px; padding: 0 18px;
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .06) 0 1px, transparent 1px 90px),
    linear-gradient(180deg, #96602f 0, var(--wood) 45%, #5b3718 100%);
  border-bottom: 4px solid var(--wood-dark);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .22), inset 0 -3px 0 var(--brass), 0 8px 22px rgba(0, 0, 0, .4);
}
.topbar > * { align-self: center; }
.brand { display: flex; align-items: center; gap: 10px; flex: none; text-decoration: none; }
.brand span { font-size: 26px; line-height: 1; }
.brand img { width: 46px; height: 46px; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .45)); }
.tabs { display: flex; align-items: flex-end; gap: 4px; align-self: stretch; }
.tab {
  display: flex; align-items: center; gap: 7px; height: 44px; padding: 0 16px; white-space: nowrap;
  border-radius: 12px 12px 0 0; border: 2px solid transparent; border-bottom: 0;
  color: #fbe9c4; font: 400 17px var(--display); letter-spacing: .03em; text-decoration: none;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .45); transition: background .12s, color .12s;
}
a.tab:hover { color: #fff; background: rgba(255, 255, 255, .12); }
.tab.active { background: var(--paper); color: var(--ink); text-shadow: none; border-color: var(--wood-dark); box-shadow: inset 0 3px 0 #fff8e6; margin-bottom: -4px; height: 48px; }
.spacer { flex: 1; }
.count { min-width: 22px; padding: 0 6px; border-radius: 999px; background: var(--red); color: #fff; font: 700 12px/20px var(--body); text-align: center; text-shadow: none; box-shadow: 0 0 0 2px var(--wood-dark); }

/* HUD pills, like the game's own counters */
.points, .player > button {
  display: flex; align-items: center; gap: 8px; height: 40px; flex: none;
  background: linear-gradient(180deg, #fffaf0, var(--paper-2)); color: var(--ink);
  border: 2px solid var(--wood-dark); border-radius: 999px;
  box-shadow: inset 0 2px 0 #fff, 0 3px 0 rgba(0, 0, 0, .3);
}
.points { padding: 0 14px 0 8px; }
.points img { width: 24px; height: 24px; object-fit: contain; }
.points strong { font: 400 20px var(--display); color: var(--orange-dark); font-variant-numeric: tabular-nums; }
.points span { color: var(--ink-soft); font-size: 13px; }
.points b { color: var(--ink); }
.player { position: relative; flex: none; }
.player > button { padding: 0 12px 0 4px; font: 600 16px var(--body); cursor: pointer; }
.player > button:hover { filter: brightness(1.04); }
.avatar { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; background: var(--paper-3); border: 2px solid var(--wood); }
.level { padding: 1px 9px; border-radius: 999px; background: var(--sea); color: #fff; font: 700 12px/18px var(--body); white-space: nowrap; }
.menu {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 40; min-width: 240px; padding: 8px;
  background: var(--paper); border: 3px solid var(--wood-dark); border-radius: 14px; box-shadow: var(--frame), 0 14px 30px rgba(0, 0, 0, .45);
}
.menu h4 { margin: 6px 10px 6px; font: 700 11px var(--body); text-transform: uppercase; letter-spacing: .1em; color: var(--ink-soft); }
.menu a, .menu button {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px;
  background: none; border: 0; border-radius: 8px; color: var(--ink); font: 600 16px var(--body); text-align: left; text-decoration: none; cursor: pointer;
}
.menu a:hover, .menu button:hover { background: var(--paper-3); color: var(--ink); }
.menu hr { border: 0; border-top: 2px dotted #c9ab7a; margin: 6px 4px; }
.menu form { margin: 0; }

/* ---------- Panels: parchment in a riveted wooden frame ---------- */
.panel, .card, .drawer, .tile {
  position: relative;
  background: linear-gradient(180deg, var(--paper) 0, var(--paper-2) 100%);
  border: 3px solid var(--wood-dark); border-radius: 16px;
  box-shadow: var(--frame), 0 10px 26px rgba(0, 0, 0, .35);
}
.card::before, .card::after, .drawer::before, .drawer::after {
  content: ""; position: absolute; left: 12px; right: 12px; height: 8px; pointer-events: none;
  background: radial-gradient(circle at 4px 4px, #fff3c4 0 1.5px, var(--brass) 1.6px 3.4px, var(--wood-dark) 3.5px 4.4px, transparent 4.5px) left / 8px 8px no-repeat,
              radial-gradient(circle at 4px 4px, #fff3c4 0 1.5px, var(--brass) 1.6px 3.4px, var(--wood-dark) 3.5px 4.4px, transparent 4.5px) right / 8px 8px no-repeat;
}
.card::before, .drawer::before { top: 11px; }
.card::after, .drawer::after { bottom: 11px; }

/* ---------- Game stage ---------- */
.stage-wrap { padding: 20px 12px 66px; overflow-x: auto; }
/* The game is drawn at 4:3 and scaled by the player to whatever box it gets, so the stage takes the
   largest 4:3 box that fits the window (never more than the game's own 1000x750). */
.stage {
  position: relative; margin: 0 auto; aspect-ratio: 4 / 3;
  width: min(1000px, calc(100vw - 40px), calc((100vh - 62px - 110px) * 4 / 3));
  width: min(1000px, calc(100vw - 40px), calc((100dvh - 62px - 110px) * 4 / 3));
  border: 5px solid var(--wood-dark); border-radius: 10px; background: #333399;
  box-shadow: 0 0 0 4px var(--wood), 0 0 0 6px var(--wood-dark), 0 22px 50px rgba(0, 0, 0, .55);
}
/* The client lays its HUD out in screen pixels for whatever size it is given, so on a small box it
   crops the map and keeps the bars full size. It is therefore always run at 1000x750 and the whole
   picture is scaled down to the stage (--game-scale is set by the page script). */
.stage { overflow: hidden; }
.stage #ruffle { width: 1000px; height: 750px; transform: scale(var(--game-scale, 1)); transform-origin: 0 0; }
.stage ruffle-player, .stage ruffle-object, .stage ruffle-embed { display: block; width: 1000px; height: 750px; }
.loading {
  position: absolute; inset: 0; z-index: 5; border-radius: 5px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  background:
    repeating-conic-gradient(from 0deg at 50% 44%, rgba(255, 255, 255, .06) 0 7.5deg, transparent 7.5deg 15deg),
    radial-gradient(circle at 50% 44%, var(--sea-light) 0, var(--sea) 45%, var(--sea-deep) 100%);
  transition: opacity .4s;
}
.loading.done { opacity: 0; pointer-events: none; }
.loading img { width: 230px; height: 230px; filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .5)); animation: bob 2.8s ease-in-out infinite; }
.loading p { margin: 0; font-size: 24px; color: #fff; paint-order: stroke fill; -webkit-text-stroke: 4px var(--wood-dark); }
.bar { width: 340px; height: 22px; padding: 3px; border-radius: 999px; background: var(--wood-dark); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .6), 0 0 0 2px var(--brass); }
.bar > div { width: 0; height: 100%; border-radius: 999px; background: linear-gradient(180deg, #ffe58a, var(--orange)); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .6); transition: width .8s linear; }
@keyframes bob { 50% { transform: translateY(-8px) rotate(-1.5deg); } }
.foot { padding: 0 12px 26px; text-align: center; color: #b9d3e2; font-size: 13px; }
.foot a { color: #e8f3f9; }

/* ---------- Drawers over the game ---------- */
.bar-tab {
  position: absolute; left: 16px; top: calc(100% + 6px); z-index: 4;
  display: flex; align-items: center; gap: 8px; padding: 7px 18px 9px;
  background: linear-gradient(180deg, #ffe07a, var(--orange)); color: var(--wood-dark);
  border: 3px solid var(--wood-dark); border-top: 0; border-radius: 0 0 14px 14px;
  font-size: 17px; cursor: pointer; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .15), 0 5px 0 rgba(0, 0, 0, .3); transition: filter .12s, transform .07s;
}
.bar-tab:hover { filter: brightness(1.07); }
.bar-tab:active { transform: translateY(2px); }
.drawer { position: absolute; left: 10px; bottom: 10px; z-index: 6; width: min(450px, calc(100% - 20px)); max-height: min(570px, calc(100% - 20px)); display: flex; flex-direction: column; animation: rise .16s ease-out; }
@keyframes rise { from { opacity: 0; transform: translateY(12px) scale(.98); } }
.drawer > header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px 8px 24px;
  border-bottom: 2px dotted #c9ab7a;
}
.drawer h2 { margin: 0; font-size: 26px; line-height: 1.1; font-style: italic; }
.drawer h3 { margin: 18px 0 8px; font: 700 12px var(--body); text-transform: uppercase; letter-spacing: .1em; color: var(--ink-soft); }
.drawer .close {
  width: 34px; height: 34px; flex: none; border-radius: 9px; border: 2px solid var(--red-dark);
  background: linear-gradient(180deg, #ff8d6e, var(--red)); color: #fff; font: 700 20px/1 var(--body); cursor: pointer;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), 0 3px 0 var(--red-dark);
}
.drawer .close:hover { filter: brightness(1.1); }
.drawer .close:active { transform: translateY(2px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), 0 1px 0 var(--red-dark); }
.drawer-body { padding: 14px 20px 22px; overflow-y: auto; transition: opacity .12s; }
.drawer-body[aria-busy="true"] { opacity: .5; pointer-events: none; }

.inline { display: flex; gap: 10px; }
.inline input { flex: 1; min-width: 0; }
.inline select { width: auto; flex: none; padding-right: 34px; }
.hint { margin: 8px 0 0; color: var(--ink-soft); font-size: 14px; }
.people, .lots { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.people li, .lots li {
  display: flex; align-items: center; gap: 12px; padding: 8px 12px;
  background: #fffaf0; border: 2px solid #d5bb8c; border-radius: 12px; box-shadow: 0 2px 0 #d5bb8c; transition: border-color .12s, transform .07s;
}
.lots li:hover { border-color: var(--orange); }
.people .name { flex: 1; min-width: 0; font-weight: 700; overflow-wrap: anywhere; }
.people .hint { margin: 0; }
.people form, .lots form { margin: 0; }

/* ---------- Market ---------- */
.drawer.market { left: 18px; right: 18px; top: 18px; bottom: 18px; width: auto; max-height: none; }
.market-tabs { display: flex; align-items: flex-end; gap: 4px; margin-bottom: 14px; border-bottom: 3px solid var(--wood); }
.market-tabs a {
  padding: 7px 16px 6px; border: 2px solid var(--wood); border-bottom: 0; border-radius: 10px 10px 0 0;
  background: var(--paper-3); color: var(--ink-soft); font: 400 17px var(--display); text-decoration: none;
}
.market-tabs a:hover { color: var(--ink); background: #ecdcae; }
.market-tabs a.on { background: var(--wood); color: #fff3d1; border-color: var(--wood-dark); }
.market-balance { margin: 0 2px 6px auto; color: var(--ink-soft); font-size: 14px; }
.market-balance strong { font: 400 22px var(--display); color: var(--orange-dark); font-variant-numeric: tabular-nums; }
.market-layout { display: grid; grid-template-columns: 196px 1fr; gap: 16px; }
.market-cats { display: grid; align-content: start; gap: 2px; padding: 8px; background: var(--paper-3); border: 2px solid #c9ab7a; border-radius: 12px; }
.market-cats a { display: flex; justify-content: space-between; gap: 8px; padding: 5px 10px; border-radius: 8px; color: var(--ink); text-decoration: none; font-size: 15px; font-weight: 500; }
.market-cats a small { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.market-cats a.top { margin-top: 8px; font: 400 16px var(--display); color: var(--orange-dark); }
.market-cats a.child { padding-left: 20px; }
.market-cats a:hover { background: #f4e7c4; }
.market-cats a.on { background: var(--wood); color: #fff3d1; }
.market-cats a.on small { color: #f3d9a4; }
.market-main .inline { margin-bottom: 12px; }
.lots img { object-fit: contain; flex: none; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .25)); }
.lot-name { flex: 1; min-width: 0; }
.lot-name strong { display: block; font-size: 17px; font-weight: 700; overflow-wrap: anywhere; }
.lot-name small, .lot-price small { display: block; color: var(--ink-soft); font-size: 13px; }
.lot-price { text-align: right; font-size: 14px; white-space: nowrap; }
.lot-price strong { font-size: 24px; color: var(--orange-dark); font-variant-numeric: tabular-nums; }
.lots form { display: flex; align-items: flex-end; gap: 8px; }
.lots form.lot-buy { flex-direction: column; align-items: stretch; gap: 5px; width: 156px; flex: none; }
.lot-buy > div { display: flex; gap: 8px; }
.lot-buy input { width: 62px; flex: none; text-align: center; padding: 6px 4px; }
.lot-buy .btn { flex: 1; }
.lot-total { font-size: 13px; color: var(--ink-soft); text-align: right; font-variant-numeric: tabular-nums; }
.lot-total b { color: var(--ink); }
.lot-sell label { display: grid; gap: 3px; font-size: 12px; font-weight: 600; color: var(--ink-soft); }
.lot-sell input { width: 104px; padding: 6px 10px; }
.lot-sell .unit { align-self: center; min-width: 104px; font-size: 12px; color: var(--ink-soft); }
.lot-sell .unit b { display: block; color: var(--orange-dark); font: 400 18px var(--display); font-variant-numeric: tabular-nums; }
.empty { display: grid; justify-items: center; gap: 6px; padding: 40px 16px; color: var(--ink-soft); text-align: center; }
.empty img { width: 96px; height: 96px; opacity: .5; filter: sepia(.5); }
.empty strong { color: var(--ink); font: 400 20px var(--display); }

/* ---------- Entry pages ---------- */
.entry { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 110px 16px 40px; overflow: hidden; }
.entry::before {
  content: ""; position: absolute; inset: -40%; pointer-events: none;
  background: repeating-conic-gradient(from 0deg at 50% 46%, rgba(255, 255, 255, .07) 0 7.5deg, transparent 7.5deg 15deg);
  -webkit-mask-image: radial-gradient(circle at 50% 46%, #000 0, transparent 52%); mask-image: radial-gradient(circle at 50% 46%, #000 0, transparent 52%);
  animation: turn 140s linear infinite;
}
@keyframes turn { to { transform: rotate(360deg); } }
.card { width: 100%; max-width: 440px; padding: 34px 30px 30px; text-align: center; border-radius: 20px; box-shadow: var(--frame), 0 26px 60px rgba(0, 0, 0, .5); }
.card.wide { max-width: 580px; }
.card .logo { width: 150px; height: 150px; margin-top: -92px; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .45)); }
.card h1 { margin: 2px 0 0; font-size: 46px; line-height: 1.05; font-style: italic; -webkit-text-stroke-width: 7px; text-shadow: 0 5px 0 var(--wood-dark); }
.card h2 { margin: 16px 0 14px; font: 700 13px var(--body); text-transform: uppercase; letter-spacing: .14em; color: var(--ink-soft); }
.card .sub { margin: 6px 0 0; color: var(--ink-soft); }
.card .btn { width: 100%; }
.ribbon {
  display: inline-block; margin: 10px 0 2px; padding: 5px 30px 6px; color: #fff; font: 400 17px var(--display); letter-spacing: .06em;
  background: linear-gradient(180deg, var(--orange), var(--orange-dark)); text-shadow: 0 2px 0 rgba(0, 0, 0, .3);
  clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 50%, 100% 100%, 0 100%, 12px 50%);
}
.alt { margin: 18px 0 0; font-size: 14px; color: var(--ink-soft); }
.form { display: grid; gap: 14px; text-align: left; }
.form label { display: grid; gap: 5px; font-weight: 700; font-size: 14px; }
.form small { color: var(--ink-soft); font-weight: 500; }
.form .btn { margin-top: 8px; }
.avatars { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px; }
.avatars a { display: block; padding: 4px; border: 3px solid var(--wood); border-radius: 14px; background: #fffaf0; box-shadow: 0 3px 0 var(--wood-dark); transition: transform .1s, border-color .1s; }
.avatars a:hover { border-color: var(--orange); transform: translateY(-3px) rotate(-2deg); }
.avatars img { display: block; width: 100%; border-radius: 9px; }

/* ---------- Messages ---------- */
.error, .notice { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 14px; padding: 10px 14px; border-radius: 10px; text-align: left; font-weight: 600; border: 2px solid; }
.error { background: #fde0d6; border-color: var(--red); color: var(--red-dark); }
.notice { background: #e2f3cd; border-color: var(--green); color: var(--green-dark); }

/* ---------- Content pages (admin, statistics) ---------- */
.page { max-width: 760px; margin: 0 auto; padding: 30px 16px 80px; }
.page.wide { max-width: 1060px; }
.page h1 { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin: 0 0 12px; font-size: 40px; line-height: 1.1; font-style: italic; -webkit-text-stroke-width: 6px; text-shadow: 0 4px 0 var(--wood-dark); }
.page code { padding: 2px 8px; border-radius: 6px; background: #fffaf0; border: 1px solid #c9ab7a; font-size: 14px; overflow-wrap: anywhere; }
h2.group {
  display: flex; align-items: center; gap: 12px; margin: 28px 0 12px; color: #fff; font: 400 20px var(--display); letter-spacing: .05em; text-shadow: 0 2px 0 rgba(0, 0, 0, .45);
}
h2.group::after { content: ""; flex: 1; height: 3px; border-radius: 3px; background: linear-gradient(90deg, rgba(255, 255, 255, .5), transparent); }
.panel { margin-bottom: 18px; padding: 20px 22px; }
.panel h2 { margin: 0 0 12px; font: 400 20px var(--display); color: var(--ink); letter-spacing: .02em; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.panel.flush { padding: 5px; overflow: hidden; }
.panel .pad { padding: 14px 18px 0; }
.panel p.pad { padding-top: 0; margin: -6px 0 10px; }
.lead-note { margin: 0 0 18px; color: #d7e8f2; }
.lead-note a { color: var(--sun); }
.lead-note strong { color: #fff; }
.page > .hint, .page > .pager { color: #b9d3e2; }
.page > .hint a { color: var(--sun); }
.crumb { margin: 0 0 8px; }
.crumb a { color: var(--sun); }
.muted { color: var(--ink-soft); }
.row-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.row-form label { display: grid; gap: 4px; font-size: 13px; font-weight: 700; flex: 1 1 180px; }
.row-form label.check { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; padding-bottom: 10px; }
.actions { display: flex; gap: 8px; align-items: center; }
.actions.spaced { margin-bottom: 16px; }
.actions form { margin: 0; }
td.actions { justify-content: flex-end; }
.pill { display: inline-block; padding: 1px 10px; border-radius: 6px; border: 2px solid; font: 700 11px/1.7 var(--body); letter-spacing: .1em; text-transform: uppercase; -webkit-text-stroke: 0; text-shadow: none; transform: rotate(-2deg); background: rgba(255, 255, 255, .5); }
.pill.on { color: var(--green-dark); border-color: var(--green-dark); }
.pill.wait { color: var(--orange-dark); border-color: var(--orange-dark); }
.pill.off { color: var(--ink-soft); border-color: #b39a78; }
.dot { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 50%; background: #cdb68c; }
.dot.on { background: var(--green); box-shadow: 0 0 0 3px rgba(105, 185, 43, .3); }
.pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 16px 0; }
.scroll-x { overflow-x: auto; border-radius: 10px; }

/* Ledger tables */
.grid { width: 100%; border-collapse: collapse; }
.grid th { text-align: left; padding: 9px 10px; white-space: nowrap; background: var(--wood); color: #fff3d1; font: 400 14px var(--display); letter-spacing: .05em; }
.grid th:first-child { border-radius: 9px 0 0 0; }
.grid th:last-child { border-radius: 0 9px 0 0; }
.grid td { padding: 9px 10px; border-bottom: 1px solid #dcc79b; vertical-align: middle; font-variant-numeric: tabular-nums; white-space: nowrap; }
.grid tbody tr:nth-child(even) td { background: rgba(122, 77, 39, .06); }
.grid tbody tr:hover td { background: rgba(242, 148, 24, .14); }
.grid tbody tr:last-child td { border-bottom: 0; }
.grid td .sub { display: block; color: var(--ink-soft); font-size: 13px; white-space: normal; }

/* Stat plaques */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 8px; }
.tile { display: grid; align-content: start; gap: 0; padding: 12px 16px 14px; border-radius: 14px; overflow: hidden; }
.tile::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 7px; background: var(--wood); }
.tile-label { margin-top: 6px; font: 700 12px var(--body); text-transform: uppercase; letter-spacing: .07em; color: var(--ink-soft); }
.tile-value { font-size: 38px; line-height: 1.15; color: var(--ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.tile-note { font-size: 13px; color: var(--ink-soft); }
.tile.live::before { background: var(--green); }
.tile.live .tile-value { color: var(--green-dark); }
.tile.live .tile-label::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 6px; border-radius: 50%; background: var(--green); animation: pulse 1.8s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .3; } }
.tile.warn::before { background: var(--orange); }
.tile.warn .tile-value { color: var(--orange-dark); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.bars { display: grid; gap: 9px; }
.bar-row { display: grid; grid-template-columns: 96px 1fr 44px; align-items: center; gap: 10px; font-weight: 600; }
.bar-track { height: 16px; padding: 2px; border-radius: 999px; background: var(--wood-dark); box-shadow: inset 0 2px 3px rgba(0, 0, 0, .5); }
.bar-fill { display: block; height: 100%; min-width: 4px; border-radius: 999px; background: linear-gradient(180deg, #ffe58a, var(--orange)); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .55); }
.bar-value { text-align: right; font: 400 18px var(--display); font-variant-numeric: tabular-nums; }
.chart { margin: 0; }
.chart figcaption { font: 400 20px var(--display); margin-bottom: 12px; }
.cols { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; align-items: end; gap: 6px; height: 160px; padding: 0 4px; border-bottom: 3px solid var(--wood); background: repeating-linear-gradient(0deg, transparent 0 35px, rgba(122, 77, 39, .16) 35px 36px); }
.col { display: grid; grid-template-rows: 18px 1fr; height: 100%; text-align: center; font-size: 12px; color: var(--ink-soft); position: relative; }
.col-bar { align-self: end; min-height: 3px; border: 2px solid var(--green-dark); border-bottom: 0; border-radius: 6px 6px 0 0; background: linear-gradient(180deg, var(--green-light), var(--green)); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5); }
.col-value { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.col-label { position: absolute; left: 0; right: 0; top: calc(100% + 6px); }
.chart { padding-bottom: 22px; }

/* Books audit */
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.checks li { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-weight: 600; }
.checks li span { width: 22px; height: 22px; flex: none; border-radius: 50%; color: #fff; font: 700 14px/22px var(--body); text-align: center; align-self: center; }
.checks li.ok span { background: var(--green); box-shadow: 0 2px 0 var(--green-dark); }
.checks li.bad { color: var(--red-dark); }
.checks li.bad span { background: var(--red); box-shadow: 0 2px 0 var(--red-dark); }
.checks small { color: var(--ink-soft); font-weight: 500; }

/* Campaign and price editors */
.item-list { margin-top: 14px; max-height: 620px; overflow-y: auto; display: grid; gap: 6px; padding-right: 4px; }
.item { display: flex; align-items: center; gap: 12px; padding: 6px 12px; background: #fffaf0; border: 2px solid #d5bb8c; border-radius: 12px; cursor: pointer; }
.item:hover { border-color: var(--orange); }
.item:has(input:checked) { border-color: var(--green-dark); background: #e9f5d6; box-shadow: 0 2px 0 var(--green-dark); }
.item img, .price-head img { object-fit: contain; flex: none; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .25)); }
.item-name { flex: 1; min-width: 0; font-weight: 700; overflow-wrap: anywhere; }
.item-name small { display: block; font-weight: 500; color: var(--ink-soft); font-size: 13px; }
.item-cost { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 10px; font-size: 13px; color: var(--ink-soft); max-width: 46%; }
.item-cost em { color: var(--orange-dark); font-style: normal; font-weight: 700; }
.sticky-save { position: sticky; bottom: 0; padding: 14px 0; text-align: right; background: linear-gradient(180deg, transparent, rgba(11, 34, 51, .9) 45%); }
.sticky-save .btn { margin-top: 0; }
.price-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.price-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 10px; margin-bottom: 14px; }
.price-fields label { display: grid; gap: 4px; font-size: 13px; font-weight: 700; }
.price-fields small { color: var(--ink-soft); font-weight: 500; }

/* ---------- Small screens ---------- */
@media (max-width: 760px) {
  .topbar { gap: 10px; padding: 0 10px; overflow-x: auto; }
  .brand span, .points span { display: none; }
  .two { grid-template-columns: 1fr; }
  .tile-value { font-size: 30px; }
  .page { padding: 22px 12px 60px; }
  .page h1 { font-size: 30px; -webkit-text-stroke-width: 5px; }
  .card { padding: 30px 20px 24px; }
  .card h1 { font-size: 38px; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

.btn.confirming { background: linear-gradient(#ffb43a, #f08a12); border-color: #a85d00; box-shadow: 0 3px 0 #a85d00; }
.lot-total.short { max-width: 230px; color: var(--red-dark); font-weight: 600; }

/* ---------- Phones and Telegram: the game fills the screen ---------- */
.rotate-hint { display: none; }
@media (max-width: 760px), (max-height: 560px) {
  .topbar { height: 46px; gap: 8px; }
  .brand img { width: 32px; height: 32px; }
  .brand span { display: none; }
  .tab { padding: 0 10px; font-size: 15px; }
  .tab.active { height: 40px; }
  .stage-wrap { padding: 6px 4px; overflow: hidden; }
  .stage {
    border-width: 2px; border-radius: 6px; box-shadow: 0 0 0 2px var(--wood);
    width: min(calc(100vw - 12px), calc((100vh - 46px - 16px) * 4 / 3));
    width: min(calc(100vw - 12px), calc((100dvh - 46px - 16px) * 4 / 3));
  }
  .loading img { width: 28%; height: auto; }
  .loading p { font-size: 17px; -webkit-text-stroke-width: 3px; }
  .bar { width: 60%; height: 16px; }
  .bar-tab { display: none; }  /* Friends is in the top bar */
  .drawer { left: 6px; bottom: 6px; width: calc(100% - 12px); max-height: calc(100% - 12px); }
  .drawer.market { inset: 6px; }
  .drawer > header { padding: 8px 12px 6px 16px; }
  .drawer h2 { font-size: 20px; }
  .drawer-body { padding: 10px 12px 14px; }
  .foot { display: none; }
}
@media (max-width: 760px) and (orientation: portrait) {
  .rotate-hint { display: block; margin: 18px 16px 0; text-align: center; color: #e8f3f9; font-size: 15px; }
}

/* Full screen from the game's own button: no top bar, the game takes the whole screen. Inside
   Telegram the top of the screen holds Telegram's own buttons, so the game starts below them. */
.game-full body { background: #000; }
.game-full .topbar, .game-full .foot, .game-full .rotate-hint, .game-full .bar-tab { display: none; }
.game-full .stage-wrap {
  padding: calc(var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px)) 0 0;
  height: 100vh; height: 100dvh; display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.game-full .stage {
  border: 0; border-radius: 0; box-shadow: none;
  width: min(100vw, calc((100vh - var(--tg-safe-area-inset-top, 0px) - var(--tg-content-safe-area-inset-top, 0px)) * 4 / 3));
  width: min(100vw, calc((100dvh - var(--tg-safe-area-inset-top, 0px) - var(--tg-content-safe-area-inset-top, 0px)) * 4 / 3));
}
.exit-full { display: none; }
.game-full .exit-full {
  display: grid; place-items: center; position: fixed; z-index: 40; width: 34px; height: 34px;
  right: 6px; top: 50%; transform: translateY(-50%);  /* free strip between the game's right-hand arrows */
  border: 2px solid var(--wood-dark); border-radius: 10px; background: rgba(247, 236, 212, .85);
  color: var(--wood-dark); font: 700 16px/1 var(--body); cursor: pointer; opacity: .75;
}
.game-full .exit-full:hover { opacity: 1; }

/* ---------- Wallet page ---------- */
.wallet-card { max-width: 460px; }
.wallet-card > p { text-align: left; }
.wallet-facts { display: grid; gap: 6px; margin: 4px 0 14px; padding: 12px 16px; border-radius: 12px; background: #fffaf0; border: 2px solid #c9ab7a; text-align: left; }
.wallet-facts div { display: flex; justify-content: space-between; gap: 12px; }
.wallet-facts dt { color: var(--ink-soft); font-weight: 600; }
.wallet-facts dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
button.link { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; }
.inline-form { display: inline; margin: 0; }
.wallet-card > p.alt { text-align: center; }
.wallet-card .inline-form button.link { display: inline; }

/* ---------- Empire Points shop (opens from the points counter) ---------- */
button.points { font: inherit; cursor: pointer; padding-right: 6px; transition: filter .12s, transform .07s; }
button.points:hover { filter: brightness(1.04); }
button.points:active { transform: translateY(1px); }
.points .plus {
  display: grid; place-items: center; width: 24px; height: 24px; margin-left: 2px; border-radius: 7px; font-style: normal;
  background: linear-gradient(180deg, #8fd65a, var(--green) 60%, #3f8a1a); border: 2px solid var(--green-dark);
  color: #fff; font: 400 18px/1 var(--display); -webkit-text-stroke: 2px var(--green-dark); paint-order: stroke fill;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5);
}
/* Fixed to the window, not the game box: on a phone the game box is too small to hold the packs. */
.drawer.shop-drawer { position: fixed; z-index: 50; left: 50%; bottom: auto; top: 76px; transform: translateX(-50%); width: min(720px, calc(100vw - 20px)); max-height: calc(100vh - 92px); max-height: calc(100dvh - 92px); }
.shop-drawer .drawer-body { padding-top: 10px; }
.shop-balance { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 12px; background: #fffaf0; border: 2px solid #c9ab7a; font-size: 16px; }
.shop-balance img { width: 40px; height: 40px; object-fit: contain; }
.shop-balance strong { font: 400 26px var(--display); color: var(--orange-dark); }
.shop-balance small { display: block; color: var(--ink-soft); font-size: 13px; }
.shop-lead { margin: 12px 0; color: var(--ink-soft); font-size: 15px; }
.packs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.pack {
  display: grid; justify-items: center; gap: 2px; padding: 12px 8px 10px; border-radius: 14px; text-align: center;
  background: linear-gradient(180deg, #fff, #f6ead0); border: 2px solid var(--wood); box-shadow: inset 0 2px 0 #fff, 0 3px 0 rgba(74, 44, 18, .35);
}
.pack-coin { width: 48px; height: 48px; object-fit: contain; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .25)); }
.pack:nth-child(2) .pack-coin { transform: scale(1.08); }
.pack:nth-child(3) .pack-coin { transform: scale(1.16); }
.pack:nth-child(4) .pack-coin { transform: scale(1.24); }
.pack:nth-child(5) .pack-coin { transform: scale(1.32); }
.pack-points { margin-top: 6px; font: 400 26px/1 var(--display); color: var(--orange-dark); -webkit-text-stroke: 1px rgba(74, 44, 18, .25); }
.pack-label { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.pack-usd { margin-top: 6px; font: 700 17px var(--body); color: var(--ink); }
.pack-imp { font-size: 12.5px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.pack .btn { margin-top: 8px; width: 100%; }
.pay-steps { list-style: none; display: flex; gap: 8px; margin: 14px 0 0; padding: 0; counter-reset: step; }
.pay-steps li { flex: 1; padding: 8px 10px; border-radius: 10px; background: var(--paper-3); color: var(--ink-soft); font-size: 13px; font-weight: 600; counter-increment: step; }
.pay-steps li::before { content: counter(step) ". "; }
.pay-steps li.now { background: #fff1c9; color: var(--ink); box-shadow: inset 0 0 0 2px var(--orange); }
.pay-steps li.done { background: #dcefc9; color: var(--green-dark); }
.shop-history { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 14px; }
.shop-history li { display: flex; gap: 12px; align-items: center; }
.shop-history span { color: var(--ink-soft); min-width: 110px; }
.shop-history strong { color: var(--green-dark); min-width: 60px; }
@media (max-width: 760px), (max-height: 560px) {
  .points .plus { width: 20px; height: 20px; font-size: 15px; }
  .packs { grid-template-columns: repeat(3, 1fr); }
  .drawer.shop-drawer { top: 54px; max-height: calc(100vh - 62px); max-height: calc(100dvh - 62px); }
}
.pack { position: relative; }
.pack-bonus { margin-top: 4px; padding: 2px 8px; border-radius: 999px; background: #dcefc9; color: var(--green-dark); font-size: 12.5px; font-weight: 700; }
.pack-bonus small { font-weight: 600; opacity: .8; }
.pack-bonus.none { background: none; }
.pack.best { border-color: var(--orange); box-shadow: inset 0 2px 0 #fff, 0 3px 0 var(--orange-dark), 0 0 0 3px rgba(242, 148, 24, .25); }
.pack-tag { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 2px 10px; border-radius: 999px; background: linear-gradient(180deg, #ffe07a, var(--orange)); border: 2px solid var(--wood-dark); color: var(--wood-dark); font: 400 13px var(--display); }
.shop-history strong small { color: var(--ink-soft); font-weight: 600; }

/* ---------- Selling points back for IMP ---------- */
.shop-tabs { display: flex; gap: 6px; margin: 14px 0 12px; border-bottom: 3px solid var(--wood); }
.shop-tabs button {
  padding: 8px 16px 7px; border: 2px solid var(--wood); border-bottom: 0; border-radius: 10px 10px 0 0; cursor: pointer;
  background: var(--paper-3); color: var(--ink-soft); font: 400 16px var(--display); margin-bottom: -1px;
}
.shop-tabs button[aria-selected="true"] { background: #fffaf0; color: var(--wood-dark); border-color: var(--wood); box-shadow: inset 0 3px 0 #fff; padding-bottom: 9px; }
.sell { display: grid; gap: 14px; }
.sell-input label { display: block; font: 400 18px var(--display); color: var(--wood-dark); margin-bottom: 6px; }
.sell-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.sell-row input { width: 170px; font: 400 26px var(--display); color: var(--orange-dark); text-align: right; padding: 6px 12px; }
.chips { display: flex; gap: 6px; }
.chips button { padding: 6px 12px; border-radius: 999px; border: 2px solid var(--wood); background: #fffaf0; color: var(--wood-dark); font: 700 14px var(--body); cursor: pointer; }
.chips button:hover { background: #fff1c9; }
.sell-input small { display: block; margin-top: 6px; color: var(--ink-soft); font-size: 13px; }
.sell-math { display: grid; gap: 0; margin: 0; padding: 4px 16px; border-radius: 14px; background: #fffaf0; border: 2px solid #c9ab7a; }
.sell-math > div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px dashed #d9c08f; font-variant-numeric: tabular-nums; }
.sell-math dt { color: var(--ink-soft); font-weight: 600; }
.sell-math dd { margin: 0; font-weight: 700; color: var(--ink); }
.sell-math .fee dd { color: var(--red-dark); }
.sell-math .total { border-bottom: 0; padding-top: 12px; align-items: baseline; }
.sell-math .total dt { font: 400 20px var(--display); color: var(--wood-dark); }
.sell-math .total dd { font: 400 30px var(--display); color: var(--green-dark); }
.sell-go { justify-self: stretch; }
.shop-history.sales em { color: var(--ink-soft); font-style: normal; min-width: 90px; }
.shop-history .pill { transform: none; }
.payouts .flush-title, .panel.flush > .flush-title { margin: 10px 14px 8px; }
.payouts .row-state { display: block; color: var(--ink-soft); font-size: 12px; margin-top: 4px; }
.shop-history.sales strong { color: var(--ink); }