/* Shared visual system for both languages. Native bridges may supply exact insets. */
:root {
  --wine: #641b27;
  --table: #852635;
  --cream: #fff4da;
  --gold: #ffd36a;
  --muted: #e2b6b2;
  --line: #ffffff26;
  --pp-safe-top: var(--safe-area-inset-top, env(safe-area-inset-top, 0px));
  --pp-safe-bottom: var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
  --pp-safe-left: var(--safe-area-inset-left, env(safe-area-inset-left, 0px));
  --pp-safe-right: var(--safe-area-inset-right, env(safe-area-inset-right, 0px));
}
/* Older Android WebViews may report zero for env(). Keep room for the status bar. */
html.pp-native {
  --pp-safe-top: var(--safe-area-inset-top, max(32px, env(safe-area-inset-top, 0px)));
}
html { background: var(--wine); scroll-padding-top: calc(var(--pp-safe-top) + 80px); }
body {
  font-family: 'Trebuchet MS', 'Segoe UI', sans-serif;
  font-weight: 600;
  background: radial-gradient(ellipse at 12% 20%, #ab3543 0, transparent 60%), var(--wine);
  color: var(--cream);
  min-height: 100svh;
}
body::before {
  opacity: .22;
  background-image: radial-gradient(#ffd9b0 0.65px, transparent 0.65px);
  background-size: 7px 7px;
}
body.modal-open { overflow: hidden; }
button, a, input, summary { touch-action: manipulation; }
button, input { font: inherit; }
button:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 3px solid var(--cream); outline-offset: 5px;
}
.topbar {
  position: sticky; top: 0; z-index: 40;
  padding: calc(var(--pp-safe-top) + 10px) calc(var(--pp-safe-right) + 20px) 10px calc(var(--pp-safe-left) + 20px);
  background: var(--wine); border-bottom: 1px solid var(--line);
}
.topbar-inner { max-width: 1000px; margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.brand { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; }
.brand b { color: var(--gold); }
.brand-suit { font-size: 26px; color: var(--gold); margin-right: 4px; }
.langbtn {
  position: static; min-height: 44px; padding: 8px 13px; font-size: 12px;
  border: 1px solid var(--line); border-radius: 12px; background: #ffffff0a;
  box-shadow: none; letter-spacing: 0; color: var(--cream);
}
#app { max-width: 1060px; padding: 36px calc(var(--pp-safe-right) + 24px) calc(var(--pp-safe-bottom) + 36px) calc(var(--pp-safe-left) + 24px); }
#scr-setup { display: grid; grid-template-columns: 1fr 1.1fr; gap: 64px; align-items: start; }
.setup-intro { position: sticky; top: calc(var(--pp-safe-top) + 105px); text-align: left; padding: 8px 0 0; }
.hero-art { position: relative; width: 220px; height: 192px; margin: 10px 0 26px 46px; }
.hero-card {
  position: absolute; width: 110px; height: 154px; border-radius: 12px;
  background: var(--cream); color: #30262b; border: 1px solid #e4d3b3;
  box-shadow: 0 8px 0 #410d2038, 0 18px 28px #300c2230;
  display: flex; align-items: center; justify-content: center;
}
.hero-card span { position: absolute; top: 10px; left: 12px; font: bold 18px Georgia, serif; }
.hero-card b { font: 76px Georgia, serif; }
.card-left { left: 5px; top: 17px; transform: rotate(-17deg); }
.card-right { left: 87px; top: 24px; transform: rotate(13deg); color: #bd3145; }
.card-spark { position: absolute; right: -11px; top: -10px; color: var(--gold); font-size: 44px; }
.logo {
  font-family: Impact, 'Arial Black', sans-serif; font-weight: 900;
  font-size: clamp(70px, 8vw, 108px); line-height: .88; letter-spacing: -1px;
  color: var(--gold); text-shadow: 3px 4px 0 #421624;
  animation: none; margin: 0 0 23px; transform: rotate(-3deg);
}
.tag { margin: 0 0 22px; font-size: 19px; font-weight: 500; line-height: 1.5; text-shadow: none; }
.game-facts { display: flex; flex-wrap: wrap; gap: 8px; color: var(--cream); font-size: 12px; }
.game-facts span { border: 1px solid #ffffff36; border-radius: 7px; padding: 7px 9px; }
.setup-form {
  text-align: left; padding: 28px; border-radius: 24px; background: #511721;
  border: 1px solid #e7b9a333; box-shadow: 0 16px 48px #34091c24;
}
.sec-title { text-shadow: none; letter-spacing: 0; color: var(--cream); font-size: 18px; margin: 0 0 14px; }
.modes { gap: 10px; flex-wrap: nowrap; margin-bottom: 26px; }
.mode-card {
  flex: 1; min-width: 0; max-width: none; border: 1px solid #ffffff30; border-radius: 16px;
  background: #ffffff05; text-align: left; padding: 16px 13px; transition: border-color .15s, background .15s;
}
.mode-card .m-emoji { font-size: 28px; margin-bottom: 14px; }
.mode-card .m-name { font-size: 18px; letter-spacing: 0; color: var(--cream); margin: 0 0 7px; font-weight: 800; }
.mode-card .m-desc { font-size: 12px; font-weight: 500; line-height: 1.5; color: #f0d3c9; opacity: 1; }
.mode-card.selected { transform: none; border-color: var(--gold); background: #ffd36a0e; box-shadow: inset 0 0 0 1px var(--gold); }
.mode-card.selected::after { width: 21px; height: 21px; font-size: 12px; right: 11px; top: 14px; box-shadow: none; color: #511721; }
.players-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 16px; }
.players-heading .sec-title { margin: 0; }
.countpick { gap: 5px; margin: 0; }
.countnum { min-width: 34px; font-size: 26px; text-shadow: none; text-align: center; font-variant-numeric: tabular-nums; }
.stepbtn, .stepbtn.sm, .stepbtn.big {
  width: 44px; height: 44px; font-size: 23px; border-radius: 11px;
  box-shadow: none; background: #ffffff0e; color: var(--cream); border: 1px solid #ffffff30;
}
.stepbtn:disabled { opacity: .3; }
#t-secnames { font-size: 13px; font-weight: 500; color: var(--muted); margin: 0 0 8px; }
.names { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin: 0 0 22px; }
.namein { padding: 11px 10px; gap: 7px; border: 1px solid #ffffff30; border-radius: 11px; background: #280e192e; min-height: 49px; }
.namein input { font-size: 16px; font-weight: 500; color: var(--cream); width: 100%; user-select: text; -webkit-user-select: text; }
.namein input::placeholder { color: #d2b2af; font-weight: 400; }
.namein:focus-within { border-color: var(--gold); outline: 2px solid #ffd36a44; }
.namein .charcount { display: none; }
.btn {
  background: var(--gold); color: #4f1c27; border: 1px solid #ffe2a0; border-radius: 13px;
  box-shadow: 0 4px 0 #bd803d; letter-spacing: 0; font-size: 18px; min-height: 50px;
}
.btn:hover { transform: translateY(-1px); filter: brightness(1.04); }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #bd803d; }
.btn.big { font-size: 18px; padding: 16px 20px; animation: none; line-height: 1.25; }
#btn-play { width: 100%; }
#btn-play::before { content: '♠'; margin-right: 10px; font-size: 20px; }
.histbtn { display: block; width: 100%; min-height: 44px; margin: 12px 0 0; font-size: 13px; font-weight: 600; background: transparent; color: var(--cream); border: 0; box-shadow: none; }
.tiny { font-size: 11px; color: #d6b2af; opacity: 1; font-weight: 400; text-align: center; margin: 10px 0 20px; line-height: 1.65; }
.rules-details { border-top: 1px solid var(--line); }
.rules-details summary { cursor: pointer; min-height: 48px; padding: 17px 0 8px; font-size: 14px; color: var(--cream); }
.rules-details[open] summary { margin-bottom: 12px; }
.rules { margin: 0; gap: 12px; }
.rule { padding: 0; font-size: 12px; line-height: 1.6; background: none; border: 0; border-radius: 0; font-weight: 400; }
.rn { width: 20px; height: 20px; font-size: 11px; }
/* A quieter table keeps the current player, card and answer in focus. */
#scr-game, #scr-pyramid { max-width: 720px; margin: 0 auto; }
.hud { gap: 6px; padding-bottom: 18px; margin: 0; border-bottom: 1px solid var(--line); }
.chip { font-size: 12px; border: 1px solid var(--line); padding: 8px 11px; background: #511721; letter-spacing: 0; }
.chipbtn { min-width: 44px; min-height: 44px; border-radius: 12px; }
.turnbanner { margin: 26px 0 4px; }
.tb-small { font-size: 13px; letter-spacing: 0; color: var(--muted); }
.tb-name { font-size: clamp(30px, 7vw, 48px); font-weight: 900; text-shadow: none; animation: none; overflow-wrap: anywhere; margin-top: 4px; }
.pchips, .pychips { gap: 6px; margin: 12px 0 22px; }
.pchip { min-height: 44px; padding: 8px 12px; font-size: 12px; font-weight: 600; border: 1px solid var(--line); background: #511721; }
.pchip.current { animation: none; background: var(--gold); color: #511721; border-color: var(--gold); }
.round-title { font-size: clamp(17px, 3vw, 24px); letter-spacing: 0; text-shadow: none; animation: none; margin: 20px 0; }
.slots { gap: clamp(6px, 2vw, 16px); margin: 22px 0; }
.slot { border: 1px dashed #ffffff4d; background: #51172140; }
.slot.active { border: 2px solid var(--gold); animation: none; box-shadow: 0 0 0 4px #ffd36a17; background: #ffd36a0a; }
.slot .num { font: italic 32px Georgia, serif; color: #ffffff4d; }
.face { border: 2px solid var(--cream); box-shadow: 0 6px 12px #280e1940; }
.back { background: repeating-linear-gradient(45deg, #762232 0 4px, #9c3d4b 4px 5px, #762232 5px 9px); }
.back-logo { background: var(--wine); border: 1px solid var(--gold); }
.front { background: var(--cream); }
.front.red { color: #bd3145; }
.prompt { font-size: 16px; font-weight: 500; text-shadow: none; line-height: 1.6; max-width: 490px; margin: 18px auto; }
.choices { gap: 12px; }
.choice { flex: 1; max-width: 250px; min-height: 60px; }
.choice.c-red, .choice.suit.s-red { background: #bd3145; border-color: #ed7d85; box-shadow: 0 4px 0 #681c2b; text-shadow: none; }
.choice.c-black, .choice.suit.s-blk { background: #30262b; color: var(--cream); border-color: #8c7079; box-shadow: 0 4px 0 #20171d; }
.choice.suit { max-width: 104px; padding: 12px 5px; gap: 7px; }
.pyr-legend { text-shadow: none; line-height: 1.6; }
.overlay {
  padding: calc(var(--pp-safe-top) + 20px) calc(var(--pp-safe-right) + 18px) calc(var(--pp-safe-bottom) + 20px) calc(var(--pp-safe-left) + 18px);
  background: #240c20ad; backdrop-filter: blur(8px); z-index: 90;
}
.overlay.dark { background: #421723f5; z-index: 95; gap: 20px; overflow-y: auto; }
.panel { background: var(--cream); color: #511721; border: 1px solid #ffffff80; padding: 24px 20px; border-radius: 22px; max-height: 100%; box-shadow: 0 24px 70px #220b2255; }
.panel.lose { background: #641b27; color: var(--cream); border: 1px solid #c5767c; }
.panel-emoji, .inter-emoji { animation: none; font-size: 48px; }
.panel h3 { line-height: 1.25; }
.panel .stepbtn { background: #641b27; border-color: #641b27; color: var(--cream); }
.panel .btn { border-color: #d9ac58; }
.mlist { max-height: min(42vh, 360px); overscroll-behavior: contain; }
.mrow { background: #641b270c; padding: 10px; }
.mname { min-width: 110px; overflow-wrap: anywhere; }
.scol { gap: 6px; }
.mcount { min-width: 24px; font-size: 20px; font-variant-numeric: tabular-nums; }
.endpanel { max-height: none; }
#scr-end .logo { font-size: clamp(52px, 9vw, 90px); }
.inter-title, .shuffle-text { text-shadow: none; animation: none; }
.inter-desc { font-weight: 500; flex-shrink: 1; overflow-y: auto; }
.toast { top: calc(var(--pp-safe-top) + 78px); max-width: calc(100% - var(--pp-safe-left) - var(--pp-safe-right) - 32px); width: max-content; padding: 11px 18px; border-radius: 12px; text-align: center; font-size: 14px; z-index: 110; opacity: 0; visibility: hidden; transform: translateX(-50%) translateY(-10px); transition: opacity .18s, transform .18s; pointer-events: none; }
.toast.show { opacity: 1; visibility: visible; }
.confetti { z-index: 100; }
.seo { max-width: 960px; color: #e5c7c1; border-top: 1px solid var(--line); font-weight: 400; padding-right: calc(var(--pp-safe-right) + 24px); padding-left: calc(var(--pp-safe-left) + 24px); }
.seo h2, .seo h3 { text-shadow: none; }
.seo h2 { font-size: 22px; }
.seo p, .seo li { font-size: 14px; }
.seo .warn18 { background: #511721; border: 1px solid var(--line); }
#pp-ad-banner { padding-bottom: var(--pp-safe-bottom); }
body.pp-ad-space { padding-bottom: calc(56px + var(--pp-safe-bottom)); }
@media (max-width: 760px) {
  #app { padding: 24px calc(var(--pp-safe-right) + 18px) calc(var(--pp-safe-bottom) + 24px) calc(var(--pp-safe-left) + 18px); }
  #scr-setup { display: block; max-width: 480px; margin: auto; }
  .setup-intro { position: relative; top: auto; padding: 2px 0 22px; }
  .hero-art { position: absolute; right: 3px; top: 5px; width: 155px; height: 145px; margin: 0; transform: scale(.76); transform-origin: right top; }
  html[lang="en"] .hero-art { transform: scale(.6); }
  html[lang="en"] .logo { font-size: 57px; }
  .hero-card { width: 96px; height: 140px; }
  .card-left { left: -20px; }
  .card-right { left: 54px; }
  .card-spark { right: -12px; }
  .logo { font-size: 68px; margin: 0 0 17px 3px; max-width: 64%; }
  .tag { font-size: 14px; line-height: 1.5; margin: 0 0 14px; }
  .game-facts { font-size: 11px; gap: 6px; }
  .game-facts span { padding: 5px 8px; }
  .setup-form { padding: 20px 16px 10px; border-radius: 20px; }
  .sec-title { font-size: 17px; }
  .modes { margin-bottom: 22px; }
  .mode-card { padding: 13px 12px; }
  .mode-card .m-emoji { font-size: 26px; margin-bottom: 10px; }
  .mode-card .m-name { font-size: 16px; }
  .mode-card .m-desc { font-size: 12px; }
  .namein { font-size: 16px; padding: 10px 8px; }
  .hud { gap: 5px; padding-bottom: 14px; }
  .chip { padding: 7px 9px; font-size: 11px; }
  .hud .chipbtn { min-height: 44px; }
  .turnbanner { margin-top: 20px; }
  .mrow .mname { flex-basis: 100%; }
  .overlay.dark { gap: 16px; }
}
@media (max-width: 360px) {
  #app { padding-left: calc(var(--pp-safe-left) + 12px); padding-right: calc(var(--pp-safe-right) + 12px); }
  .logo { font-size: 59px; }
  .hero-art { transform: scale(.65); }
  html[lang="en"] .hero-art { transform: scale(.48); }
  html[lang="en"] .logo { font-size: 49px; }
  .setup-form { padding: 18px 12px 8px; }
  .players-heading .sec-title { font-size: 15px; }
  .names { grid-template-columns: 1fr; }
  .choice { min-width: 120px; }
  .choice.suit { min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .confetti { display: none; }
}