:root{
  --burg:#9b1c31;
  --burg-dark:#7e1427;
  --off:#f6f1ee;
  --white:#fff;
  --muted:#c58a95;
  --blue:#7ec8ff;
  --text:#8e1b2e;
  --shadow:0 8px 20px rgba(70,0,10,.18);
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family: "Arial","Tahoma",sans-serif;
  background:#111;
  color:#fff;
}
button,input{font:inherit}
#app{min-height:100vh}
.screen{
  min-height:100vh;
  padding:env(safe-area-inset-top) 18px env(safe-area-inset-bottom);
  background-color:var(--burg);
  background-image:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,.35) 0 3px, transparent 4px),
    radial-gradient(circle at 78% 11%, rgba(255,255,255,.28) 0 4px, transparent 5px),
    radial-gradient(circle at 42% 32%, rgba(255,255,255,.22) 0 2px, transparent 3px),
    radial-gradient(circle at 85% 44%, rgba(255,255,255,.26) 0 5px, transparent 6px),
    radial-gradient(circle at 20% 66%, rgba(255,255,255,.28) 0 4px, transparent 5px),
    radial-gradient(circle at 61% 74%, rgba(255,255,255,.24) 0 3px, transparent 4px),
    radial-gradient(circle at 36% 88%, rgba(255,255,255,.22) 0 5px, transparent 6px),
    linear-gradient(135deg, rgba(255,255,255,.05), rgba(0,0,0,.03));
  background-size: 170px 170px, 220px 220px, 130px 130px, 260px 260px, 210px 210px, 190px 190px, 250px 250px, auto;
}
.header{
  direction:ltr;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 6px 8px;
}
.brand{font-weight:800;font-size:22px;letter-spacing:.2px}
.icon-btn{
  border:0;background:transparent;color:#fff;font-size:34px;line-height:1;cursor:pointer
}
.undo-row{display:flex;justify-content:center;align-items:center;gap:8px;margin:4px 0 10px;font-weight:700}
.center{display:flex;align-items:center;justify-content:center}
.landing{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:70px}
.landing .brand-big{font-size:48px;font-weight:900;direction:ltr}
.card,.btn,.score-card,.input-card,.panel{
  background:var(--white);
  border-radius:18px;
  box-shadow:var(--shadow);
}
.layered{
  background:#fff;
  padding:8px;
  border-radius:20px;
  box-shadow:var(--shadow);
}
.layered > .inner{
  background:var(--off);
  border-radius:14px;
  min-height:100%;
  box-shadow:inset 0 0 0 1px rgba(117,70,70,.08), 0 3px 10px rgba(80,0,0,.1);
}
.big-btn{
  min-width:250px;padding:24px 32px;border:0;color:var(--text);font-weight:800;font-size:34px;cursor:pointer
}
.title-card{padding:22px 26px;color:var(--text);font-size:28px;font-weight:800;text-align:center}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.game-card{
  min-height:145px;display:flex;align-items:center;justify-content:center;color:var(--text);font-size:28px;font-weight:800;cursor:pointer
}
.full-card{grid-column:1/-1;min-height:110px}
.pressable{transition:.12s transform,.12s filter}
.pressable:active{transform:scale(.97);filter:brightness(.92)}
.selected{outline:4px solid var(--blue)!important}
.disabled{opacity:.42;pointer-events:none}
.score-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:12px 0}
.team-col{text-align:center}
.team-label{font-size:30px;font-weight:800;margin-bottom:12px}
.score-box{
  min-height:70px;display:flex;align-items:center;justify-content:center;color:var(--text);font-size:34px;font-weight:800
}
.progress{display:flex;gap:7px;justify-content:center;flex-wrap:wrap;margin:10px 0 14px;direction:rtl}
.progress .p{
  width:36px;height:36px;border-radius:10px;background:rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;color:#7f2232;font-weight:800
}
.progress .done{background:rgba(255,255,255,.72)}
.progress .current{background:#fff;outline:3px solid var(--blue)}
.action-btn{
  width:100%;padding:18px;border:0;border-radius:16px;background:rgba(255,255,255,.18);color:#fff;font-size:24px;font-weight:800
}
.option-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
.option{
  min-height:120px;display:flex;align-items:center;justify-content:center;color:var(--text);font-size:26px;font-weight:800;border:0
}
.option.full{grid-column:1/-1;min-height:100px}
.footer-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px}
.small-btn{padding:16px;border:0;border-radius:14px;font-weight:800}
.input{
  width:100%;padding:16px;border:1px solid #ddd;border-radius:14px;background:#fff;color:#4a2228;font-size:22px;text-align:center
}
.log{
  background:var(--off);border-radius:18px;padding:14px;max-height:45vh;overflow:auto;color:var(--text)
}
.log-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:10px 4px;border-bottom:1px solid #e5d9d7;text-align:center;font-size:22px}
.player-row{
  display:grid;grid-template-columns:1.2fr .7fr .9fr .7fr .9fr;gap:8px;align-items:center;background:#fff;border-radius:16px;padding:10px;margin-bottom:10px;color:var(--text)
}
.step-btn{
  width:46px;height:46px;border:0;border-radius:12px;background:var(--off);color:var(--text);font-size:28px;font-weight:900
}
.step-btn.sel{outline:3px solid var(--blue)}
.pass-indicator{display:flex;gap:14px;justify-content:center;margin:10px 0 16px}
.pass-indicator .state{padding:8px 20px;border-radius:12px;background:rgba(255,255,255,.24);font-size:28px}
.pass-indicator .active{background:#fff;color:var(--text);outline:3px solid var(--blue)}
.modal-backdrop,.sheet-backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,.52);display:flex;align-items:center;justify-content:center;padding:20px;z-index:50
}
.modal{
  width:min(92vw,520px);background:#fff;border-radius:22px;padding:20px;color:var(--text);box-shadow:var(--shadow)
}
.modal h3{text-align:center;font-size:26px;margin:4px 0 18px}
.modal-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.primary{background:var(--burg-dark)!important;color:#fff!important}
.secondary{background:#fff!important;color:var(--text)!important;border:2px solid var(--burg-dark)!important}
.sheet-backdrop{align-items:flex-end;padding:0}
.sheet{
  width:100%;max-height:75vh;overflow:auto;background:#fff;border-radius:26px 26px 0 0;padding:20px;color:var(--text)
}
.validation{font-size:14px;color:#ffd9df;text-align:center;margin-top:6px}
.kingdom{padding:14px 18px;background:#fff;color:var(--text);border-radius:14px;font-weight:800;text-align:center}
.result-list{display:grid;gap:12px}
.result-item{padding:18px;background:var(--off);border-radius:14px;color:var(--text);font-size:22px;font-weight:800}
.winner{outline:4px solid var(--blue)}
.tabs{display:flex;gap:6px;overflow:auto;background:#8f8f98;border-radius:14px;padding:4px}
.tab{min-width:76px;padding:12px;border:0;background:transparent;color:#fff;border-radius:10px}
.tab.sel{background:#fff;color:var(--text)}
@media(min-width:700px){
  .screen{max-width:560px;margin:0 auto;box-shadow:0 0 40px rgba(0,0,0,.35)}
}