/* =========================================================================
   Grow a Mutant — 16-bit UI Theme Layer  (public/ui16.css)
   =========================================================================
   โหลด "หลัง" style.css เสมอ เพื่อทับธีมเดิมโดยไม่ต้องรื้อ layout ที่ทำงานอยู่แล้ว
   หลักการ:
   - ไม่มีมุมโค้ง ไม่มี blur ไม่มี gradient นุ่มๆ — ใช้ขอบคม ๆ และ bevel เป็นชั้นพิกเซล
   - กรอบหน้าต่างเป็น "double frame" แบบเกม SNES: ไม้/ทองด้านนอก + ขอบเข้มด้านใน
   - ปุ่มมีความหนา 4px กดแล้วยุบลงจริง (translateY) ให้รู้สึกเป็นปุ่มกด
   - ช่องไอเทมเป็นบ่อลึก (inset bevel) ของวางอยู่ "ใน" ช่อง ไม่ใช่ลอยบนพื้น
   ========================================================================= */

:root {
  --ink: #0d1410;              /* เส้นขอบเข้มสุด ใช้เป็น outline ของทุกอย่าง */
  --frame: #c9a25a;            /* กรอบทองหลัก */
  --frame-lit: #f2d698;        /* ไฮไลต์บนกรอบ */
  --frame-dark: #7a5c2b;       /* เงาบนกรอบ */
  --panel: #223021;            /* พื้นหน้าต่าง */
  --panel-2: #1a2519;          /* พื้นหน้าต่างชั้นลึก */
  --well: #121a12;             /* บ่อช่องไอเทม */
  --well-lip: #3b4c35;         /* ขอบบนของบ่อ */
  --txt: #f0f6df;
  --txt-dim: #a9bd97;
  --accent: #8ee06a;
  --danger: #ff6b5e;
  --gold: #ffd976;
  --shadow: 6px 6px 0 rgba(0, 0, 0, .45);
}

/* ---------- พื้นฐาน: พิกเซลชัด ไม่เบลอ ---------- */
* { border-radius: 0 !important; }
img, canvas { image-rendering: pixelated; }
body { background: #0f150e; }

/* =========================================================================
   1) กรอบหน้าต่างพิกเซล — ใช้ร่วมกันทุก modal/panel
   ========================================================================= */
.service-panel,
.pixel-window,
.inventory-window,
#trade-panel,
.tutorial-card,
.context-card,
.mutation-card,
.bag-quest-card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .05) 0 3px, transparent 3px),
    linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%) !important;
  border: 4px solid var(--frame) !important;
  box-shadow:
    inset 0 0 0 2px var(--frame-dark),
    inset 0 0 0 5px var(--panel-2),
    inset 0 3px 0 5px rgba(255, 255, 255, .05),
    0 0 0 4px var(--ink),
    var(--shadow) !important;
  color: var(--txt);
  backdrop-filter: none !important;
}

/* หมุดมุมกรอบ 4 มุม — รายละเอียดเล็กที่ทำให้หน้าต่างดูเป็นงานโลหะจริง */
.service-panel::before,
.pixel-window::before,
.inventory-window::before,
#trade-panel::before {
  content: "";
  position: absolute;
  inset: 3px;
  pointer-events: none;
  z-index: 3;
  background:
    linear-gradient(var(--frame-lit), var(--frame-lit)) 0 0 / 7px 7px no-repeat,
    linear-gradient(var(--frame-lit), var(--frame-lit)) 100% 0 / 7px 7px no-repeat,
    linear-gradient(var(--frame-lit), var(--frame-lit)) 0 100% / 7px 7px no-repeat,
    linear-gradient(var(--frame-lit), var(--frame-lit)) 100% 100% / 7px 7px no-repeat;
}

/* หัวข้อหน้าต่าง = ป้ายไม้ติดบนกรอบ */
.service-kicker,
.seed-shop-title,
.npc-sell-title,
.progression-title,
.seed-vault-title,
.bag-title-row > strong,
.tutorial-kicker,
.mutation-kicker {
  display: inline-block;
  background: linear-gradient(180deg, var(--frame-lit), var(--frame)) !important;
  color: #2a1d06 !important;
  font-weight: 800;
  letter-spacing: .6px;
  padding: 4px 12px !important;
  border: 3px solid var(--ink) !important;
  box-shadow: inset 0 -3px 0 var(--frame-dark), 0 3px 0 rgba(0, 0, 0, .4);
  text-transform: none;
}

/* =========================================================================
   2) ปุ่มพิกเซล — หนา 4px กดแล้วยุบลงจริง
   ========================================================================= */
button,
.bag-toggle,
.auction-submit-btn,
.upgrade-plot-btn,
.daily-seed-btn,
.shop-buy,
.service-close,
#join-btn,
#plot-btn {
  font-family: inherit;
  font-weight: 800;
  color: #f7fbe9;
  background: linear-gradient(180deg, #5b8a47 0%, #446c37 52%, #35582c 100%);
  border: 3px solid var(--ink) !important;
  box-shadow:
    inset 2px 2px 0 rgba(255, 255, 255, .28),
    inset -2px -2px 0 rgba(0, 0, 0, .35),
    0 4px 0 #22331c,
    0 4px 0 3px var(--ink);
  padding: 8px 14px;
  cursor: pointer;
  transition: none !important;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, .55);
}
button:hover:not(:disabled) { filter: brightness(1.14); }
button:active:not(:disabled) {
  transform: translateY(4px);
  box-shadow:
    inset 2px 2px 0 rgba(0, 0, 0, .3),
    0 0 0 3px var(--ink);
}
button:disabled {
  background: linear-gradient(180deg, #4a5145, #363c33) !important;
  color: #8e9887 !important;
  box-shadow: inset 2px 2px 0 rgba(255, 255, 255, .08), 0 4px 0 #23271f, 0 4px 0 3px var(--ink) !important;
  cursor: not-allowed;
}

/* ปุ่มหลัก (ยืนยัน/ซื้อ/ประมูล) เป็นทอง แยกลำดับความสำคัญออกจากปุ่มรอง */
#join-btn,
.shop-buy,
#auction-bid-submit-btn,
.auction-submit-btn {
  background: linear-gradient(180deg, #f0c766 0%, #d9a63f 52%, #b5842a 100%);
  color: #2b1d05;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, .35);
  box-shadow:
    inset 2px 2px 0 rgba(255, 255, 255, .45),
    inset -2px -2px 0 rgba(0, 0, 0, .3),
    0 4px 0 #6d4f16,
    0 4px 0 3px var(--ink);
}

/* ปุ่มปิด = กากบาทแดงแบบ pixel */
.service-close {
  background: linear-gradient(180deg, #c95149, #94322c) !important;
  box-shadow: inset 2px 2px 0 rgba(255, 255, 255, .3), 0 3px 0 #5e1f1b, 0 3px 0 3px var(--ink) !important;
  padding: 4px 10px !important;
}

/* =========================================================================
   3) ช่องไอเทม — บ่อลึกแบบ RPG inventory
   ========================================================================= */
.bag-cell,
.bag-slot,
.escrow-slot,
.seed-chip,
.rpg-hotbar > * {
  background: linear-gradient(180deg, var(--well) 0%, #1b2419 100%) !important;
  border: 3px solid var(--ink) !important;
  box-shadow:
    inset 2px 2px 0 rgba(0, 0, 0, .65),
    inset -2px -2px 0 var(--well-lip),
    0 0 0 1px rgba(0, 0, 0, .5) !important;
  position: relative;
}
.bag-cell:hover,
.rpg-hotbar > *:hover {
  box-shadow:
    inset 2px 2px 0 rgba(0, 0, 0, .5),
    inset -2px -2px 0 #5e7a52,
    0 0 0 2px var(--frame) !important;
}

/* ของที่วางอยู่ในช่อง — มีแผ่นรองและเงาให้รู้สึกว่าอยู่ "ใน" บ่อ */
.bag-stack {
  background: linear-gradient(180deg, #33452c, #253320) !important;
  border: 2px solid var(--ink) !important;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .16), inset 0 -2px 0 rgba(0, 0, 0, .4) !important;
  cursor: grab;
}
.bag-stack:active { cursor: grabbing; }

/* เลขช่องว่างจาง ๆ ให้รู้ว่าช่องมีอยู่ */
.empty-slot-number { color: #3c4c36 !important; font-weight: 900; }

/* =========================================================================
   3b) ไอคอนไอเทมจริง — แทน unicode เดิม (✦ ◈ ...) ด้วย mini sprite ที่วาดจาก
   public/art.js (getItemIconURL) ให้หน้าตาตรงกับพันธุ์/ระดับ rarity จริงในเกม
   ---------------------------------------------------------------------
   ช่องกระเป๋า (.bag-stack) โชว์ "ไอคอน + ชื่อพันธุ์ + เลขจำนวน" ครบทั้ง 3 อย่างชัดเจน
   กันไม่ให้ทับกัน: แบ่งเป็น 2 แถวแยกขาดจากกันจริงๆ (grid-template-rows:1fr auto เดิม)
   - แถวบน (1fr): กรอบไอคอน <i> เป็น position:relative ของตัวเอง badge จำนวนจึงลอย
     ทับได้แค่ "ในกรอบไอคอนเท่านั้น" (มุมขวาบน) ไม่มีทางล้นไปโดนแถวชื่อด้านล่างได้เลย
   - แถวล่าง (auto): ชื่อพันธุ์ บรรทัดเดียว ตัดด้วย ellipsis ถ้ายาวเกิน อยู่คนละพื้นที่กับ badge
   rarity/ความจุเต็มยังดูได้จาก tooltip (hover) เพิ่มเติม
   ========================================================================= */
img.item-icon {
  image-rendering: pixelated;
  display: block;
  pointer-events: none;
  filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, .5));
}
/* แถวไอคอน: เป็น position:relative เอง เพื่อ "กัน" badge จำนวนไว้แค่ในกรอบนี้ ไม่ให้ล้นไปแถวชื่อ */
.bag-stack > i {
  display: grid;
  place-items: center;
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
}
.bag-stack > i img.item-icon { width: 74%; height: 74%; max-width: 34px; max-height: 34px; }
/* ป้ายจำนวน มุมขวาบนของ "กรอบไอคอน" เท่านั้น (ไม่ใช่ของทั้งช่อง) จึงชนชื่อพันธุ์ด้านล่างไม่ได้ */
.bag-stack .stack-count {
  position: absolute !important;
  top: 0; right: 0; bottom: auto !important; left: auto !important;
  background: var(--ink) !important;
  color: var(--gold) !important;
  border: 1px solid #45381a !important;
  box-shadow: 1px 1px 0 rgba(0, 0, 0, .5) !important;
  min-width: 15px;
  font-size: 10px !important;
  z-index: 2;
}
/* แถวชื่อพันธุ์: คนละแถว (grid row 2) กับไอคอน+badge เด็ดขาด ตัดคำด้วย ellipsis ไม่มีวันล้นทับใคร */
.bag-stack > .stack-name {
  grid-row: 2;
  width: 100%;
  text-align: center;
  font: 900 8px/1.3 monospace;
  color: #d8e8c2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 1px 2px 0;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, .7);
}
/* hotbar / trade: ไอคอนอยู่ในกรอบสี่เหลี่ยมเล็กที่มี display:grid;place-items:center อยู่แล้ว */
.rpg-hotbar .hotbar-slot .seed-pixel-icon img.item-icon { width: 22px; height: 22px; }
.seed-pixel-icon img.item-icon { width: 100%; height: 100%; max-width: 22px; max-height: 22px; }
.trade-source-stack i img.item-icon { width: 26px; height: 26px; }
.trade-offer-card i img.item-icon { width: 22px; height: 22px; }
.trade-offer-card i, .trade-source-stack i { display: block; }
/* แถวรายการในร้าน/ตลาด/ประมูล/หอสะสม: ไอคอนอยู่ซ้ายของข้อความเสมอ */
.harvest-item, .harvest-market-card, .shop-item, .collection-item, .market-item {
  display: flex !important;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}
.harvest-item .bulk-sell-info { flex: 1 1 150px; }
.harvest-item .bulk-sell-controls,
.harvest-item .auction-submit-controls { flex: 1 1 100%; }
/* .bulk-sell-row (แถวร้านรับซื้อผลผลิต) มี icon เป็นลูกตัวที่ 4 เพิ่มเข้ามาแล้ว ใช้ selector
   2 คลาสรวมกันให้ specificity สูงกว่า style.css เดิมชัวร์ๆ (เดิมเป็น display:grid!important) */
.harvest-item.bulk-sell-row {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center;
  gap: 9px;
}
.harvest-item.bulk-sell-row .bulk-sell-info { flex: 1 1 150px; }
.harvest-item.bulk-sell-row .bulk-sell-controls { flex: 1 1 100%; }
.harvest-market-card .harvest-market-info { flex: 1 1 150px; }
.harvest-market-card .market-price-controls,
.harvest-market-card .market-net-preview,
.harvest-market-card .market-list-button { flex: 1 1 100%; }
.shop-item .shop-seed-name { flex: 1 1 120px; }
.shop-item .shop-qty { flex: 0 0 auto; }
.shop-item .shop-buy { flex: 1 1 100%; }
/* .shop-item-quantity (แถวร้านขายเมล็ด) มี icon เป็นลูกตัวที่ 4 เพิ่มเข้ามาแล้ว ใช้ selector
   2 คลาสรวมกันให้ specificity สูงกว่า style.css เดิมชัวร์ๆ ไม่ต้องพึ่งลำดับไฟล์ */
.shop-item.shop-item-quantity {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center;
  gap: 9px;
}
.shop-item.shop-item-quantity .shop-seed-name { flex: 1 1 110px; }
.shop-item.shop-item-quantity .shop-qty { flex: 0 0 auto; }
.shop-item.shop-item-quantity .shop-buy { flex: 1 1 100%; }
.harvest-item > i, .harvest-market-card > i, .shop-item > i,
.collection-item > i, .market-item > i {
  flex: none;
  display: grid;
  place-items: center;
  background: var(--well);
  border: 2px solid var(--ink);
  box-shadow: inset 2px 2px 0 rgba(0, 0, 0, .6), inset -1px -1px 0 var(--well-lip);
}
.harvest-item > i img, .harvest-market-card > i img, .shop-item > i img { width: 30px; height: 30px; }
.collection-item > i img, .market-item > i img { width: 26px; height: 26px; }
.collection-item, .market-item { padding: 6px 8px !important; }
.market-item > span { flex: 1 1 120px; }

/* ตลาดกลาง: แสดงไอเทมแต่ละชิ้นในช่องคงที่ ไม่ขยายรูปตามความสูงของแถว */
#market-inventory-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 8px;
}
.harvest-market-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 7px !important;
}
.harvest-market-card .harvest-market-info {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-width: 0;
  flex: initial;
}
.harvest-market-card .harvest-market-info > i {
  box-sizing: border-box;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: none;
  overflow: hidden;
  border: 2px solid var(--ink);
  background: var(--well);
  box-shadow: inset 2px 2px 0 rgba(0, 0, 0, .6), inset -1px -1px 0 var(--well-lip);
}
.harvest-market-card .harvest-market-info > i img.item-icon {
  display: block;
  width: 30px !important;
  height: 30px !important;
  max-width: 30px;
  max-height: 30px;
  object-fit: contain;
  image-rendering: pixelated;
}
.harvest-market-card .harvest-market-info > span {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.harvest-market-card .market-price-controls,
.harvest-market-card .market-net-preview,
.harvest-market-card > .market-list-button {
  width: 100%;
  min-width: 0;
  flex: initial;
}

/* ช่องที่กำลังลากของออก */
.drag-source { opacity: .35 !important; filter: grayscale(.5); }
.bag-drag-preview {
  border: 3px solid var(--gold) !important;
  box-shadow: 0 0 0 3px var(--ink), 0 8px 14px rgba(0, 0, 0, .6) !important;
}

/* =========================================================================
   4) Hotbar — แถบใช้งานด่วนแบบ console RPG
   ========================================================================= */
.rpg-hotbar {
  background: linear-gradient(180deg, #2c3a26, #1a2417) !important;
  border: 4px solid var(--frame) !important;
  box-shadow: inset 0 0 0 2px var(--frame-dark), 0 0 0 4px var(--ink), 0 -4px 0 rgba(0, 0, 0, .3) !important;
  padding: 7px !important;
  gap: 7px !important;
}
.rpg-hotbar > *.selected,
.rpg-hotbar > *[data-selected="true"] {
  box-shadow: inset 0 0 0 2px var(--gold), 0 0 0 3px var(--gold), 0 0 12px rgba(255, 217, 118, .6) !important;
  transform: translateY(-3px);
}

/* =========================================================================
   5) HUD — แถบสถานะบนซ้าย
   ========================================================================= */
.rpg-hud {
  background: linear-gradient(180deg, rgba(34, 48, 33, .96), rgba(20, 29, 19, .96)) !important;
  border: 3px solid var(--frame) !important;
  box-shadow: inset 0 0 0 2px var(--frame-dark), 0 0 0 3px var(--ink), var(--shadow) !important;
}
.hud-portrait {
  background: linear-gradient(180deg, #4a6a3e, #2b3d24) !important;
  border: 3px solid var(--ink) !important;
  box-shadow: inset 2px 2px 0 rgba(255, 255, 255, .2), inset -2px -2px 0 rgba(0, 0, 0, .4) !important;
}
.hud-chip {
  background: var(--well) !important;
  border: 2px solid var(--ink) !important;
  box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .6), inset -1px -1px 0 rgba(255, 255, 255, .1) !important;
  color: var(--txt) !important;
  font-weight: 700;
}
.hud-chip b { color: var(--gold); }
.world-status,
.performance-toggle,
.audio-toggle,
.mouse-help {
  background: linear-gradient(180deg, rgba(34, 48, 33, .95), rgba(18, 26, 17, .95)) !important;
  border: 3px solid var(--frame-dark) !important;
  box-shadow: 0 0 0 2px var(--ink), 0 3px 0 rgba(0, 0, 0, .35) !important;
  color: var(--txt) !important;
}

/* =========================================================================
   6) Input / ตัวเลข
   ========================================================================= */
input[type="text"],
input[type="number"],
#name-input {
  box-sizing: border-box;
  background: var(--well) !important;
  color: var(--txt) !important;
  border: 3px solid var(--ink) !important;
  box-shadow: inset 2px 2px 0 rgba(0, 0, 0, .7), inset -1px -1px 0 rgba(255, 255, 255, .08) !important;
  padding: 9px 12px !important;
  font-weight: 700;
  font-size: 15px;
  outline: none;
}
input:focus {
  box-shadow: inset 2px 2px 0 rgba(0, 0, 0, .7), 0 0 0 3px var(--gold) !important;
}
.input-shell { border: none !important; background: none !important; box-shadow: none !important; }

/* ช่องตัวเลขแบบ stepper (−  [เลข]  +) ในร้านค้า/ขาย/ประมูล — กล่องเล็กตายตัวตาม grid เดิม
   (28-48px กว้าง, ~30px สูง) ถ้าใช้ padding ก้อนใหญ่แบบ input ทั่วไปด้านบน ตัวเลขจะถูกบีบจนล้นกรอบ
   มองไม่เห็น (นี่คือสาเหตุบั๊ก "ใส่ตัวเลขไปก็มองไม่เห็น") จึงต้องมี padding เล็กแยกเฉพาะจุดนี้
   สาเหตุจริงอีกครึ่งหนึ่ง: ลูกศรขึ้น/ลง (spin button) ของ browser ไม่เคยถูกซ่อน กินพื้นที่ในกล่อง 48px
   ไปเกือบหมด เหลือที่ให้ตัวเลขแค่เสี้ยวบางๆ (คือที่เห็นเป็นเส้นบางๆ ในเกม ไม่ใช่ตัวเลข) เพราะมีปุ่ม
   −/+ ของเราเองอยู่แล้ว จึงซ่อนลูกศร native ทิ้งไปเลย คืนพื้นที่เต็มกล่องให้ตัวเลข */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] { -moz-appearance: textfield; }
.sell-quantity,
.shop-qty input,
.market-price-input,
#auction-bid-input {
  box-sizing: border-box !important;
  background: var(--well) !important;
  color: var(--gold) !important;
  border: 2px solid var(--frame) !important;
  box-shadow: inset 2px 2px 0 rgba(0, 0, 0, .7) !important;
  padding: 2px 3px !important;
  font-weight: 900 !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
  text-align: center;
  outline: none;
}
.sell-quantity:focus,
.shop-qty input:focus,
.market-price-input:focus,
#auction-bid-input:focus { box-shadow: inset 2px 2px 0 rgba(0, 0, 0, .7), 0 0 0 2px var(--gold) !important; }
/* ปุ่ม +/− ข้างช่องตัวเลข ให้สูงเท่ากับช่องตัวเลขพอดี ไม่ล้นกริดเดิม */
.sell-step, .shop-qty button {
  padding: 0 !important;
  min-height: 30px;
  font-size: 15px !important;
}

/* =========================================================================
   7) รายการของในร้าน / ตลาด / เควส — การ์ดพิกเซล
   ========================================================================= */
.shop-item,
.market-item,
.harvest-item,
.harvest-market-card,
.collection-item,
.quest-item,
.auction-history-row,
.bulk-sell-row,
.trade-offer-card,
.trade-source-stack {
  background: linear-gradient(180deg, #2c3b26 0%, #212d1d 100%) !important;
  border: 3px solid var(--ink) !important;
  box-shadow:
    inset 2px 2px 0 rgba(255, 255, 255, .12),
    inset -2px -2px 0 rgba(0, 0, 0, .4),
    0 3px 0 rgba(0, 0, 0, .3) !important;
  color: var(--txt) !important;
  padding: 9px 11px !important;
}
.shop-item:hover,
.market-item:hover,
.harvest-market-card:hover,
.trade-source-stack:hover { border-color: var(--frame) !important; filter: brightness(1.1); }

/* แถบความคืบหน้าเควส/กระเป๋า = หลอดพิกเซลมีกรอบ */
.bag-weight-track {
  background: var(--well) !important;
  border: 2px solid var(--ink) !important;
  box-shadow: inset 2px 2px 0 rgba(0, 0, 0, .6) !important;
  height: 14px !important;
  overflow: hidden;
}
.bag-weight-track > * {
  background: repeating-linear-gradient(90deg, #8ee06a 0 6px, #6cc44f 6px 12px) !important;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35) !important;
}
.plot-storage-row { margin-top: 8px !important; }
.plot-storage-track { margin-bottom: 12px !important; }
.plot-storage-track > *[data-state="heavy"] { background: repeating-linear-gradient(90deg,#ffd36b 0 6px,#e7ad42 6px 12px) !important; }
.plot-storage-track > *[data-state="critical"] { background: repeating-linear-gradient(90deg,#ff8b71 0 6px,#db554b 6px 12px) !important; }

/* =========================================================================
   8) Rarity — สีประจำระดับ ใช้ร่วมกันทั้งเกม
   ========================================================================= */
.rarity-badge {
  border: 2px solid var(--ink) !important;
  padding: 1px 7px !important;
  font-weight: 900;
  font-size: 11px;
  color: #17200f !important;
  background: #cfe6c2;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .25);
}
.rarity-uncommon, .rarity-uncommon .rarity-badge { --r: #8ee06a; }
.rarity-rare, .rarity-rare .rarity-badge { --r: #63b6ff; }
.rarity-legendary, .rarity-legendary .rarity-badge { --r: #ffb648; }
.rarity-rainbow, .rarity-rainbow .rarity-badge { --r: #ff8ae0; }
.rarity-uncommon .rarity-badge,
.rarity-rare .rarity-badge,
.rarity-legendary .rarity-badge,
.rarity-rainbow .rarity-badge { background: var(--r) !important; }
.rarity-uncommon, .rarity-rare, .rarity-legendary, .rarity-rainbow { border-color: var(--r) !important; }
.rarity-rainbow {
  background: linear-gradient(135deg, #3a2436, #2b2540) !important;
  box-shadow: inset 0 0 0 2px #ff8ae0, 0 0 14px rgba(255, 138, 224, .35) !important;
}

/* =========================================================================
   9) หอประมูล — การ์ดล็อตและ badge บน HUD
   ========================================================================= */
.auction-lot-card {
  background: linear-gradient(180deg, #2f3b2a, #1e2819) !important;
  border: 4px solid var(--frame) !important;
  box-shadow: inset 0 0 0 2px var(--frame-dark), 0 0 0 3px var(--ink) !important;
  padding: 12px !important;
}
.auction-timer {
  font-family: monospace;
  font-weight: 900;
  font-size: 26px;
  color: var(--gold);
  background: var(--well);
  border: 3px solid var(--ink);
  box-shadow: inset 2px 2px 0 rgba(0, 0, 0, .6);
  padding: 4px 0;
  text-align: center;
  letter-spacing: 2px;
}
.auction-urgent { animation: pixel-alarm .6s steps(2, end) infinite; }
.auction-urgent .auction-timer { color: #ff9b8f; }
@keyframes pixel-alarm {
  0%, 49% { box-shadow: inset 0 0 0 2px var(--frame-dark), 0 0 0 3px var(--ink); }
  50%, 100% { box-shadow: inset 0 0 0 2px #ff6b5e, 0 0 0 3px var(--ink), 0 0 18px rgba(255, 107, 94, .5); }
}
.auction-empty {
  display: flex; flex-direction: column; gap: 6px; align-items: center;
  padding: 18px 12px !important;
  background: var(--well) !important;
  border: 3px dashed var(--well-lip) !important;
  color: var(--txt-dim) !important;
}
.auction-empty b { color: var(--txt); }
.auction-empty #auction-next-timer { color: var(--gold); font-family: monospace; }

/* Badge เตือนประมูลบน HUD (ทำงานแม้ปิดพาเนล) */
.auction-badge {
  position: fixed;
  top: calc(12px + env(safe-area-inset-top, 0px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 14px 7px 10px;
  cursor: pointer;
  background: linear-gradient(180deg, #3a3020, #241d12) !important;
  border: 3px solid var(--frame) !important;
  box-shadow: inset 0 0 0 2px var(--frame-dark), 0 0 0 3px var(--ink), 0 4px 0 rgba(0, 0, 0, .4) !important;
  color: var(--txt);
}
.auction-badge-icon { font-size: 19px; filter: drop-shadow(0 0 5px rgba(255, 217, 118, .7)); }
.auction-badge-body { display: flex; flex-direction: column; line-height: 1.2; }
.auction-badge-body b { font-size: 13px; color: var(--gold); }
.auction-badge-body small { font-size: 11px; color: var(--txt-dim); font-family: monospace; }
.auction-badge-urgent { animation: pixel-alarm .6s steps(2, end) infinite; }

/* =========================================================================
   10) Toast / ประกาศ / Mutation Reveal
   ========================================================================= */
.sale-toast,
.service-interaction {
  background: linear-gradient(180deg, #2b3a25, #1a2417) !important;
  border: 3px solid var(--frame) !important;
  box-shadow: inset 0 0 0 2px var(--frame-dark), 0 0 0 3px var(--ink), var(--shadow) !important;
  color: var(--txt) !important;
}
.sale-toast-icon {
  background: var(--well) !important;
  border: 2px solid var(--ink) !important;
  box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .6) !important;
}
.announcement-ribbon {
  background: linear-gradient(180deg, #4a3a14, #2a2009) !important;
  border: 4px solid var(--gold) !important;
  box-shadow: 0 0 0 3px var(--ink), 0 0 24px rgba(255, 217, 118, .35) !important;
}
.announcement-kicker { background: var(--gold) !important; color: #2b1d05 !important; border: 2px solid var(--ink) !important; padding: 2px 8px !important; }
.announcement-rainbow { border-color: #ff8ae0 !important; box-shadow: 0 0 0 3px var(--ink), 0 0 26px rgba(255, 138, 224, .5) !important; }

.mutation-card { padding: 22px 26px !important; text-align: center; }
.mutation-rarity { font-size: 30px !important; font-weight: 900; letter-spacing: 1px; text-shadow: 3px 3px 0 var(--ink); }
.mutation-species { font-size: 17px !important; color: var(--txt) !important; }
.mutation-value { color: var(--gold) !important; font-family: monospace; font-weight: 900; }

/* ตัวอักษรลอยตอนเก็บเกี่ยว (คงหลัก text-only ไม่มีกรอบตาม contract เดิม) */
.harvest-float {
  font-weight: 900 !important;
  text-shadow: 2px 2px 0 var(--ink), -2px -2px 0 var(--ink), 2px -2px 0 var(--ink), -2px 2px 0 var(--ink) !important;
  letter-spacing: .3px;
}

/* =========================================================================
   11) Scrollbar พิกเซล
   ========================================================================= */
.service-scroll, .bag-grid, .seed-list, .market-list, .harvest-list, .auction-history { scrollbar-width: thin; scrollbar-color: var(--frame) var(--well); }
::-webkit-scrollbar { width: 14px; height: 14px; }
::-webkit-scrollbar-track { background: var(--well); border: 2px solid var(--ink); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--frame-lit), var(--frame-dark));
  border: 2px solid var(--ink);
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .4);
}

/* =========================================================================
   12) หน้าเข้าเกม (Login) — หน้าจอไตเติลแบบตู้เกม
   ========================================================================= */
#login-screen { background: #080c08; }
.login-backdrop {
  background:
    linear-gradient(180deg, #16283a 0%, #2b4a3a 42%, #3d5c2f 66%, #23331c 100%) !important;
}
/* แถบเนินเขาพิกเซลซ้อนกัน 3 ชั้น ทำจาก gradient ขอบคม ไม่มี blur */
.forest-back {
  filter: none !important;
  background:
    radial-gradient(circle at 18% 78%, #2d4a2b 0 22%, transparent 23%),
    radial-gradient(circle at 52% 84%, #274324 0 26%, transparent 27%),
    radial-gradient(circle at 84% 76%, #2d4a2b 0 24%, transparent 25%),
    linear-gradient(180deg, transparent 0 58%, #223a20 58% 100%) !important;
}
.forest-front {
  height: 42% !important;
  background:
    repeating-linear-gradient(90deg, #14210f 0 16px, #182711 16px 32px) !important;
  opacity: .96 !important;
  clip-path: polygon(0 34%, 6% 22%, 13% 32%, 21% 18%, 29% 30%, 38% 20%, 47% 31%, 56% 19%, 65% 30%, 74% 21%, 83% 32%, 91% 23%, 100% 34%, 100% 100%, 0 100%);
}
.login-scanlines {
  opacity: .22 !important;
  background: repeating-linear-gradient(0deg, transparent 0 2px, rgba(0, 0, 0, .5) 2px 4px) !important;
  mix-blend-mode: normal !important;
}
.glow-plant { animation: glow-breathe 2.8s steps(4, end) infinite !important; }

.login-box {
  background: linear-gradient(180deg, #2b3a24 0%, #18220f 100%) !important;
  border: 5px solid var(--frame) !important;
  box-shadow:
    inset 0 0 0 3px var(--frame-dark),
    inset 0 0 0 7px #16200f,
    0 0 0 5px var(--ink),
    0 18px 0 rgba(0, 0, 0, .35),
    0 0 70px rgba(0, 0, 0, .7) !important;
  padding: 44px clamp(20px, 6vw, 60px) 30px !important;
}
.brand-mark {
  font-weight: 900 !important;
  font-size: clamp(30px, 6.4vw, 54px) !important;
  color: #f7e9a8 !important;
  letter-spacing: 1px;
  line-height: 1.12;
  text-shadow:
    4px 4px 0 #6b4a12,
    0 5px 0 var(--ink),
    -3px 0 0 var(--ink), 3px 0 0 var(--ink), 0 -3px 0 var(--ink),
    0 0 28px rgba(255, 217, 118, .35) !important;
  animation: title-bob 3.4s steps(2, end) infinite;
}
@keyframes title-bob { 0%, 49% { transform: translateY(0); } 50%, 100% { transform: translateY(-3px); } }
.login-subtitle {
  color: #cfe0a8 !important;
  background: rgba(10, 16, 9, .55);
  border: 2px solid var(--frame-dark);
  padding: 5px 12px;
  display: inline-block;
  font-weight: 700;
}
.login-hint {
  color: var(--txt-dim) !important;
  font-family: monospace;
  animation: blink-hint 1.4s steps(2, end) infinite;
}
@keyframes blink-hint { 0%, 55% { opacity: 1; } 56%, 100% { opacity: .35; } }
.login-decoration { filter: drop-shadow(3px 3px 0 rgba(0, 0, 0, .6)); }
#join-btn { font-size: 17px !important; padding: 13px 34px !important; letter-spacing: .5px; }
#name-input { text-align: center; }
#status-text { color: var(--txt-dim) !important; font-family: monospace; }

/* =========================================================================
   13) Tutorial / Context card / Cursor
   ========================================================================= */
.tutorial-card { padding: 16px 18px !important; }
.context-card { padding: 9px 12px !important; font-weight: 700; }
.game-cursor { filter: drop-shadow(2px 2px 0 rgba(0, 0, 0, .7)); }
.game-cursor small {
  background: var(--ink) !important;
  border: 2px solid var(--frame-dark) !important;
  padding: 1px 6px !important;
  color: var(--txt) !important;
}
.cursor-block small { border-color: var(--danger) !important; color: #ffc4be !important; }

/* =========================================================================
   14) Joystick + ปุ่มวางแปลง (มือถือ)
   ========================================================================= */
#joystick-base {
  background: rgba(14, 22, 13, .55) !important;
  border: 4px solid var(--frame-dark) !important;
  box-shadow: 0 0 0 3px var(--ink), inset 0 0 22px rgba(0, 0, 0, .5) !important;
}
#joystick-knob {
  background: linear-gradient(180deg, #7fa85f, #4a6b36) !important;
  border: 3px solid var(--ink) !important;
  box-shadow: inset 2px 2px 0 rgba(255, 255, 255, .3), inset -2px -2px 0 rgba(0, 0, 0, .35) !important;
}
#plot-btn { font-size: 15px !important; padding: 11px 16px !important; }
#plot-hint {
  background: var(--ink) !important;
  border: 2px solid var(--frame-dark) !important;
  color: var(--txt) !important;
  padding: 5px 10px !important;
}

/* =========================================================================
   15) โหมดจอแคบ — ลดความหนากรอบลงเพื่อไม่ให้กินพื้นที่อ่าน
   ========================================================================= */
@media (max-width: 480px) {
  .service-panel, .pixel-window, .inventory-window, #trade-panel { border-width: 3px !important; }
  .auction-timer { font-size: 21px; }
  .auction-badge { padding: 5px 10px 5px 8px; gap: 7px; }
  .auction-badge-body b { font-size: 12px; }
  button { padding: 7px 11px; }
}

/* วัตถุดิบเก็บจากแผนที่อยู่ในช่องเดียวกับไอเท็มอื่น แต่ย้ายตำแหน่งไม่ได้ */
.bag-stack.resource-stack { cursor: default !important; border-color: #9cbd70 !important; background: linear-gradient(180deg, #354d32, #263926) !important; }
.bag-stack.resource-stack:active { cursor: default !important; }

/* Town table: compact, readable two-player board games. */
.table-games-panel { width: min(680px, calc(100vw - 28px)) !important; text-align: center; }
.table-games-panel > h2 { margin-inline: 34px !important; }
.table-game-status { min-height: 42px; display: grid; place-items: center; margin: 10px 0; padding: 9px 12px; border: 1px solid #9d8858; background: linear-gradient(135deg,#12231e,#1b2e29); color: #f9e9b1; font-weight: 800; box-shadow: inset 0 0 0 2px #263b30,0 3px #0b1110; }
.table-game-waiting { position: relative; display: grid; gap: 15px; margin: 13px 0 15px; padding: 17px; overflow: hidden; border: 1px solid #9d8858; background: radial-gradient(ellipse at 50% -35%,#b9a4512b,transparent 65%),linear-gradient(145deg,#1b3029,#101e1b 72%); box-shadow: inset 0 0 0 2px #253a2e,0 4px #090f0d,0 0 28px #9cdb8b13; text-align: left; }
.table-game-waiting::before { position: absolute; inset: 0 0 auto; height: 2px; background: linear-gradient(90deg,transparent,#ddc77b,#85c69a,#ddc77b,transparent); content: ""; opacity: .8; }
.table-waiting-heading { display: flex; align-items: center; gap: 12px; }
.table-waiting-emblem { position: relative; display: grid; flex: 0 0 46px; place-items: center; width: 46px; height: 46px; border: 1px solid #c5a95e; background: radial-gradient(circle at 35% 27%,#6e8459,#283d2d 64%,#17251f); box-shadow: inset 0 0 0 3px #17251f,0 0 15px #f2d57824; color: #ffe8a1; font-size: 25px; text-shadow: 0 2px #342416,0 0 12px #ffe7a14d; animation: tableEmblemFloat 2.8s ease-in-out infinite; }
.table-waiting-copy { display: grid; gap: 4px; min-width: 0; }
.table-waiting-copy b { color: #ffe8a2; font-size: 16px; letter-spacing: .2px; text-shadow: 0 1px #171510,0 0 12px #f1d98724; }
.table-waiting-copy small { color: #b9c8b5; font-size: 12px; line-height: 1.45; }
.table-waiting-ellipsis { display: flex; gap: 4px; margin-left: auto; padding: 7px; }
.table-waiting-ellipsis i { width: 5px; height: 5px; border-radius: 50%; background: #f1d27d; box-shadow: 0 0 8px #f1d27d88; animation: tableWaitDot 1.1s ease-in-out infinite; }
.table-waiting-ellipsis i:nth-child(2) { animation-delay: .16s; }
.table-waiting-ellipsis i:nth-child(3) { animation-delay: .32s; }
.table-waiting-seats { display: grid; grid-template-columns: minmax(0,1fr) 56px minmax(0,1fr); align-items: center; gap: 8px; }
.table-waiting-seat { position: relative; display: grid; justify-items: center; align-content: center; gap: 5px; min-width: 0; min-height: 112px; padding: 11px 7px; overflow: hidden; border: 1px solid #52684f; background: linear-gradient(155deg,#253a2d,#172720); text-align: center; }
.table-waiting-seat::before { position: absolute; inset: 0 0 auto; height: 2px; background: linear-gradient(90deg,transparent,#8ab779,transparent); content: ""; opacity: .8; }
.table-waiting-seat.is-searching { border-style: dashed; border-color: #8a8058; background: linear-gradient(155deg,#292e25,#191f1b); }
.table-waiting-seat.is-searching::before { background: linear-gradient(90deg,transparent,#d9bd73,transparent); }
.table-waiting-avatar { position: relative; display: grid; place-items: center; width: 43px; height: 43px; border: 1px solid #c6ae66; background: radial-gradient(circle at 35% 28%,#80925c,#34452f 67%,#1b2921); box-shadow: inset 0 0 0 3px #1b2921,0 3px #0a100d; color: #ffedb0; font-size: 22px; }
.table-waiting-seat.is-searching .table-waiting-avatar { border-style: dashed; border-color: #b8a263; background: #202a23; color: #e2c875; animation: tableSeatGlow 2.4s ease-in-out infinite; }
.table-waiting-seat.is-searching .table-waiting-avatar::after { position: absolute; inset: -6px; border: 1px solid #e4ca7a77; content: ""; animation: tableSeatRing 2.2s ease-out infinite; }
.table-waiting-seat > b { max-width: 100%; overflow: hidden; color: #f4e6b5; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.table-waiting-seat > small { color: #aebdaa; font-size: 10px; }
.table-waiting-seat.is-ready > small { color: #9cd2a6; }
.table-waiting-connection { position: relative; display: block; height: 2px; overflow: hidden; background: #5b6045; }
.table-waiting-connection::after { position: absolute; top: -2px; left: -18px; width: 18px; height: 6px; background: linear-gradient(90deg,transparent,#ffe68c,transparent); content: ""; filter: drop-shadow(0 0 5px #ffe68c); animation: tableSignal 1.8s ease-in-out infinite; }
.table-waiting-progress { display: grid; grid-template-columns: auto minmax(70px,1fr); align-items: center; gap: 12px; color: #9faf9d; font-size: 10px; }
.table-waiting-progress > i { display: block; height: 4px; overflow: hidden; background: #0c1512; box-shadow: inset 0 0 0 1px #374537; }
.table-waiting-progress > i > b { display: block; width: 32%; height: 100%; background: linear-gradient(90deg,#9a8546,#f3d77e,#a8d192); box-shadow: 0 0 9px #f5d77d99; animation: tableProgress 2.6s ease-in-out infinite; }
@keyframes tableEmblemFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes tableWaitDot { 0%,60%,100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } }
@keyframes tableSeatGlow { 0%,100% { box-shadow: inset 0 0 0 3px #1b2921,0 0 5px #efda8733; } 50% { box-shadow: inset 0 0 0 3px #1b2921,0 0 15px #efda8788; } }
@keyframes tableSeatRing { 0% { transform: scale(.78); opacity: .8; } 100% { transform: scale(1.2); opacity: 0; } }
@keyframes tableSignal { 0% { transform: translateX(0); opacity: 0; } 25%,70% { opacity: 1; } 100% { transform: translateX(80px); opacity: 0; } }
@keyframes tableProgress { 0% { transform: translateX(-115%); } 100% { transform: translateX(320%); } }
@media(prefers-reduced-motion:reduce) { .table-waiting-emblem,.table-waiting-ellipsis i,.table-waiting-seat.is-searching .table-waiting-avatar,.table-waiting-seat.is-searching .table-waiting-avatar::after,.table-waiting-connection::after,.table-waiting-progress > i > b { animation: none !important; } }
.table-game-choices { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin: 14px 0; }
.table-game-choices button { display: grid; justify-items: center; gap: 6px; min-height: 144px !important; padding: 14px !important; border: 1px solid #8a8058 !important; background: radial-gradient(ellipse at 50% 0,#64744855,transparent 70%),linear-gradient(145deg,#273c2c,#14231f) !important; box-shadow: inset 0 0 0 2px #1c2b22,0 4px #0b1210,0 0 18px #99d67b0d !important; color: #f6e9bb !important; }
.table-game-choices button:hover { transform: translateY(-2px); border-color: #f5da8d !important; box-shadow: inset 0 0 0 2px #34472d,0 5px #0b1210,0 0 22px #ffe08842 !important; }
.table-game-choices button>span { color: #ffd879; font-size: 28px; text-shadow: 0 2px #462e1d,0 0 12px #ffd87965; }
.table-game-choices button>b { font-size: 17px; }
.table-game-choices button>small { color: #c7d2bd; font-size: 11px; }
.table-game-choices button>i { color: #9ce2bd; font-size: 11px; font-style: normal; }
.table-game-join { width: 100%; margin: 6px 0 12px; color: #142318 !important; background: linear-gradient(#ffe39a,#c89649) !important; box-shadow: 0 3px #694c2e !important; font-weight: 900; }
.table-game-roster { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 8px 0 12px; }
.table-game-seat { padding: 6px 11px; border: 1px solid #596c58; background: #14241f; color: #d9e5cf; font-size: 12px; }
.table-game-seat.is-you { border-color: #e2c877; color: #ffebad; box-shadow: 0 0 12px #ffe08b2c; }
.table-game-board { margin: 12px auto 15px; border: 4px solid #927346; background: #26352d; box-shadow: inset 0 0 0 2px #d2b879,0 5px #0c1210,0 0 22px #e9cb7d20; overflow: hidden; }
.table-game-board.is-xo { display: grid; grid-template-columns: repeat(3,minmax(70px,92px)); width: fit-content; gap: 3px; padding: 5px; }
.table-xo-cell { display: grid; place-items: center; width: 100%; aspect-ratio: 1; border: 1px solid #817454 !important; background: linear-gradient(145deg,#263b34,#192a27) !important; color: #ffe49a !important; font: 900 42px/1 "Segoe UI",sans-serif !important; text-shadow: 0 2px #111,0 0 12px #ffd87955; }
.table-xo-cell.mark-o { color: #9ee7eb !important; text-shadow: 0 2px #111,0 0 12px #67e7ff66; }
.table-game-board.is-checkers { display: grid; grid-template-columns: repeat(8,minmax(28px,44px)); width: fit-content; padding: 0; }
.table-checker-square { display: grid; place-items: center; width: 100%; aspect-ratio: 1; min-height: 0 !important; padding: 0 !important; border: 0 !important; }
.table-checker-square.is-light { background: #d7caa5 !important; }
.table-checker-square.is-dark { background: #76523a !important; }
.table-checker-square.is-dark:hover:not(:disabled) { filter: brightness(1.2); }
.table-checker-square.is-destination::after { content: ""; position: absolute; width: 22%; aspect-ratio: 1; border: 2px solid #fff0a2; border-radius: 50%; background: #fff0a24d; box-shadow: 0 0 10px #ffe997; pointer-events: none; }
.table-checker-square.is-selected { box-shadow: inset 0 0 0 3px #ffe080 !important; }
.table-checker-piece { z-index: 1; display: grid; place-items: center; width: 76%; aspect-ratio: 1; border: 2px solid #d9c99e; border-radius: 50%; font: 900 clamp(14px,3vw,23px)/1 "Segoe UI Symbol",sans-serif; box-shadow: inset 0 2px 2px #ffffff55,0 3px #191512,0 0 7px #17120c88; }
.table-checker-piece.piece-red { background: radial-gradient(circle at 34% 28%,#ffd2a0,#b74c30 54%,#59291f); color: #ffdfb1; }
.table-checker-piece.piece-black { background: radial-gradient(circle at 34% 26%,#e0d5af,#4d5044 48%,#202622); color: #fff0b4; }
.table-checker-piece.is-king { border-color: #ffe28a; box-shadow: inset 0 2px 2px #ffffff66,0 3px #191512,0 0 10px #ffdb7655; }
.table-game-actions { display: flex; justify-content: center; gap: 10px; margin: 8px 0; }
.table-game-actions button { min-width: 148px; }
.table-game-footnote { display: block; margin-top: 12px; color: #9cae9d; line-height: 1.5; }
@media(max-width:520px){.table-game-choices{gap:7px}.table-game-choices button{padding:10px 6px!important;min-height:132px!important}.table-game-choices button>small{font-size:9px}.table-game-waiting{gap:12px;padding:13px}.table-waiting-copy b{font-size:14px}.table-waiting-copy small{font-size:10px}.table-waiting-seats{grid-template-columns:minmax(0,1fr) 32px minmax(0,1fr);gap:5px}.table-waiting-seat{min-height:100px}.table-waiting-seat>b{font-size:10px}.table-waiting-seat>small{font-size:9px}.table-game-board.is-checkers{grid-template-columns:repeat(8,minmax(25px,10vw))}.table-game-actions button{min-width:0;flex:1}.table-games-panel{padding:17px 13px!important}}

/* Table game result reveal and server-process leaderboard */
.table-game-result { position: relative; display: grid; justify-items: center; gap: 5px; margin: 14px 0 16px; padding: 18px 16px 15px; overflow: hidden; border: 1px solid #d8bd70; background: radial-gradient(ellipse at 50% 0,#f0d57d33,transparent 68%),linear-gradient(145deg,#24382d,#10201b 72%); box-shadow: inset 0 0 0 2px #203329,0 4px #09100d,0 0 28px #efd16f23; color: #f5e9be; animation: tableResultIn .55s cubic-bezier(.2,.85,.25,1.25) both; }
.table-game-result::before,.table-game-result::after { position: absolute; top: 0; bottom: 0; width: 1px; background: linear-gradient(transparent,#ffe89b,transparent); content: ""; opacity: .65; }
.table-game-result::before { left: 13%; }.table-game-result::after { right: 13%; }
.table-game-result.is-loss { border-color: #967d61; background: radial-gradient(ellipse at 50% 0,#a8946730,transparent 68%),linear-gradient(145deg,#2d3028,#14201c 72%); }
.table-game-result.is-draw { border-color: #a9c4ab; background: radial-gradient(ellipse at 50% 0,#8fd7bd2b,transparent 68%),linear-gradient(145deg,#24382d,#10201b 72%); }
.table-result-sparkle { position: absolute; top: 8px; color: #ffe89a; text-shadow: 0 0 10px #ffe89a; animation: tableSparkle 1.8s ease-in-out infinite; }
.table-result-icon { display: grid; place-items: center; width: 52px; height: 52px; margin: 1px 0 3px; border: 1px solid #e2c66f; background: radial-gradient(circle,#79683b,#26372b 72%); box-shadow: inset 0 0 0 3px #1b2b21,0 0 18px #f0d27648; color: #ffe59a; font-size: 27px; filter: drop-shadow(0 2px #17160e); animation: tableTrophyFloat 2.3s ease-in-out infinite; }
.table-game-result > b { color: #ffe8a0; font-size: 19px; text-shadow: 0 2px #231b12,0 0 15px #ffe08c38; text-align: center; }
.table-game-result > small { color: #c4d0bc; font-size: 11px; }
.table-result-score { margin-top: 4px; padding: 5px 12px; border: 1px solid #655f43; background: #0b1713a8; color: #e8d798; font-size: 11px; }
.table-game-leaderboard { margin: 15px 0 4px; padding: 13px; border: 1px solid #657550; background: radial-gradient(ellipse at 50% -40%,#a4c47a20,transparent 75%),linear-gradient(145deg,#1a2a23,#101b18); box-shadow: inset 0 0 0 2px #18271e,0 3px #09100d; text-align: left; }
.table-leaderboard-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.table-leaderboard-heading > span { display: grid; gap: 3px; }.table-leaderboard-heading b { color: #f5e6ae; font-size: 14px; }.table-leaderboard-heading small { color: #9eaf9b; font-size: 10px; }
.table-leaderboard-heading button { width: 31px; min-width: 31px !important; height: 30px; padding: 0 !important; border: 1px solid #6b7651 !important; background: #1b3028 !important; color: #dfcd8c !important; font-size: 18px; }
.table-leaderboard-tabs { display: flex; gap: 5px; margin: 10px 0 8px; padding-bottom: 7px; border-bottom: 1px solid #354438; }
.table-leaderboard-tabs button { min-height: 29px !important; padding: 4px 13px !important; border: 1px solid #4c6049 !important; background: #14221d !important; color: #aab9a3 !important; font-size: 11px; }
.table-leaderboard-tabs button[aria-selected="true"] { border-color: #d0b568 !important; background: linear-gradient(#43543a,#27382c) !important; box-shadow: 0 0 12px #e4c96d22; color: #ffe8a1 !important; }
.table-game-stats-list { display: grid; gap: 4px; max-height: 220px; overflow-y: auto; }
.table-stats-row { display: grid; grid-template-columns: 31px minmax(0,1fr) auto 64px; align-items: center; gap: 7px; min-height: 35px; padding: 4px 8px; border: 1px solid #34463a; background: linear-gradient(90deg,#22342a,#17251f); color: #dfe5cf; }
.table-stats-row.is-top-1 { border-color: #9d8750; background: linear-gradient(90deg,#4b452a,#1b2a21); }.table-stats-row.is-top-2 { border-color: #697568; }.table-stats-row.is-top-3 { border-color: #876b51; }
.table-stats-rank { color: #d9c77d; font-size: 12px; text-align: center; }.table-stats-name { overflow: hidden; color: #edf0d8; font-size: 12px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }.table-stats-played { color: #91a18f; font-size: 10px; text-align: right; }.table-stats-wins { color: #a9dfaa; font-size: 11px; text-align: right; }
.table-stats-empty { padding: 15px 8px; border: 1px dashed #495748; color: #a8b4a2; font-size: 11px; text-align: center; }
@keyframes tableResultIn { from { opacity: 0; transform: translateY(16px) scale(.94); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes tableTrophyFloat { 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-4px) rotate(3deg); } }
@keyframes tableSparkle { 0%,100% { opacity: .45; transform: scale(.8) rotate(0); } 50% { opacity: 1; transform: scale(1.25) rotate(45deg); } }
@media(prefers-reduced-motion:reduce) { .table-game-result,.table-result-icon,.table-result-sparkle { animation: none !important; } }

/* Clear end screen: keep the result card, while hiding the finished board and stats. */
.table-games-panel { max-height: min(92vh, 860px); overflow-y: auto; overscroll-behavior: contain; scrollbar-color: #827349 #14221c; scrollbar-width: thin; }
.table-game-result { width: min(100%, 470px); min-height: 250px; margin: 20px auto 8px; align-content: center; gap: 8px; }
.table-game-result > b { font-size: clamp(20px,4vw,27px); }
.table-game-result > small { font-size: 12px; }
.table-game-actions { width: 100%; margin: 12px 0 0; }
.table-game-actions button { min-height: 42px !important; border-radius: 5px !important; font-weight: 800; }
.table-game-actions #table-game-rematch { border: 1px solid #ead18c !important; background: linear-gradient(180deg,#f3d78c,#b88645) !important; color: #20291d !important; box-shadow: inset 0 1px #fff2bf,0 3px #674728 !important; }
.table-game-actions #table-game-leave { border: 1px solid #66785f !important; background: linear-gradient(180deg,#30483a,#1a2e26) !important; color: #e5e9d2 !important; box-shadow: inset 0 1px #71846a,0 3px #0a120e !important; }
.table-game-leaderboard { display: block; margin-top: 13px; border: 1px solid #52664d; background: #12221c; box-shadow: inset 0 0 0 2px #1c2c22,0 3px #09100d; text-align: left; }
.table-game-leaderboard > summary { display: flex; align-items: center; min-height: 38px; padding: 0 12px; color: #dfd29a; font-size: 11px; font-weight: 800; cursor: pointer; list-style: none; }
.table-game-leaderboard > summary::-webkit-details-marker { display: none; }
.table-game-leaderboard > summary::after { margin-left: auto; color: #b5c798; content: "+"; font-size: 16px; }
.table-game-leaderboard[open] > summary::after { content: "−"; }
.table-leaderboard-content { padding: 0 12px 12px; }
.table-game-status { position: relative; min-height: 43px; border-color: #65734e; border-radius: 4px; background: radial-gradient(ellipse at 50% 0,#c9b86a1e,transparent 75%),linear-gradient(135deg,#172c23,#101b18); font-size: 14px; letter-spacing: .2px; }
.table-game-status:not(.hidden)::before { width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: #a9e6ad; box-shadow: 0 0 9px #8cdfa2; content: ""; }
.table-game-roster { justify-content: center; gap: 9px; margin: 11px auto; }
.table-game-seat { display: inline-flex; align-items: center; min-width: min(190px,42%); justify-content: center; padding: 8px 12px; border-color: #586747; border-radius: 3px; background: linear-gradient(145deg,#23382c,#14231d); box-shadow: inset 0 1px #71815a44,0 2px #09100d; }
.table-game-seat.is-you { border-color: #c6ad61; background: linear-gradient(145deg,#403d29,#1c2c22); }
.table-game-board { position: relative; margin: 14px auto 18px; padding: 7px; border: 2px solid #bca467; border-radius: 7px; background: linear-gradient(145deg,#4e4c39,#1c2b24 58%,#34372c); box-shadow: inset 0 0 0 2px #18261e,inset 0 0 24px #e0c36d15,0 6px #090f0c,0 0 25px #efd47924; }
.table-game-board.is-xo { grid-template-columns: repeat(3,clamp(76px,18vw,108px)); gap: 6px; padding: 8px; }
.table-xo-cell { position: relative; border: 1px solid #79865a !important; border-radius: 4px !important; background: radial-gradient(ellipse at 50% 20%,#31483a,#182720 72%) !important; color: #ffd978 !important; font-size: clamp(42px,9vw,64px) !important; text-shadow: 0 3px #312519,0 0 18px #ffd87977; transition: transform .14s ease,filter .14s ease,box-shadow .14s ease; }
.table-xo-cell:disabled { opacity: 1 !important; }
.table-xo-cell:not(:disabled):hover { z-index: 1; transform: translateY(-2px) scale(1.025); filter: brightness(1.2); box-shadow: inset 0 0 0 2px #d9c577,0 0 17px #ffe08c55 !important; }
.table-xo-cell.mark-x { color: #ffd36e !important; }
.table-xo-cell.mark-o { color: #8fe2e4 !important; text-shadow: 0 3px #162b2a,0 0 18px #67e7ff88; }
.table-game-board.is-checkers { grid-template-columns: repeat(8,clamp(34px,8.2vw,48px)); padding: 6px; border-radius: 6px; }
.table-checker-square { position: relative; }
.table-checker-square.is-light { background: linear-gradient(145deg,#ead9b1,#c0a77c) !important; }
.table-checker-square.is-dark { background: linear-gradient(145deg,#8a5e40,#543827) !important; }
.table-checker-square.is-dark:hover:not(:disabled) { filter: brightness(1.24); }
.table-checker-square.is-selected { z-index: 2; box-shadow: inset 0 0 0 3px #fff0a3,0 0 13px #ffe99788 !important; }
.table-checker-square.is-destination::after { width: 27%; border-width: 2px; background: #c8f09288; border-color: #edffae; box-shadow: 0 0 12px #d8ff91; }
.table-checker-piece { width: 78%; border-width: 2px; transition: transform .14s ease,filter .14s ease; }
.table-checker-square:not(:disabled):hover .table-checker-piece { transform: translateY(-2px); filter: brightness(1.14); }
.table-game-footnote { font-size: 10px; }
@media(max-width:520px) {
  .table-games-panel { max-height: 94vh; }
  .table-game-result { min-height: 230px; margin-top: 12px; padding-inline: 12px; }
  .table-game-result > b { font-size: 20px; }
  .table-game-board.is-checkers { grid-template-columns: repeat(8,minmax(0,10.2vw)); }
}