/* KOTOMON · ธีม ファミコン (Famicom / 8-bit)
   สีจากพาเลตต์ 8 บิต · มุมเหลี่ยมทั้งหมด · กรอบดำหนา + เงาเป็นขั้น · หน้าต่างข้อความแบบเกม RPG ยุคเก่า
   โหลดหลัง <style> หลัก จึงทับเฉพาะหน้าตา ไม่แตะการทำงานของเกม */
:root{
  --ink:#000;--paper:#fcf0d4;--cream:#fce0a8;--red:#d82800;--yellow:#f8b800;--green:#00a800;--blue:#0058f8;--pink:#f878f8;--sky:#3cbcfc;
  --fc-red:#8c1010;--fc-gold:#d8a838;--fc-cream:#e8dcc4;--fc-white:#fcfcfc;--fc-gray:#7c7c7c;--fc-navy:#0000a8;
  --px:4px; /* ขนาด 1 พิกเซลของเกม */
}
/* ---------- ตัวเครื่อง: แดง-ครีม-ทอง ---------- */
html,body{background:var(--fc-red);background-image:repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0 2px,transparent 2px 6px);-webkit-font-smoothing:none;font-smooth:never}
#app{background:var(--paper);box-shadow:0 0 0 4px #000,0 0 0 10px var(--fc-cream),0 0 0 14px #000}
@media (max-width:460px){#app{box-shadow:none}}

/* ---------- ไม่มีมุมโค้ง (ยกเว้นวงกลมที่เป็นภาพ: เงา พรม ออร่า หน้าตัวละคร) ---------- */
#app *:not(.pface):not(.pet-shadow):not(.rug):not(.taura),#app *::before,#app *::after{border-radius:0!important}

/* ---------- ปุ่ม: เหมือนปุ่มบนจอย ขอบดำ + ไฮไลต์/เงาเป็นขั้น ---------- */
.btn{border:3px solid #000;background:var(--yellow);color:#000;box-shadow:inset -3px -3px 0 rgba(0,0,0,.28),inset 3px 3px 0 rgba(255,255,255,.55),0 4px 0 #000;transition:none;letter-spacing:.5px}
.btn:active{transform:translateY(4px);box-shadow:inset 3px 3px 0 rgba(0,0,0,.28),0 0 0 #000}
.btn.red{background:var(--red);color:var(--fc-white);text-shadow:2px 2px 0 #000}
.btn.green{background:var(--green);color:var(--fc-white);text-shadow:2px 2px 0 #000}
.btn.white,.fbtn,.act,.tile,.opt,.lvbtn,.btn.speak{background:var(--fc-white);color:#000}
.btn.ghost{box-shadow:none;border-color:transparent;background:transparent}
.btn:focus-visible{outline:3px dashed var(--blue);outline-offset:3px}
.btn:disabled{opacity:.5;filter:grayscale(.6)}
/* เคอร์เซอร์ ▶ แบบเมนูเกม เมื่อชี้ (เดสก์ท็อป) และเมื่อเลือกอยู่ */
@media (hover:hover){.tile:hover,.opt:not(:disabled):hover,.row-btn:hover,.lvbtn:hover,.fbtn:hover,.act:hover{background:var(--cream)}
  .tile:hover::before,.opt:not(:disabled):hover::before,.row-btn:hover::before{content:'▶';position:absolute;left:4px;top:50%;transform:translateY(-50%);font-size:12px;color:var(--red);animation:fcBlink .8s steps(1) infinite}}
.tile,.opt,.row-btn{position:relative}
.lvbtn.on,.egg-card.sel,.chip.on,.sheet .chip.on{background:var(--yellow);color:#000}
.opt.ok{background:var(--green);color:var(--fc-white);text-shadow:2px 2px 0 #000}
.opt.ng{background:var(--red);color:var(--fc-white);text-shadow:2px 2px 0 #000}
@keyframes fcBlink{50%{opacity:0}}

/* ---------- แถบบน/ล่าง: ดำสนิท ตัวอักษรขาว กล่องขอบขาว ---------- */
.hud,.controls,.qtop{background:#000;border-color:#000}
.hud{border-bottom:4px solid var(--fc-red)}
.controls{border-top:4px solid var(--fc-red)}
.chip{background:#000;color:var(--fc-white);border:2px solid var(--fc-white)}
.chip.kp{background:var(--yellow);color:#000;border-color:var(--yellow);box-shadow:inset -2px -2px 0 rgba(0,0,0,.3)}
.iconbtn{background:#000;border:2px solid var(--fc-white);color:var(--fc-white)}
.iconbtn:active{background:var(--fc-white);color:#000}
.badge{background:var(--red);border:2px solid var(--fc-white)}
.badge.n5{background:var(--blue)}
.moodline{background:#000;border:2px solid var(--fc-white);border-left-width:6px}
.poolline{background:#000;border:2px solid var(--yellow);color:var(--yellow)}
.poolline b{color:var(--fc-white)}
.poolline.out{border-color:var(--fc-gray);color:var(--fc-gray)}
/* หลอดค่า: แบ่งเป็นบล็อก ๆ แบบเกม 8 บิต */
.qprog,.bar .tr{background:#000;border:2px solid var(--fc-white);height:14px}
.qprog div{background:repeating-linear-gradient(90deg,var(--yellow) 0 8px,#000 8px 10px)}
.bar .fl{background:repeating-linear-gradient(90deg,var(--green) 0 8px,#000 8px 10px)}
.fighter .hp{border:2px solid #000;background:#000}
.fighter .hp i{background:repeating-linear-gradient(90deg,#58d854 0 6px,#000 6px 8px)}

/* ---------- หน้าต่างข้อความ (ป๊อปอัป) แบบ RPG: กรอบดำ-ขาว-ดำ ---------- */
.modal{background:rgba(0,0,0,.6)}
.sheet{background:var(--paper);border:4px solid #000;border-bottom:0;box-shadow:inset 0 0 0 3px var(--fc-white),inset 0 0 0 6px #000;padding:20px 18px calc(20px + env(safe-area-inset-bottom));animation:fcUp .16s steps(4)}
@keyframes fcUp{from{transform:translateY(30%)}to{transform:translateY(0)}}
.sheet h2{display:flex;align-items:center;gap:6px;background:#000;color:var(--fc-white);margin:-6px -4px 14px;padding:8px 10px;font-size:20px;text-shadow:2px 2px 0 var(--fc-red)}
.note{background:var(--fc-white);border:3px solid #000;box-shadow:4px 4px 0 rgba(0,0,0,.25)}
.sheet .chip{background:var(--fc-cream);color:#000;border:2px solid #000}
#toast{background:#000;color:var(--fc-white);border:3px solid var(--fc-white);box-shadow:0 0 0 3px #000}
.bubble{border:3px solid #000;box-shadow:3px 3px 0 rgba(0,0,0,.25)}
.bubble::after{border-top-color:#000}

/* ---------- การ์ด / ช่อง / ตาราง ---------- */
.qcard,.egg-card,.charc,.tcard,.row-btn,.egg-info,.pitch,.logo-sub,.bankbox{border:3px solid #000;box-shadow:4px 4px 0 #000}
.qcard{box-shadow:6px 6px 0 #000}
.egg-info{border-style:solid;background:var(--fc-white)}
.charc.on{border-color:var(--red);box-shadow:4px 4px 0 var(--red)}
.qcat{background:var(--fc-navy);color:var(--fc-white);border:2px solid #000}
.zc{border:2px solid #000;background:var(--fc-cream)}
.zc.own{background:var(--fc-white);border-color:var(--red)}
.zc.seen{background:#d8d0c0}
.field input[type=text],.field input[type=tel],.field input[type=password],.field select{border:3px solid #000;box-shadow:inset 3px 3px 0 rgba(0,0,0,.12)}
.field input:focus{border-color:var(--blue);box-shadow:0 0 0 3px var(--sky)}
.stat-row{border-bottom:2px dashed #000}
.locks span{border:2px dashed #000}
.arena{border:3px solid #000;background:linear-gradient(var(--sky) 0 62%,#58d854 62% 70%,#00a800 70%)}
.hgrid{border:3px solid #000}

/* ---------- หน้าแรก: ฟ้า 8 บิต + ทุ่งหญ้า + พื้นอิฐ ---------- */
#scrTitle{background:
  linear-gradient(transparent calc(100% - 44px),#000 calc(100% - 44px),#000 calc(100% - 40px),transparent calc(100% - 40px)),
  repeating-linear-gradient(0deg,#000 0 2px,transparent 2px 20px) bottom/100% 40px no-repeat,
  repeating-linear-gradient(90deg,#c84c0c 0 30px,#000 30px 32px) bottom/100% 40px no-repeat,
  linear-gradient(var(--sky) 0 62%,#58d854 62% 64%,#00a800 64% 100%)}
.logo{text-shadow:4px 4px 0 #000,-2px -2px 0 #000,2px -2px 0 #000,-2px 2px 0 #000,0 8px 0 var(--red)}
.logo-kanji{border:3px solid #000;box-shadow:4px 4px 0 #000;background:var(--fc-white)}
.logo-mon{color:var(--yellow)}
.flags span{background:var(--fc-white);border:2px solid #000}
.pitch{background:var(--fc-white)}
#btnStart::before{content:'▶ ';animation:fcBlink 1s steps(1) infinite}
.credit{color:#fff;text-shadow:2px 2px 0 #000}

/* ---------- ห้อง: ลายไม้/พื้นเป็นช่องพิกเซล ---------- */
.floor{border-top:6px solid #000;background:#ac7c00;background-image:repeating-linear-gradient(90deg,transparent 0 30px,#000 30px 32px),repeating-linear-gradient(0deg,transparent 0 14px,rgba(0,0,0,.35) 14px 16px)}
.win{border:5px solid #000;box-shadow:inset 0 0 0 3px #ac7c00}
.shelf{background:#000}
.pface{border:3px solid #000}
.vs{color:var(--red);text-shadow:2px 2px 0 #000}

/* ---------- แถบเลื่อน ---------- */
#app ::-webkit-scrollbar{width:8px;height:8px}
#app ::-webkit-scrollbar-thumb{background:#000}
#app ::-webkit-scrollbar-track{background:var(--fc-cream)}
@media (prefers-reduced-motion:reduce){#btnStart::before,.tile:hover::before{animation:none}}