/* Parlor screen. Scoped to .parlor-app so the marketing page can embed it inline. */
.parlor-app a { color: #e6bf55; text-decoration: none; }
.parlor-app a:hover { color: #f5d77a; }
.parlor-app button { font-family: inherit; -webkit-tap-highlight-color: transparent; cursor: pointer; }
.parlor-app button:disabled { cursor: default; }
.parlor-app h1 { margin: 0; }
.parlor-app [hidden] { display: none !important; }
.parlor-app .page { min-height: 100vh; background: linear-gradient(180deg, #2e160f 0%, #1e0f0a 55%, #132a1f 100%); }
.parlor-app .col { max-width: 480px; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; }
.parlor-app header { position: sticky; top: 0; z-index: 5; background: rgba(30, 15, 10, .95); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid #4a2f1e; padding: 10px 16px; display: flex; flex-direction: column; gap: 10px; }
.parlor-app .top { display: flex; align-items: center; gap: 8px; }
.parlor-app .title { flex: 1; font-family: Cinzel, serif; font-weight: 700; font-size: 20px; letter-spacing: .08em; color: #e6bf55; }
.parlor-app .chip { display: flex; align-items: center; gap: 6px; border: 1px solid #6b4a24; border-radius: 999px; padding: 6px 12px; font-weight: 700; font-size: 14px; }
.parlor-app .chip .dot { width: 10px; height: 10px; border-radius: 50%; background: #e6bf55; }
.parlor-app .chip .bolt { font-size: 12px; color: #7fb0ff; }
.parlor-app .segs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; background: rgba(0, 0, 0, .3); padding: 4px; border-radius: 10px; }
.parlor-app .segs button { min-height: 40px; background: transparent; color: #d9cba8; border: 0; border-radius: 7px; font-weight: 700; font-size: 13px; }
.parlor-app .segs button[aria-selected="true"] { background: #e6bf55; color: #2a1206; }
.parlor-app main { flex: 1; padding: 18px 16px 28px; display: flex; flex-direction: column; gap: 16px; }
.parlor-app .panel { display: flex; flex-direction: column; gap: 16px; }
.parlor-app .panel.tight { gap: 14px; }
/* Draw */
.parlor-app .draw-head { text-align: center; display: flex; flex-direction: column; gap: 4px; }
.parlor-app .draw-head h1 { font-family: Cinzel, serif; font-size: 22px; color: #e6bf55; letter-spacing: .06em; }
.parlor-app .draw-head span { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 17px; color: #d9cba8; }
.parlor-app .machine { background: #2a1310; border: 3px solid #d9b24a; border-radius: 16px; padding: 7px; box-shadow: 0 0 24px rgba(217, 178, 74, .18), 0 12px 30px rgba(0, 0, 0, .5); }
.parlor-app .machine-inner { border: 2px solid #9c7a2c; border-radius: 11px; padding: 10px 10px 14px; display: flex; flex-direction: column; gap: 12px; background: linear-gradient(180deg, #2f1712, #22100c); }
.parlor-app .chutes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.parlor-app .chute { position: relative; aspect-ratio: 1; background: radial-gradient(circle at 50% 45%, #22573f, #163d2c 75%); border: 2px solid #d9b24a; border-radius: 8px; display: grid; place-items: center; box-shadow: inset 0 0 16px rgba(0, 0, 0, .45); }
.parlor-app .chutes.win .chute { border-color: #f5d77a; box-shadow: inset 0 0 16px rgba(0, 0, 0, .45), 0 0 14px rgba(245, 215, 122, .45); }
.parlor-app .chute { overflow: hidden; transition: border-color .2s, box-shadow .3s; }
.parlor-app .chute.spin .sym { animation: reel .15s linear infinite; filter: blur(1.4px); }
.parlor-app .chute.land .sym { animation: land .35s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes reel { from { transform: translateY(-40%); } to { transform: translateY(40%); } }
@keyframes land { from { transform: translateY(-30%); } to { transform: none; } }
.parlor-app .jump { transition: transform .15s, filter .15s; }
.parlor-app .jump.press { transform: translateY(3px) scale(.96); filter: brightness(1.2); }
@media (prefers-reduced-motion: reduce) { .parlor-app:not(.demo) .chute.spin .sym, .parlor-app:not(.demo) .chute.land .sym {animation: none; filter: none; } }
.parlor-app .chute-label { position: absolute; top: 5px; left: 7px; font-size: 9px; font-weight: 700; letter-spacing: .08em; color: #e6bf55; z-index: 2; }
.parlor-app .sym { display: grid; place-items: center; }
.parlor-app .sym > span { display: block; }
.parlor-app .sym.red, .parlor-app .sym.black { width: 50%; aspect-ratio: 1; border-radius: 50%; border: 1.5px solid #e6bf55; box-shadow: 0 4px 0 rgba(0, 0, 0, .35), 0 6px 12px rgba(0, 0, 0, .4); }
.parlor-app .sym.red > span, .parlor-app .sym.black > span { width: 62%; aspect-ratio: 1.7; border-radius: 50%; }
.parlor-app .sym.red { background: radial-gradient(circle at 50% 30%, #ff6a4e, #d0281f 55%, #8e1410); }
.parlor-app .sym.red > span { border: 1.5px solid rgba(255, 214, 170, .75); }
.parlor-app .sym.black { background: radial-gradient(circle at 50% 30%, #5a5a5a, #1d1d1d 55%, #050505); }
.parlor-app .sym.black > span { border: 1.5px solid rgba(230, 191, 85, .7); }
.parlor-app .sym.shield { width: 46%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #ffe9a0, #e6bf55 55%, #a07a22); border: 3px dotted #7a5a18; box-shadow: 0 4px 0 rgba(0, 0, 0, .35); }
.parlor-app .sym.shield > span { width: 42%; aspect-ratio: .85; border-radius: 45% 45% 50% 50% / 30% 30% 70% 70%; border: 2px solid #e6bf55; background: radial-gradient(circle at 50% 40%, #2d5fd0 0 18%, #151515 20%); }
.parlor-app .sym.vial { width: 20%; aspect-ratio: .3; border-radius: 4px 4px 10px 10px; background: linear-gradient(90deg, #1b3f9a, #3d7bff 45%, #1b3f9a); border: 2px solid #e6bf55; box-shadow: 0 0 12px rgba(80, 140, 255, .45); }
.parlor-app .sym.vial > span { width: 30%; aspect-ratio: .25; border-radius: 3px; background: rgba(200, 225, 255, .55); }
.parlor-app .strip { height: 4px; margin: 0 8px; border-radius: 2px; background: linear-gradient(90deg, transparent, #8a6420 20%, #d9b24a 50%, #8a6420 80%, transparent); }
.parlor-app .result { min-height: 44px; display: flex; align-items: center; justify-content: center; text-align: center; border-radius: 10px; background: rgba(0, 0, 0, .25); padding: 8px 12px; font-size: 14px; font-weight: 700; color: #d9cba8; }
.parlor-app .result.win { background: rgba(230, 191, 85, .14); color: #f5d77a; }
.parlor-app .jump { align-self: center; width: 156px; height: 156px; border-radius: 50%; background: radial-gradient(circle at 50% 30%, #b8302a, #7a1712 70%); border: 5px solid #d9b24a; box-shadow: inset 0 0 0 9px #8a1a15, inset 0 0 0 11px rgba(217, 178, 74, .55), 0 0 34px rgba(217, 178, 74, .35), 0 16px 40px rgba(0, 0, 0, .5); color: #f6ead0; font-family: Cinzel, serif; font-weight: 700; font-size: 32px; text-shadow: 0 2px 0 rgba(0, 0, 0, .4); letter-spacing: .06em; }
.parlor-app .jump:active:not(:disabled) { transform: translateY(2px); }
.parlor-app .jump:disabled { opacity: .45; }
.parlor-app .meter { display: flex; flex-direction: column; gap: 6px; }
.parlor-app .meter-label { display: flex; justify-content: space-between; font-size: 12px; color: #b9a585; }
.parlor-app .bar { height: 6px; border-radius: 3px; background: #4a2f1e; overflow: hidden; }
.parlor-app .bar > div { height: 100%; }
.parlor-app details { border: 1px solid #4a2f1e; border-radius: 12px; background: rgba(42, 21, 17, .6); }
.parlor-app summary { min-height: 48px; display: flex; align-items: center; padding: 0 14px; font-size: 14px; font-weight: 700; color: #e6bf55; cursor: pointer; list-style: none; }
.parlor-app summary::-webkit-details-marker { display: none; }
.parlor-app .pays { padding: 0 14px 14px; display: flex; flex-direction: column; gap: 8px; }
.parlor-app .pays div { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; border-top: 1px solid #4a2f1e; padding-top: 8px; }
.parlor-app .pays span:first-child { color: #d9cba8; }
.parlor-app .pays span:last-child { font-weight: 700; color: #f5d77a; }
/* Loft */
.parlor-app .loft-head { display: flex; flex-direction: column; gap: 8px; }
.parlor-app .loft-head .row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.parlor-app .loft-head h1, .parlor-app .shop-head h1 { font-family: Cinzel, serif; font-size: 20px; color: #e6bf55; }
.parlor-app .loft-head .lvl { font-size: 12px; font-weight: 700; color: #b9a585; }
.parlor-app .loft-head p { margin: 0; font-size: 13px; line-height: 1.5; color: #d9cba8; text-wrap: pretty; }
.parlor-app .grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.parlor-app .upg { background: linear-gradient(180deg, #1f5039, #18402e); border: 2px solid #d9b24a; border-radius: 10px; padding: 14px 10px 10px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.parlor-app .upg-name { font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: 17px; color: #f3e6c8; }
.parlor-app .upg-tier { font-size: 11px; font-weight: 600; color: #f3e6c8; }
.parlor-app .upg-eff { font-size: 11px; font-weight: 600; line-height: 1.35; color: #f5c518; min-height: 30px; }
.parlor-app .pips { display: flex; gap: 4px; padding: 2px 0 4px; }
.parlor-app .pips span { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid #e6bf55; }
.parlor-app .pips span.on { background: #e6bf55; }
.parlor-app .upg button { width: 100%; min-height: 44px; border-radius: 6px; border: 2px solid #d9b24a; background: #1a0d0a; color: #c9b48a; font-weight: 700; font-size: 13px; }
.parlor-app .upg button.can { border-color: #f5c518; background: #f5c518; color: #2a1206; }
.parlor-app .to-draw { min-height: 52px; background: transparent; color: #e6bf55; border: 1px dashed #d9b24a; border-radius: 12px; font-weight: 700; font-size: 14px; }
/* Shop */
.parlor-app .shop-head { display: flex; flex-direction: column; gap: 4px; }
.parlor-app .shop-head span { font-size: 13px; color: #d9cba8; }
.parlor-app .board-card { text-align: left; background: #2a1511; border: 1px solid #4a2f1e; border-radius: 14px; padding: 10px; display: flex; flex-direction: column; gap: 8px; color: #f3e6c8; }
.parlor-app .board-card.eq { border: 2px solid #d9b24a; }
.parlor-app .swatch { display: block; aspect-ratio: 1; border-radius: 8px; border: 3px solid; background-size: 50% 50%; }
.parlor-app .board-name { font-weight: 700; font-size: 14px; }
.parlor-app .board-cta { min-height: 36px; border-radius: 8px; display: grid; place-items: center; font-size: 12px; font-weight: 700; border: 1px solid #6b4a24; }
/* Tab bar */
.parlor-app .tabbar { position: sticky; bottom: 0; z-index: 6; background: #1e0f0a; border-top: 1px solid #6b4a24; padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.parlor-app .tabbar a { min-height: 54px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: #b9a585; }
.parlor-app .tabbar a[aria-current="page"] { color: #f5d77a; }
.parlor-app .tabbar .ic { font-size: 17px; line-height: 1; }
.parlor-app .tabbar .lb { font-size: 10px; font-weight: 700; letter-spacing: .04em; }
.parlor-app .tabbar .ln { width: 18px; height: 2px; border-radius: 1px; background: transparent; }
.parlor-app .tabbar a[aria-current="page"] .ln { background: #e6bf55; }