/* ธีมโต๊ะพูลของ Poolto สำหรับหน้าจอทั้งหมดของเกมเทิร์นเบส:
   HUD ป้ายนาวี ปุ่มทรงลูกพูล แผ่นข้อมูลครีม หัวแผ่นสีผ้าสักหลาด */
body.turn {
  --felt: #1d7f74; --felt-d: #135c55; --navy: #14262e; --cream: #fff8ea; --sun: #ffc93c; --coral: #ff6b57; --mint: #7ff2d0;
}
body.turn { background: var(--felt-d); }

/* ---------- HUD บนแผนที่ ---------- */
.trainer { background: var(--navy); color: var(--cream); border-radius: 20px; padding: 6px 14px 6px 6px; box-shadow: 0 8px 20px rgba(0, 0, 0, .25); }
.trainer .lv { background: radial-gradient(circle at 35% 30%, #fff 0 10%, var(--sun) 11% 100%); color: var(--navy); border: 3px solid #fff; width: 48px; height: 48px; border-radius: 50%; }
.trainer .lv small { color: var(--navy); }
.trainer .lv b { color: var(--navy); }
.trainer .xpbar { background: #0b1820; }
.trainer .xpbar i { background: linear-gradient(90deg, var(--mint), #2fd1b0); }
#zoneName { color: #bfe9df; font-size: 12px; }
.counts { background: var(--navy); color: var(--cream); box-shadow: 0 8px 20px rgba(0, 0, 0, .25); }
.counts .orb { box-shadow: 0 0 0 2px var(--navy); }
.turn-nav { background: var(--navy); }
.turn-nav button { color: #bfe9df; }
.turn-nav button span { filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .25)); }
.turn-nav .nav-center span { background: radial-gradient(circle at 35% 30%, #fff 0 10%, var(--sun) 11% 100%); color: var(--navy); border-color: var(--navy); }
.turn-nav .nav-center { color: var(--sun); }
#toast { background: var(--navy); color: var(--cream); border: 2px solid var(--sun); border-radius: 16px; }
.zone-note { background: var(--coral); border-radius: 16px; }

/* ---------- แผ่นข้อมูล (ทีม กระเป๋า สมุด) ---------- */
.sheet { background: var(--cream); color: var(--navy); }
.sheet-head { background: linear-gradient(180deg, var(--felt), var(--felt-d)); color: var(--cream); border-radius: 20px;
  padding: 12px 14px; margin-bottom: 14px; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .18); }
.sheet-head h2 { color: var(--cream); font-size: 22px; }
.sheet-head .muted { color: #bfe9df; }
.sheet-head .x { background: var(--cream); color: var(--navy); border: 3px solid var(--navy); }
.muted { color: #4d6670; }

/* การ์ดมอนในทีม: ป้ายสีครีมมีขอบนาวีและลูกพูลประจำระดับ */
.tm-row { background: #fff; border: 3px solid var(--navy); border-radius: 20px; box-shadow: 0 6px 0 var(--navy); }
.tm-row.in { outline: 0; border-color: var(--sun); box-shadow: 0 6px 0 var(--navy), 0 0 0 4px var(--sun); }
.tm-main .lv { background: var(--navy); color: var(--sun); border-radius: 99px; padding: 0 8px; }
.tm-main small { color: #4d6670; }
.tm-main .bar { background: #e5ece9; border: 1px solid var(--navy); }
.tm-main .bar i { background: linear-gradient(90deg, var(--mint), #2fd1b0); }
.tm-main .bar.xp i { background: linear-gradient(90deg, var(--sun), #ffb347); }
.tm-btn { background: var(--felt); border: 3px solid var(--navy); box-shadow: 0 4px 0 var(--navy); border-radius: 14px; }
.tm-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--navy); }

/* กระเป๋า */
.bag-list li { background: #fff; border: 3px solid var(--navy); border-radius: 18px; box-shadow: 0 5px 0 var(--navy); }
.bag-list span { color: var(--felt-d); }

/* สมุด: การ์ดมอนแบบป้ายลูกพูล */
.dcard { background: #fff; border: 3px solid var(--navy); border-radius: 22px; box-shadow: 0 6px 0 var(--navy); }
.dcard.locked { background: #d9e4df; }
.dcard.locked img { filter: grayscale(1) brightness(.2) contrast(1.1); opacity: .35; }
.dcard small { color: #4d6670; }
.badge { border: 2px solid var(--navy); box-shadow: 0 3px 0 var(--navy); color: var(--cream); }
.badge.got { box-shadow: 0 0 0 3px var(--sun), 0 3px 0 var(--navy); }
.ach-list li { border: 3px solid var(--navy); border-radius: 18px; box-shadow: 0 4px 0 var(--navy); }
.ach-list li.got { background: #fff6d6; }

/* ผู้เริ่มเล่นและผลลัพธ์ */
.starter-card { border: 3px solid var(--navy); box-shadow: 0 6px 0 var(--navy); border-radius: 22px; background: #fff; }
.starter-card:active { transform: translateY(3px); box-shadow: 0 3px 0 var(--navy); }
#splash { background: radial-gradient(ellipse at 50% 30%, #2fa397 0%, #1d7f74 50%, #0f4f48 100%); }
#splash h1 { color: var(--cream); text-shadow: 0 4px 0 var(--navy); }
#splash h1 span { color: var(--sun); }
#splash p { color: #d7f5ee; }
#splash .cta { background: var(--sun); color: var(--navy); border: 3px solid var(--navy); box-shadow: 0 6px 0 var(--navy); }
.result { background: var(--cream); border: 4px solid var(--navy); box-shadow: 0 10px 0 var(--navy); }
.result li { background: #fff; border: 2px solid var(--navy); }
.result li b { color: var(--felt-d); }
.result .cta { background: var(--felt); border: 3px solid var(--navy); box-shadow: 0 5px 0 var(--navy); color: var(--cream); }

/* ปุ่มทั่วไปของหน้าจอแผนที่และแผ่นข้อมูล */
.round { background: var(--cream); border: 3px solid var(--navy); box-shadow: 0 4px 0 var(--navy); }
.nearby .nb { box-shadow: 0 4px 0 var(--navy); }
.nearby .nb.in { box-shadow: 0 0 0 3px var(--sun), 0 4px 0 var(--navy); }