/* core/ui.css — style ของ shell กลาง (เมนู, topbar, modal, sound panel) */
*{
  box-sizing:border-box;
  -webkit-tap-highlight-color:transparent;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
}
html,body{
  margin:0; padding:0; height:100%;
  background:#0d0d0d;
  font-family:'Noto Sans Thai', sans-serif;
  overflow:hidden;
  touch-action:manipulation;
}
#app{
  width:100%; height:100vh;
  max-width:480px;
  aspect-ratio:9/16;
  margin:0 auto;
  background:#0d0d0d;
  position:relative;
  display:flex; flex-direction:column;
}

.screen{ display:none; flex:1; flex-direction:column; min-height:0; }
.screen.active{ display:flex; }

/* ---------- เมนูหลัก ---------- */
#screen-menu{
  align-items:stretch;
  padding:14px 14px 0;
  background:linear-gradient(180deg,#1a1410,#0d0d0d);
  overflow-y:auto;
}
.menu-topbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:8px; padding:4px 0 10px;
}
.icon-btn{
  width:38px; height:38px; flex-shrink:0;
  background:#23282d; color:#e0e0e0; border:1px solid rgba(255,255,255,0.1);
  border-radius:10px; font-size:16px; cursor:pointer;
}
.icon-btn:active{ transform:scale(0.92); }
.menu-title-wrap{ flex:1; text-align:center; }
.menu-title{
  color:#ffd84a; font-size:19px; font-weight:700; letter-spacing:1.5px;
  font-family:Georgia, 'Times New Roman', serif;
  -webkit-text-stroke:1px #fff;
  text-stroke:1px #fff;
  text-shadow:0 1px 2px rgba(0,0,0,0.4);
}
.menu-subtitle{
  color:#ffd84a; font-size:11px; margin-top:1px;
  -webkit-text-stroke:0.5px #fff;
  text-stroke:0.5px #fff;
}

.game-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  padding-bottom:12px;
  margin:auto 0;
}
.game-card{
  background:linear-gradient(135deg,#3a4148,#23282d);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:14px;
  overflow:hidden;
  display:flex; flex-direction:column;
}
.game-card.disabled{ filter:grayscale(0.6); opacity:0.75; }
.game-card .cover{
  position:relative;
  width:100%; aspect-ratio:1/1;
  display:flex; align-items:flex-start; justify-content:center;
  overflow:hidden;
}
.game-card .cover-fallback{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size:42px; color:rgba(255,255,255,0.5);
}
.game-card .card-title{ display:none; }
.game-card .soon-badge{
  position:absolute; top:6px; right:6px; z-index:3;
  background:#8a3a2a; color:#fff; font-size:9px; font-weight:700;
  padding:2px 7px; border-radius:6px;
}
.game-card .card-body{
  padding:8px 10px 10px;
  display:flex; flex-direction:column; gap:6px;
  align-items:center;
}
.game-card .best{ color:#9bd6b4; font-size:10px; }
.game-card .diff-select{
  width:100%;
  background:#1a3a42; color:#7fd4e8; border:none; border-radius:14px;
  padding:5px 8px; font-size:11px; font-family:inherit; text-align:center;
}
.game-card .size-select{
  width:100%;
  background:#3a2a1a; color:#e0b15a; border:none; border-radius:14px;
  padding:5px 8px; font-size:11px; font-family:inherit; text-align:center;
}
.game-card .play-btn{
  width:100%;
  background:linear-gradient(180deg,#f0903a,#d9601a);
  color:#fff; border:none; border-radius:16px;
  padding:7px 0; font-family:inherit; font-size:14px; font-weight:700;
  letter-spacing:1px;
  box-shadow:0 3px 8px rgba(0,0,0,0.3);
}
.game-card .play-btn:active{ transform:scale(0.95); }
.game-card.disabled .play-btn,
.game-card.disabled .diff-select{ opacity:0.5; pointer-events:none; }

.ad-placeholder{
  background:#e8453a; color:#fff; font-size:11px; font-weight:700;
  text-align:center; padding:8px; border-radius:6px;
  margin:0 0 14px;
}

/* ---------- หน้าเล่นเกม (topbar กลาง) ---------- */
#screen-game{ min-height:0; }
.app-topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px 4px;
  background:#161616;
  flex-shrink:0;
}
.app-topbar button{
  background:#262626; color:#eee; border:none; border-radius:8px;
  padding:6px 10px; font-size:13px; font-family:inherit; cursor:pointer;
  flex-shrink:0;
}
.app-topbar button:active{ transform:scale(0.94); }
.app-topbar .game-name{
  color:#ffd84a; font-size:18px; font-weight:700;
  font-family:Georgia, 'Times New Roman', serif;
  -webkit-text-stroke:0.6px #fff;
  flex:1; text-align:center; padding:0 6px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.settings-col{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  flex-shrink:0;
}
.diff-label{
  color:#ffd84a; font-size:9px; font-weight:700; letter-spacing:0.5px;
}
.topscore-row{
  text-align:center; color:#e0b15a; font-size:13px; font-weight:600;
  padding:4px 0 6px; background:#161616; cursor:pointer;
}
.topscore-row span{ color:#fff; font-weight:700; }
#game-root{ flex:1; min-height:0; display:flex; flex-direction:column; }

/* ---------- Modal Top Score ---------- */
.modal{
  position:absolute; inset:0;
  background:rgba(0,0,0,0.78);
  display:none;
  align-items:center; justify-content:center;
  z-index:50;
  padding:24px;
}
.modal.show{ display:flex; }
.modal-box{
  background:#1c1c1c;
  border:1px solid rgba(255,255,255,0.08);
  border-radius:14px;
  padding:18px;
  width:100%; max-width:320px;
  max-height:80%;
  overflow-y:auto;
}
.modal-box h2{
  color:#e0b15a; font-size:17px; margin:0 0 12px; text-align:center;
}
.score-row{
  display:flex; align-items:center; gap:8px;
  padding:7px 4px;
  border-bottom:1px solid rgba(255,255,255,0.06);
  color:#ddd; font-size:13px;
}
.score-row .rank{ width:22px; color:#e0b15a; font-weight:700; }
.score-row .name{ flex:1; }
.score-row .meta{ color:#888; font-size:10px; }
.score-row .score{ font-weight:700; color:#9bd6b4; }
.score-empty{ color:#777; text-align:center; font-size:12px; padding:20px 0; }
.modal-close{
  display:block; margin:14px auto 0;
  background:#8a3a2a; color:#fff; border:none; border-radius:8px;
  padding:8px 24px; font-family:inherit; font-size:13px; font-weight:700;
}
.pause-btn{
  display:block; width:100%;
  background:#2a2a2a; color:#eee; border:none; border-radius:10px;
  padding:11px 0; margin-bottom:8px;
  font-family:inherit; font-size:14px; font-weight:700;
}
.pause-btn:active{ transform:scale(0.97); }
.pause-btn.pause-exit{ background:#8a3a2a; color:#fff; }

/* ---------- AI Persona Row (AI ซ้าย / บับเบิลคำพูดกลาง / ผู้เล่นขวา) ---------- */
.persona-row{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:8px;
  padding:18px 12px 10px;
  margin-top:6px;
}
.persona-side{
  display:flex; flex-direction:column; align-items:center; gap:3px;
  flex-shrink:0; width:56px;
}
.ai-avatar{
  width:46px; height:46px; border-radius:50%;
  background:linear-gradient(160deg,#7a5a90,#4a3560);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:18px; font-weight:700;
  background-size:cover; background-position:center;
  box-shadow:0 0 0 2px rgba(255,255,255,0.3);
}
.ai-name{
  font-size:10px; color:#cfc0d8; font-weight:700;
  text-align:center; max-width:60px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.bubble-center{
  flex:1;
  min-width:0;
  display:flex; align-items:center; justify-content:flex-start;
  min-height:46px;
  padding-top:2px;
}
.ai-bubble{
  background:rgba(255,255,255,0.96); color:#222;
  font-size:12.5px; font-weight:600; line-height:1.4;
  padding:9px 14px; border-radius:14px;
  text-align:left;
  max-width:62%;
  margin-left:6px;
  box-shadow:0 4px 12px rgba(0,0,0,0.35);
  opacity:0; transform:scale(0.9);
  transform-origin:left center;
  transition:opacity 0.2s, transform 0.2s;
}
.ai-bubble.show{ opacity:1; transform:scale(1); }
.ai-bubble:empty{ display:none; }

/* ---------- Sound Panel (ใช้ร่วมทุกเกม ผ่าน SoundCore.renderControls) ---------- */
.sound-panel{ width:100%; display:flex; flex-direction:column; gap:8px; align-items:center; }
.sound-panel .sc-row{
  width:85%; display:flex; align-items:center; gap:8px;
  color:#cfd8de; font-size:11px;
}
.sound-panel .sc-row span{ width:42px; flex-shrink:0; }
.sound-panel .sc-row input[type="range"]{ flex:1; }
.sound-panel .sc-row button{
  background:#33414a; color:#eee; border:none; border-radius:6px;
  width:30px; height:26px; flex-shrink:0;
  font-size:13px; font-family:inherit; padding:0;
}