/* ===== Pixel Tama — retro virtual-pet device ===== */
:root{
  --shell:#f4c20f;        /* ตัวเครื่องเหลือง */
  --shell-2:#e0a800;
  --shell-edge:#9c7400;
  --lcd:#9bbc0f;          /* เขียว LCD แบบ Game Boy */
  --lcd-dark:#0f380f;
  --btn:#1b3a8c;
  --btn-2:#16306f;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:radial-gradient(circle at 50% 20%,#2a2f4a,#11131f 70%);
  display:flex;align-items:center;justify-content:center;
  min-height:100dvh;padding:16px;
  overscroll-behavior:none;touch-action:manipulation;
}

/* ---- ตัวเครื่อง (egg shell) ---- */
.device{
  width:min(380px,94vw);
  user-select:none;-webkit-user-select:none;touch-action:manipulation;
  background:linear-gradient(160deg,var(--shell),var(--shell-2) 70%,var(--shell-edge));
  border-radius:46% 46% 44% 44% / 30% 30% 36% 36%;
  padding:26px 24px 30px;
  box-shadow:
    inset 0 4px 10px rgba(255,255,255,.5),
    inset 0 -10px 24px rgba(0,0,0,.28),
    0 22px 50px rgba(0,0,0,.55);
  position:relative;
}
.brand{
  text-align:center;font-weight:800;letter-spacing:3px;
  color:#7a5c00;font-size:13px;margin-bottom:12px;
  text-shadow:0 1px 0 rgba(255,255,255,.45);
}
.mute{
  position:absolute;top:16px;right:18px;z-index:5;
  width:42px;height:42px;border:none;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.55);font-size:18px;line-height:1;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.15),0 2px 0 rgba(0,0,0,.1);
  touch-action:manipulation;
}
.mute:active{transform:translateY(1px)}
.reset{
  position:absolute;top:16px;left:18px;z-index:5;
  width:42px;height:42px;border:none;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.55);font-size:18px;line-height:1;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.15),0 2px 0 rgba(0,0,0,.1);
  touch-action:manipulation;
}
.reset:active{transform:translateY(1px)}

/* ---- กรอบจอ ---- */
.screen-bezel{
  position:relative;
  background:#101319;border-radius:18px;
  padding:14px;margin:0 auto 18px;width:88%;
  box-shadow:inset 0 3px 8px rgba(0,0,0,.7),0 2px 0 rgba(255,255,255,.25);
}

/* ---- ลูกโป่ง emoji บอกสถานะ (เหนือจอ) ---- */
.need-bubble{
  position:absolute;top:8px;left:50%;transform:translateX(-50%);
  z-index:6;width:46px;height:46px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.92);font-size:26px;line-height:1;
  box-shadow:0 2px 8px rgba(0,0,0,.35),inset 0 0 0 2px rgba(0,0,0,.08);
  pointer-events:none;
}
.need-bubble[hidden]{display:none}
.need-bubble.urgent{animation:needpulse .7s infinite}
@keyframes needpulse{
  0%,100%{transform:translateX(-50%) scale(1)}
  50%{transform:translateX(-50%) scale(1.18)}
}
#screen{
  display:block;width:100%;height:auto;
  image-rendering:pixelated;image-rendering:crisp-edges;
  background:var(--lcd);border-radius:6px;
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.25);
}

/* ---- แผงสถานะภาษาไทย ---- */
.status{
  background:rgba(255,255,255,.78);
  border-radius:14px;padding:10px 12px;margin:0 auto 16px;width:92%;
  display:grid;grid-template-columns:1fr 1fr;gap:5px 14px;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.12),0 2px 0 rgba(255,255,255,.4);
  font-size:13px;color:#3a2e10;
}
.srow{display:flex;align-items:center;justify-content:space-between;gap:6px;
  border-bottom:1px dashed rgba(122,92,0,.22);padding-bottom:3px;}
.srow .slabel{color:#7a5c00;font-weight:600;font-size:12px;white-space:nowrap}
.srow b{font-weight:800}
.srow.mood{grid-column:1 / -1;border-bottom:none;padding-top:2px}
.srow.mood b{color:#1b3a8c}
.hearts{letter-spacing:1px;color:#e0524d;font-size:14px}

/* ---- ปุ่ม action ---- */
.pad{
  display:grid;grid-template-columns:repeat(4,1fr);gap:10px;
}
.key{
  border:none;cursor:pointer;
  background:linear-gradient(180deg,var(--btn),var(--btn-2));
  color:#fff;border-radius:14px;padding:9px 4px 7px;
  font-size:20px;line-height:1;
  display:flex;flex-direction:column;align-items:center;gap:3px;
  box-shadow:0 4px 0 #0d2350,inset 0 1px 0 rgba(255,255,255,.3);
  transition:transform .05s, box-shadow .05s;
  user-select:none;touch-action:manipulation;min-height:48px;
}
.key span{font-size:9px;font-weight:700;opacity:.92;letter-spacing:.3px}
.key:active{transform:translateY(3px);box-shadow:0 1px 0 #0d2350}
.key.flash{animation:keyflash .3s ease-out}
@keyframes keyflash{
  0%{filter:brightness(2.2) saturate(1.4)}
  35%{filter:brightness(1.5)}
  100%{filter:brightness(1)}
}

/* อิโมจิลอยขึ้นเหนือจอเวลากดปุ่ม */
.float-fx{
  position:absolute;left:50%;top:56%;
  transform:translate(-50%,-50%);
  font-size:38px;line-height:1;pointer-events:none;z-index:7;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.5));
  animation:floatUp 5s ease-out forwards;   /* เด้งขึ้นเร็ว แล้วค้างบนจอ ~5 วิ ค่อยจาง (ไม่ต้องรีบกด) */
}
@keyframes floatUp{
  0%{opacity:0;transform:translate(-50%,-10%) scale(.5)}
  6%{opacity:1;transform:translate(-50%,-62%) scale(1.2)}
  12%{transform:translate(-50%,-72%) scale(1)}
  82%{opacity:1;transform:translate(-50%,-80%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-92%) scale(.95)}
}

.hint{
  text-align:center;color:#7a5c00;font-size:10.5px;margin-top:14px;
  line-height:1.5;font-weight:600;
}

/* ปุ่มเดาทิศตอนเล่นมินิเกม (โผล่มาแทน) */
.key.guess{background:linear-gradient(180deg,#e0524d,#b8312c);box-shadow:0 4px 0 #7d1f1b}

/* ---- หน้าจอเลือกตัว/เลือกสี ---- */
.overlay{
  position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;
  background:rgba(20,16,5,.55);padding:22px;
  border-radius:46% 46% 44% 44% / 30% 30% 36% 36%;
}
.overlay[hidden]{display:none}
.ov-card{
  background:#fff;border-radius:24px;padding:20px 16px;width:100%;text-align:center;
  box-shadow:0 12px 34px rgba(0,0,0,.45);animation:pop .25s ease;
}
@keyframes pop{from{transform:scale(.85);opacity:0}to{transform:scale(1);opacity:1}}
.ov-title{font-size:19px;font-weight:800;color:#1b3a8c;margin-bottom:16px}
.egg-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px 10px}
.egg-pick{
  border:none;background:transparent;cursor:pointer;border-radius:16px;
  display:flex;flex-direction:column;align-items:center;gap:7px;padding:8px 4px;
  touch-action:manipulation;transition:transform .08s;
}
.egg-pick:hover{background:rgba(0,0,0,.04)}
.egg-pick:active{transform:scale(.9)}
.egg-shape{
  width:48px;height:58px;
  border-radius:50% 50% 50% 50% / 60% 60% 42% 42%;
  background:var(--ec);border:3px solid var(--eo);
  box-shadow:inset -5px -7px 0 rgba(0,0,0,.07),0 3px 6px rgba(0,0,0,.15);
  display:flex;align-items:center;justify-content:center;
}
.egg-emoji{font-size:27px;line-height:1;filter:drop-shadow(0 1px 1px rgba(0,0,0,.25))}
.egg-name{font-size:12px;font-weight:700;color:#5a4a20}
.ov-hint{font-size:12px;color:#8a7a50;margin-top:12px;font-weight:600}

/* ---- chooser ตัวละคร 50+ ---- */
.ov-card-wide{max-width:340px}
.char-tabs{display:flex;gap:6px;justify-content:center;margin-bottom:10px;flex-wrap:wrap}
.char-tab{
  border:none;cursor:pointer;border-radius:999px;padding:6px 12px;font-size:12px;font-weight:700;
  background:rgba(27,58,140,.1);color:#1b3a8c;touch-action:manipulation;
}
.char-tab.on{background:#1b3a8c;color:#fff}
.char-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:8px;
  max-height:230px;overflow-y:auto;padding:4px 2px;-webkit-overflow-scrolling:touch;
}
.char-pick{
  border:none;cursor:pointer;background:rgba(0,0,0,.03);border-radius:12px;
  display:flex;flex-direction:column;align-items:center;gap:2px;padding:7px 2px;
  touch-action:manipulation;transition:transform .08s,background .12s;
}
.char-pick:hover{background:rgba(27,58,140,.1)}
.char-pick:active{transform:scale(.9)}
.char-emoji{font-size:26px;line-height:1}
.char-name{font-size:10px;font-weight:700;color:#5a4a20;text-align:center;line-height:1.1}
.rand-btn{
  margin-top:12px;border:none;cursor:pointer;width:100%;
  background:linear-gradient(180deg,#e0a800,#c78f00);color:#fff;font-size:15px;font-weight:800;
  padding:11px;border-radius:14px;box-shadow:0 4px 0 #8a6200;touch-action:manipulation;min-height:46px;
}
.rand-btn:active{transform:translateY(3px);box-shadow:0 1px 0 #8a6200}
/* เลือกสี */
.color-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;padding:8px 0 4px}
.color-swatch{
  width:40px;height:40px;border-radius:50%;cursor:pointer;border:3px solid;
  box-shadow:inset -3px -4px 0 rgba(0,0,0,.12),0 2px 4px rgba(0,0,0,.18);
  touch-action:manipulation;transition:transform .08s;
}
.color-swatch:active{transform:scale(.88)}
.color-back{
  border:none;cursor:pointer;background:rgba(0,0,0,.06);color:#5a4a20;font-weight:700;font-size:12px;
  border-radius:999px;padding:8px 14px;width:100%;margin-bottom:4px;touch-action:manipulation;
}

/* ---- เหรียญ HUD ---- */
.coin-hud{
  position:absolute;top:50px;left:50%;transform:translateX(-50%);z-index:5;
  background:rgba(255,255,255,.7);border-radius:999px;padding:2px 12px;
  font-size:13px;font-weight:800;color:#7a5c00;box-shadow:0 2px 0 rgba(0,0,0,.08);
}

/* ---- ปุ่มเสริม (ร้าน/Dex) ---- */
.extra-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.extra-btn{
  border:none;cursor:pointer;background:linear-gradient(180deg,#6a4fb5,#553f93);color:#fff;
  font-size:14px;font-weight:800;padding:10px;border-radius:14px;box-shadow:0 4px 0 #3c2c69;
  touch-action:manipulation;min-height:46px;
}
.extra-btn:active{transform:translateY(3px);box-shadow:0 1px 0 #3c2c69}

/* ---- ร้าน/กล่องสุ่ม ---- */
.shop-coins{font-size:20px;font-weight:900;color:#7a5c00;margin:4px 0}
.shop-result{font-size:14px;font-weight:700;color:#1b3a8c;min-height:42px;display:flex;align-items:center;justify-content:center;text-align:center;line-height:1.4;margin-bottom:8px}
.shop-result b{color:#9c3a6b}

/* ---- สมุดสะสม (Dex) ---- */
.dex-sub{font-size:12px;font-weight:800;color:#5a4a20;text-align:left;margin:10px 2px 4px}
.dex-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;max-height:150px;overflow-y:auto;padding:2px;-webkit-overflow-scrolling:touch}
.dex-cell{
  background:rgba(0,0,0,.04);border:none;border-radius:10px;padding:5px 2px;cursor:default;
  display:flex;flex-direction:column;align-items:center;gap:1px;touch-action:manipulation;
}
.dex-cell.cos{cursor:pointer}
.dex-cell.locked{opacity:.4}
.dex-cell.on{background:rgba(27,58,140,.18);box-shadow:inset 0 0 0 2px #1b3a8c}
.dex-e{font-size:22px;line-height:1}
.dex-star{font-size:8px;line-height:1;color:#e0a800}

/* ---- ช่องตั้งชื่อ ---- */
.name-wrap{width:100%;margin:2px 0 6px}
.name-input{
  width:100%;box-sizing:border-box;border:2px solid #c9b88a;border-radius:12px;
  padding:10px 12px;font-size:15px;font-weight:700;color:#3a2e10;text-align:center;
  background:#fffdf6;outline:none;
}
.name-input:focus{border-color:#1b3a8c}

/* ---- ปุ่มเริ่มต่อสู้ ---- */
.battle-start{
  display:block;width:92%;margin:12px auto 0;border:none;cursor:pointer;
  background:linear-gradient(180deg,#e0524d,#b8312c);color:#fff;font-size:15px;font-weight:800;
  padding:11px;border-radius:14px;box-shadow:0 4px 0 #7d1f1b,inset 0 1px 0 rgba(255,255,255,.25);
  touch-action:manipulation;min-height:46px;letter-spacing:.5px;
}
.battle-start:active{transform:translateY(3px);box-shadow:0 1px 0 #7d1f1b}

/* ---- หน้าต่อสู้ ---- */
.battle-row{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin:6px 0 12px}
.fighter{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px}
.f-emoji{font-size:46px;line-height:1;animation:bob 1.2s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.f-name{font-size:12px;font-weight:800;color:#3a2e10}
.vs-tag{font-size:18px;font-weight:900;color:#e0524d;align-self:center;padding-top:18px}
.hpbar{width:100%;height:12px;background:#e3e3e3;border-radius:8px;overflow:hidden;box-shadow:inset 0 1px 2px rgba(0,0,0,.2)}
.hpfill{height:100%;width:100%;background:linear-gradient(90deg,#4cc078,#7fe0a0);transition:width .25s}
.hpfill.op{background:linear-gradient(90deg,#e0584a,#f68a7e)}
.battle-log{font-size:13px;font-weight:700;color:#1b3a8c;min-height:34px;display:flex;align-items:center;justify-content:center;text-align:center;line-height:1.4;margin-bottom:10px}
.battle-moves{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px}
.move-btn{
  border:none;cursor:pointer;background:linear-gradient(180deg,#1b3a8c,#16306f);color:#fff;
  border-radius:14px;padding:10px 4px 8px;font-size:22px;line-height:1;
  display:flex;flex-direction:column;align-items:center;gap:3px;
  box-shadow:0 4px 0 #0d2350,inset 0 1px 0 rgba(255,255,255,.3);touch-action:manipulation;min-height:54px;
}
.move-btn span{font-size:10px;font-weight:700}
.move-btn:active{transform:translateY(3px);box-shadow:0 1px 0 #0d2350}
.battle-moves[hidden]{display:none}

/* ---- ปุ่มยกเลิก (confirm) ---- */
.cancel-btn{
  border:none;cursor:pointer;background:linear-gradient(180deg,#9aa0a6,#777c82);
  color:#fff;font-size:16px;font-weight:800;padding:13px 18px;border-radius:14px;
  box-shadow:0 4px 0 #4d5156;touch-action:manipulation;min-height:48px;
}
.cancel-btn:active{transform:translateY(3px);box-shadow:0 1px 0 #4d5156}

/* ---- หน้าจบรอบ ---- */
.end-emoji{font-size:54px;line-height:1;margin-bottom:4px;animation:pop .3s ease}
.end-body{font-size:14px;color:#3a2e10;line-height:1.7;margin:8px 0 18px;font-weight:600}
.end-body b{color:#1b3a8c}
.end-stars{font-size:24px;margin-bottom:2px}
.end-reason{color:#8a7a50;font-size:12px}
.restart-btn{
  border:none;cursor:pointer;
  background:linear-gradient(180deg,var(--btn),var(--btn-2));
  color:#fff;font-size:16px;font-weight:800;padding:13px 24px;border-radius:14px;
  box-shadow:0 4px 0 #0d2350,inset 0 1px 0 rgba(255,255,255,.3);
  touch-action:manipulation;min-height:48px;
}
.restart-btn:active{transform:translateY(3px);box-shadow:0 1px 0 #0d2350}

/* ---- ปุ่มหน้าจบ (เริ่มใหม่ + อวดผล) ---- */
.end-actions{display:flex;gap:10px;justify-content:center;margin-bottom:12px}
.end-actions .restart-btn{padding:13px 18px}
.share-btn{
  border:none;cursor:pointer;
  background:linear-gradient(180deg,#1f9d55,#16823f);
  color:#fff;font-size:16px;font-weight:800;padding:13px 18px;border-radius:14px;
  box-shadow:0 4px 0 #0c5a2a,inset 0 1px 0 rgba(255,255,255,.3);
  touch-action:manipulation;min-height:48px;
}
.share-btn:active{transform:translateY(3px);box-shadow:0 1px 0 #0c5a2a}
.cta-link{
  display:block;text-decoration:none;cursor:pointer;
  background:rgba(27,58,140,.08);border:1.5px dashed #1b3a8c;
  color:#1b3a8c;font-size:12.5px;font-weight:700;line-height:1.4;
  padding:10px 12px;border-radius:12px;transition:background .15s;
}
.cta-link:hover{background:rgba(27,58,140,.15)}
.cta-link:active{transform:translateY(1px)}

/* ---- หน้าวิธีเล่น ---- */
.howto-list{text-align:left;font-size:13px;line-height:1.5;color:#3a2e10;margin:6px 2px 16px}
.howto-list div{padding:6px 0;border-bottom:1px dashed rgba(122,92,0,.2)}
.howto-list b{color:#1b3a8c}