/* The supplied Woo artwork remains an unmodified original image. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.welcome-shell { min-height: 100svh; color: #253823; background: #12251a; background-image: url('./assets/felt-grain.svg'), radial-gradient(ellipse at 50% 20%, #29432c66, transparent 75%); }
.welcome-shell #main { min-height: 100svh; outline: none; }
.welcome-page { min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 20px 30px; }
.welcome-card { position: relative; width: min(100%, 390px); padding: 24px 26px 16px; background: #f8f5ec; border-radius: 24px; box-shadow: 0 18px 60px #07100a38, inset 0 0 0 1px #fff9; }
.welcome-language { position: absolute; right: 14px; top: 10px; z-index: 1; }
.welcome-language select { width: 64px; min-height: 44px; padding: 8px; margin: 0; border: 0; border-radius: 8px; background: transparent; color: #283b29; font-size: 16px; }
.welcome-brand { display: block; width: 206px; margin: 0 auto 4px; }
.welcome-logo { display: block; width: 100%; height: auto; mix-blend-mode: multiply; }
.welcome-card form { margin: 0; }
.welcome-card .code-label { text-align: center; font-size: 16px; font-weight: 500; letter-spacing: .12em; color: #777463; margin: 0 0 8px; }
.welcome-card .welcome-code { height: 62px; min-width: 0; width: 100%; margin: 0; border: 4px double #34543a; border-radius: 18px; background: #efe7d8; color: #233725; font: 700 28px Georgia, serif; letter-spacing: .19em; text-align: center; text-transform: uppercase; padding: 9px 12px; }
.welcome-code::placeholder { color: #233725; opacity: 1; }
.welcome-card .welcome-submit { width: 100%; min-height: 48px; margin-top: 10px; background: #1b3524; border-color: #1b3524; border-radius: 8px; font-size: 16px; font-weight: 600; letter-spacing: .13em; }
.welcome-card .welcome-submit:hover { background: #31533b; }
.welcome-help { text-align: center; font-size: 16px; line-height: 1.55; color: #737261; margin: 12px 0; }
.welcome-rules { min-height: 48px; display: flex; align-items: center; justify-content: center; border: 1px solid #334d38; border-radius: 8px; font-size: 16px; letter-spacing: .1em; font-weight: 600; }
.welcome-rules:hover { background: #e9eddf; }
.welcome-staff { display: flex; gap: 14px; align-items: center; justify-content: space-between; border-top: 1px solid #deded0; margin-top: 16px; padding-top: 4px; }
.welcome-staff a { min-width: 44px; justify-content: center; min-height: 44px; display: inline-flex; align-items: center; font-size: 16px; text-decoration: underline; text-underline-offset: 4px; }
.welcome-warning { width: min(100%, 365px); border-radius: 18px; text-align: center; background: #34513733; padding: 13px 16px; margin-top: 26px; }
.welcome-warning strong { color: #ccab76; font-size: 16px; font-weight: 600; letter-spacing: .07em; }
.welcome-warning p { color: #c8c8b4; font-size: 16px; line-height: 1.5; margin: 4px 0 0; }
.welcome-footer { color: #c6c8ad; font-size: 16px; letter-spacing: .08em; margin-top: 25px; text-align: center; }
.welcome-card .inline-error:empty { display: none; }
.welcome-card .inline-error:not(:empty) { font-size: 16px; margin: 12px 0 4px; }
.welcome-back { display: flex; align-items: center; justify-content: center; min-height: 44px; font-size: 16px; text-decoration: underline; margin-top: 12px; }
.staff-entry .welcome-brand { width: 150px; }
.staff-entry .welcome-card { width: min(100%, 440px); }
.staff-entry h1 { font-size: 26px; line-height: 1.2; margin: 10px 0; text-align: center; }
.staff-entry-note { font-size: 16px; color: #737261; text-align: center; margin-bottom: 22px; }
.staff-entry label { margin-bottom: 16px; }
.staff-entry input, .staff-entry select { font-size: 16px; }
.staff-entry .welcome-language select { width: 64px; }
.setup-note { background: #e9edde; border-radius: 8px; font-size: 16px; padding: 12px; margin-bottom: 16px; }
.staff-account { flex-wrap: wrap; gap: 12px; }
.staff-account .account-meta { min-width: 0; flex: 1; }
.staff-account strong { overflow-wrap: anywhere; }
.staff-account small { display: block; font-size: 16px; color: var(--muted); }
.staff-account button { font-size: 16px; min-height: 44px; }
.cashier-account-security { margin-top: 24px; }
@media (max-width: 600px) {
  .welcome-page { padding: 24px 20px; }
  .welcome-card { padding: 20px 20px 12px; border-radius: 22px; }
  .welcome-brand { width: 185px; }
  .welcome-staff { gap: 8px; }
  .welcome-warning { margin-top: 22px; }
  .welcome-footer { margin-top: 22px; }
}
@media (max-width: 359px) {
  .welcome-page { padding: 16px 12px; }
  .welcome-card { padding-inline: 16px; }
  .welcome-staff { flex-wrap: wrap; gap: 0 16px; }
}

/* Cashier keeps code issuance first; occasional controls stay within disclosures. */
.staff-panel .access-card .eyebrow { color: #d6e3c5; font-size: 16px; }
.staff-panel .access-card .helper { color: #d6e3c5; }
.staff-disclosure > summary { display: flex; gap: 12px; align-items: center; justify-content: space-between; min-height: 44px; font-size: 18px; font-weight: 600; list-style: none; }
.staff-disclosure > summary::-webkit-details-marker { display: none; }
.staff-disclosure[open] > summary { margin-bottom: 20px; }
.staff-disclosure[open] > summary .icon { transform: rotate(180deg); }

/* Public entry: a quiet illuminated mahjong table around the original Woo card. */
.welcome-living { position: relative; isolation: isolate; }
.welcome-living > .welcome-card,
.welcome-living > .welcome-warning,
.welcome-living > .welcome-footer { z-index: 1; position: relative; }
.welcome-living > .welcome-card { box-shadow: 0 24px 80px #06150c66, 0 0 0 1px #d6c29524, inset 0 0 0 1px #fff9; }
.welcome-atmosphere { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; contain: strict; }
.welcome-atmosphere::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 44%, transparent 20%, #071b1260 100%); }
.felt-light { position: absolute; width: 80%; height: 95%; opacity: .45; }
.light-jade { left: -18%; top: -30%; background: radial-gradient(ellipse, #80aa633d, #3c865628 30%, transparent 67%); }
.light-gold { right: -20%; bottom: -40%; background: radial-gradient(ellipse, #c0a46c2b, #4c80552b 33%, transparent 65%); }
.felt-contour { position: absolute; left: 50%; top: 49%; border: 1px solid #c6b67e16; border-radius: 48%; transform: translate(-50%,-50%) rotate(-24deg); }
.contour-outer { width: min(84vw,1440px); height: 78vh; }
.contour-inner { width: min(76vw,1280px); height: 68vh; border-color: #bdcda80b; }
.ambient-tile { position: absolute; width: var(--tile-size,110px); aspect-ratio: 56 / 76; transform: rotate(var(--tilt,0deg)); opacity: var(--presence,.7); }
.ambient-float { position: absolute; inset: 0; border-radius: 12%; background: #4c7050; box-shadow: 0 8px 0 #285035, 0 10px 0 #b0b58b55, 5px 24px 30px #020e0a5c; }
.ambient-face { position: absolute; inset: 0 0 7%; display: grid; place-items: center; border-radius: 12%; border: 1px solid #ffffe8b0; background: linear-gradient(135deg,#f6f2df 15%,#dddcc1 80%); box-shadow: inset 0 2px 0 #fff9, inset -4px -5px 0 #969e6b29; }
.ambient-face svg { width: 80%; height: 85%; overflow: visible; }
.ambient-tile-0 { left: calc(50% - clamp(285px,34vw,620px)); top: 17%; --tile-size: 116px; --tilt: -23deg; --presence: .63; }
.ambient-tile-1 { right: calc(50% - clamp(300px,33vw,600px)); top: 29%; --tile-size: 126px; --tilt: 19deg; --presence: .76; }
.ambient-tile-2 { left: calc(50% - clamp(260px,29vw,520px)); top: 65%; --tile-size: 98px; --tilt: 15deg; --presence: .75; }
.ambient-tile-3 { right: calc(50% - clamp(290px,36vw,650px)); top: 76%; --tile-size: 90px; --tilt: -24deg; --presence: .48; }
.distant .ambient-float { background: #6d936c15; border: 1px solid #a2b98c3b; box-shadow: 0 5px 0 #8eaa6e12; }
.distant .ambient-face { background: #97a57806; border-color: #abc68c26; box-shadow: inset 0 0 0 3px #9fb78408; }
.distant svg { opacity: .8; }
.distant .tile-number, .distant .tile-honor, .distant .tile-character { fill: #a8b88b; }
.distant .ambient-face svg path { stroke: #a8b88b; }
.distant .ambient-face svg circle, .distant .ambient-face svg rect { stroke: #a8b88b; }
.ambient-tile-4 { left: 4%; top: 43%; --tile-size: 168px; --tilt: 18deg; --presence: .32; }
.ambient-tile-5 { right: 7%; top: 54%; --tile-size: 66px; --tilt: -12deg; --presence: .6; }
.ambient-tile-6 { left: 32%; top: -7%; --tile-size: 84px; --tilt: 34deg; --presence: .42; }
.ambient-tile-7 { right: 23%; top: 6%; --tile-size: 68px; --tilt: -16deg; --presence: .5; }
.ambient-tile-8 { left: 9%; bottom: -7%; --tile-size: 120px; --tilt: -24deg; --presence: .38; }
.ambient-tile-9 { right: -2%; top: 12%; --tile-size: 146px; --tilt: 28deg; --presence: .27; }
.felt-motes { position: absolute; inset: 0; }
.felt-motes i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #d8c18c; opacity: .35; box-shadow: 0 0 10px #ddc79144; }
.felt-motes i:nth-child(1) { left: 28%; top: 37%; }
.felt-motes i:nth-child(2) { right: 22%; top: 22%; width: 2px; height: 2px; }
.felt-motes i:nth-child(3) { left: 15%; top: 77%; }
.felt-motes i:nth-child(4) { right: 30%; top: 61%; width: 2px; height: 2px; }
.felt-motes i:nth-child(5) { left: 11%; top: 10%; width: 2px; height: 2px; }
.felt-motes i:nth-child(6) { right: 12%; top: 86%; }
.welcome-motion { position: fixed; right: 22px; bottom: 22px; z-index: 3; width: 44px; height: 44px; display: grid; place-items: center; padding: 10px; color: #d6dcc5; border: 1px solid #d1d7b329; background: #173625b3; }
.welcome-motion:hover { color: #fff8e6; background: #2c4d35; border-color: #d1d7b370; }
.welcome-motion:focus-visible { outline: 2px solid #d6bd81; outline-offset: 4px; }
.welcome-motion:disabled { opacity: .55; cursor: default; }
@media (min-width: 701px) and (max-width: 1100px) {
  .ambient-tile-0 { --tile-size: 90px; }
  .ambient-tile-1 { --tile-size: 100px; }
  .ambient-tile-2 { --tile-size: 78px; }
  .ambient-tile-3 { --tile-size: 70px; }
  .ambient-tile-4, .ambient-tile-9 { display: none; }
}
@media (max-width: 700px) {
  .welcome-atmosphere .distant, .felt-motes, .contour-inner { display: none; }
  .contour-outer { width: 145vw; height: 75vh; top: 43%; border-color: #c6b67e12; }
  .ambient-tile-0 { left: -22px; top: 15%; --tile-size: 78px; --tilt: -20deg; --presence: .4; }
  .ambient-tile-1 { right: -16px; top: 2%; --tile-size: 84px; --tilt: 22deg; --presence: .6; }
  .ambient-tile-2 { left: -20px; top: auto; bottom: 2%; --tile-size: 75px; --tilt: 15deg; --presence: .35; }
  .ambient-tile-3 { right: -35px; top: 69%; --tile-size: 76px; --presence: .25; }
  .welcome-motion { top: 14px; left: 14px; right: auto; bottom: auto; }
}
@media (max-width: 700px) and (max-height: 740px) {
  .welcome-living { padding-top: 68px; }
}
@media (min-width: 701px) and (max-height: 600px) {
  .ambient-tile-0, .ambient-tile-1 { top: 12%; }
  .ambient-tile-2, .ambient-tile-3 { top: 72%; }
}

/* Existing sessions have a clear continuation instead of a second code form. */
.welcome-session { text-align:center; margin-top:18px; }
.welcome-session-icon { display:grid; place-items:center; margin:0 auto 12px; width:44px; height:44px; border-radius:50%; background:#e4ecdd; color:#28583e; }
.welcome-session h2 { font-size:22px; margin:0 0 8px; }
.welcome-session p { font-size:16px; line-height:1.6; color:#6d7362; margin:0 0 20px; }
.welcome-session .welcome-submit { display:flex; width:100%; text-transform:none; letter-spacing:0; gap:10px; }
.welcome-signout { margin:10px auto; min-height:44px; }