:root {
  --felt:#e3f0e2;
  --felt2:#c4dfcd;
  --cream:#fdf3dc;
  --card:#fff8e6;
  --ink:#2b1a14;
  --mut:#7d6b5d;
  --wine:#7a1420;
  --gold:#d9a93a;
  --pos:#1c7a4f;
  --neg:#b3261e;
  --line:#e6d5ae;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px)
}
* {
  box-sizing:border-box
}
html {
  scroll-padding-top:env(safe-area-inset-top,0px)
}
body {
  margin:0;
  color:var(--ink);
  font:16px/1.45 Nunito,system-ui,sans-serif;
  background:var(--felt);
  background-image:url("bg.svg"),radial-gradient(circle at 20% 0,var(--felt) 0,var(--felt2) 100%);
  background-size:240px 240px,auto;
  min-height:100vh
}
.top {
  background:var(--cream);
  border-bottom:4px solid var(--gold);
  padding:14px 16px 10px
}
.top div {
  max-width:520px;
  margin:0 auto;
  display:flex;
  justify-content:space-between;
  align-items:center
}
.logo {
  font:700 clamp(28px,9vw,44px)/1 Oswald,Impact,"Arial Narrow",sans-serif;
  color:var(--wine);
  letter-spacing:.01em;
  display:flex;
  align-items:center
}
.logo svg {
  height:.95em;
  width:auto;
  margin:0 .03em
}
.lang button {
  border:1.5px solid var(--wine);
  background:none;
  color:var(--wine);
  padding:3px 10px;
  font-weight:800;
  cursor:pointer
}
.lang button:first-child {
  border-radius:8px 0 0 8px
}
.lang button:last-child {
  border-radius:0 8px 8px 0;
  border-left:0
}
.lang .on {
  background:var(--wine);
  color:var(--cream)
}
main {
  max-width:520px;
  margin:0 auto;
  padding:14px 14px 40px
}
.card {
  background:var(--card);
  border-radius:18px;
  padding:14px;
  margin-bottom:14px;
  box-shadow:0 3px 0 rgba(90,60,30,.15)
}
h2 {
  font:700 18px Oswald,sans-serif;
  letter-spacing:.03em;
  margin:0 0 8px;
  color:var(--wine)
}
button,input,select {
  font:inherit;
  color:inherit
}
.board {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px
}
.p {
  border-radius:14px;
  padding:10px;
  background:var(--cream);
  border:2px solid var(--line)
}
.p.lead {
  border-color:var(--gold)
}
.p input {
  width:100%;
  border:0;
  background:transparent;
  font-weight:800;
  padding:0
}
.p .s {
  font:700 36px/1.1 Oswald,sans-serif
}
.pos {
  color:var(--pos)
}
.neg {
  color:var(--neg)
}
.row {
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  margin-bottom:6px
}
.chip {
  flex:1 1 22%;
  min-width:0;
  padding:10px 4px;
  border:2px solid var(--line);
  border-radius:12px;
  background:var(--cream);
  cursor:pointer;
  font-weight:700;
  overflow:hidden;
  text-overflow:ellipsis
}
.chip.two {
  flex-basis:45%
}
.chip.on {
  background:var(--wine);
  border-color:var(--wine);
  color:#fff
}
.lab {
  display:block;
  font-size:14px;
  font-weight:800;
  color:var(--mut);
  margin:10px 0 4px
}
.step {
  display:flex;
  align-items:center;
  gap:12px
}
.step button {
  width:46px;
  height:46px;
  border-radius:50%;
  border:2px solid var(--wine);
  background:none;
  color:var(--wine);
  font-size:24px;
  font-weight:800;
  cursor:pointer
}
.step output {
  font:700 34px Oswald,sans-serif;
  min-width:46px;
  text-align:center
}
.step span {
  font-size:14px;
  color:var(--mut)
}
.prev {
  margin:10px 0;
  padding:10px;
  border-radius:12px;
  background:var(--cream);
  font-size:14px;
  min-height:20px
}
.warn {
  color:var(--neg);
  font-weight:800
}
.main {
  width:100%;
  padding:14px;
  border:0;
  border-radius:12px;
  background:var(--wine);
  color:#fff;
  font:700 18px Oswald,sans-serif;
  letter-spacing:.04em;
  cursor:pointer
}
.main:disabled {
  opacity:.4
}
.ghost {
  background:none;
  border:2px solid var(--line);
  border-radius:10px;
  padding:8px 12px;
  cursor:pointer;
  font-weight:700
}
.h {
  border-top:1px solid var(--line);
  padding:8px 0;
  font-size:14px
}
.h small {
  display:block;
  color:var(--mut)
}
.g2 {
  display:grid;
  grid-template-columns:1fr;
  gap:4px
}
.g2 select {
  width:100%;
  padding:9px;
  border-radius:10px;
  border:2px solid var(--line);
  background:var(--cream)
}
.tbl {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:4px;
  font-size:13px;
  margin-top:8px;
  text-align:center
}
.tbl div {
  background:var(--cream);
  border-radius:8px;
  padding:4px
}
.note {
  font-size:13px;
  color:var(--mut);
  margin-top:8px
}
#ov {
  display:none;
  position:fixed;
  inset:0;
  background:rgba(40,25,15,.75);
  overflow:auto;
  z-index:9;
  padding:calc(16px + env(safe-area-inset-top,0px)) 14px 30px
}
.ovin {
  max-width:520px;
  margin:0 auto
}
#cardimg {
  width:100%;
  border-radius:14px;
  display:block
}
.ovh {
  color:#fff;
  font-size:14px;
  margin:10px 0
}
#qov {
  display:none;
  position:fixed;
  inset:0;
  background:rgba(40,25,15,.75);
  overflow:auto;
  z-index:9;
  padding:calc(16px + env(safe-area-inset-top,0px)) 14px 30px
}
.qcard {
  background:var(--cream);
  border-radius:18px;
  padding:20px;
  text-align:center
}
#qlogo .logo {
  justify-content:center;
  margin-bottom:12px
}
.qwrap {
  position:relative;
  width:260px;
  margin:0 auto;
  background:#fff;
  padding:10px;
  border-radius:12px
}
#qr canvas,#qr img {
  width:100%!important;
  height:auto!important;
  display:block
}
#qr img {
  display:none
}
.qtile {
  position:absolute;
  left:50%;
  top:50%;
  width:14%;
  transform:translate(-50%,-50%);
  background:#fff;
  padding:3px;
  border-radius:6px
}
#qurl {
  width:100%;
  padding:10px;
  border-radius:10px;
  border:2px solid var(--line);
  background:var(--cream)
}
#qcap {
  font-weight:800;
  color:var(--wine);
  margin:12px 0 0
}
.tg {
  flex:0 1 auto;
  padding:8px 10px;
  font-size:14px
}
#calc {
  margin-bottom:10px
}
.rnd {
  font-weight:800;
  color:var(--wine);
  margin-bottom:10px
}
.seat {
  font-size:13px;
  color:var(--mut)
}
.tile {
  flex:1 1 9%;
  min-width:0;
  padding:5px 0 4px;
  border-radius:8px;
  border:2px solid var(--line);
  background:#fff;
  font-weight:800;
  line-height:1.1;
  position:relative;
  cursor:pointer;
  font-size:18px
}
.tile small {
  display:block;
  font-size:11px
}
.tile b {
  position:absolute;
  top:-7px;
  right:-3px;
  background:var(--wine);
  color:#fff;
  border-radius:10px;
  font-size:11px;
  padding:0 5px
}
.s0 {
  color:#b3261e
}
.s1 {
  color:#1f55b3
}
.s2 {
  color:#1c7a4f
}
.hc {
  color:#2b1a14
}
.strip .tile {
  flex:0 0 38px;
  font-size:16px
}
#ausr,#apw,#hdate,#hstart,#etime,#rdate,#aemail {
  width:100%;
  padding:10px;
  border-radius:10px;
  border:2px solid var(--line);
  background:var(--cream)
}
.ghost {
  display:inline-block
}
.card {
  border:1.5px solid rgba(217,169,58,.55)
}
.tilestrip {
  display:flex;
  gap:6px;
  justify-content:center;
  margin:2px 0 14px
}
.dt {
  width:40px;
  height:52px;
  border-radius:8px;
  background:#fffaf0;
  border:2px solid #e0cfa6;
  box-shadow:0 3px 0 #cdb98a;
  display:flex;
  align-items:center;
  justify-content:center;
  font:800 22px serif;
  transform:rotate(var(--r,0deg))
}
html {
  color-scheme:light
}
select {
  width:100%;
  padding:11px;
  border-radius:12px;
  border:2px solid var(--line);
  background:var(--cream);
  color:var(--ink);
  font-size:16px
}
input[type=checkbox] {
  width:24px;
  height:24px;
  accent-color:var(--wine);
  flex:0 0 auto
}
.acts {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:10px
}
:focus-visible {
  outline:3px solid var(--gold);
  outline-offset:2px
}