/* Royal Reef player lobby — landscape-first, full screen, real game art (img/lobby/*, made with
 * tools/gen-art.sh + tools/make-lobby-art.mjs). */
:root {
  --bg0: #020a16; --bg1: #06203c; --teal: #19d3df; --teal2: #7df5ff; --coral: #ff5f7a; --gold: #f6c343; --gold2: #ffe9a3; --gold3: #b8780c;
  --ink: #eef6ff; --mute: #9db3cc; --line: rgba(125,245,255,.18);
  --frame: linear-gradient(135deg, #fff3b0, #f6c343 25%, #b8780c 50%, #ffe9a3 75%, #c98a12);
  --top: 58px; --strip: 92px; --rail: 76px;
  /* tile frame art: how far the picture sits inside the frame image (fraction of the tile) */
  --fx: 4.6%; --fy: 5.6%;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent }
html, body { margin: 0; height: 100%; overflow: hidden }
body { font-family: Manrope, system-ui, -apple-system, Segoe UI, sans-serif; color: var(--ink); background: #031a33 url(img/lobby/lobby-bg.webp) center / cover no-repeat fixed; -webkit-font-smoothing: antialiased; user-select: none }
[hidden] { display: none !important }
.screen { position: relative; z-index: 1; height: 100dvh; width: 100vw }
img { -webkit-user-drag: none }
/* ---- living water: particles, bubbles, light rays on top of the painted scene ---- */
.sea { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden }
.sea::before { content: ''; position: absolute; inset: 0; background: radial-gradient(60% 50% at 50% 48%, rgba(2,12,28,.55), transparent 70%) }
.star { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #dffcff; box-shadow: 0 0 6px #7df5ff; opacity: .5; animation: tw 3s ease-in-out infinite alternate }
.s1 { left: 8%; top: 20% } .s2 { left: 25%; top: 70%; animation-delay: -1s } .s3 { left: 48%; top: 12%; animation-delay: -2s; width: 2px; height: 2px } .s4 { left: 66%; top: 55%; animation-delay: -.5s } .s5 { left: 85%; top: 25%; animation-delay: -1.5s } .s6 { left: 93%; top: 80%; animation-delay: -2.5s; width: 2px; height: 2px }
@keyframes tw { from { opacity: .15; transform: scale(.8) } to { opacity: .9; transform: scale(1.4) } }
.bub { position: absolute; bottom: -30px; width: 9px; height: 9px; border-radius: 50%; border: 1px solid rgba(125,245,255,.45); background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.5), rgba(125,245,255,.05)); opacity: .6; animation: rise 16s linear infinite }
.b1 { left: 10% } .b2 { left: 28%; width: 5px; height: 5px; animation-delay: -6s } .b3 { left: 45%; animation-delay: -12s; width: 13px; height: 13px } .b4 { left: 62%; animation-delay: -3s } .b5 { left: 78%; width: 6px; height: 6px; animation-delay: -9s } .b6 { left: 92%; animation-delay: -15s }
@keyframes rise { to { transform: translateY(-110vh) translateX(18px); opacity: 0 } }
.ray { position: absolute; top: -20%; width: 14vw; height: 140%; background: linear-gradient(180deg, rgba(160,245,255,.14), transparent 70%); transform: skewX(-16deg); filter: blur(18px); animation: sway 9s ease-in-out infinite alternate; mix-blend-mode: screen }
.r1 { left: 24% } .r2 { left: 62%; animation-delay: -5s; opacity: .7 }
@keyframes sway { from { transform: skewX(-16deg) translateX(-3vw) } to { transform: skewX(-10deg) translateX(3vw) } }

/* ---- shared ---- */
.gbtn { font: inherit; font-weight: 800; letter-spacing: .06em; border: 0; border-radius: 12px; padding: 13px 22px; cursor: pointer; color: #2a1a00; background: linear-gradient(180deg, var(--gold2), var(--gold) 55%, var(--gold3)); box-shadow: 0 8px 22px rgba(246,195,67,.35), inset 0 1px 0 #fff8; transition: transform .1s, filter .15s }
.gbtn:active { transform: scale(.97) } .gbtn:hover { filter: brightness(1.06) } .gbtn:disabled { opacity: .5; cursor: default }
.gbtn.ghost { background: rgba(125,245,255,.1); color: var(--ink); border: 1px solid var(--line); box-shadow: none } .gbtn.sm { padding: 9px 16px; font-size: 13px }
.glabel { font-family: Cinzel, serif; font-weight: 900; letter-spacing: .06em; color: var(--gold2); text-shadow: 0 1px 0 #6b4300, 0 0 10px rgba(246,195,67,.6), 0 2px 4px #000 }

/* ---- login ---- */
#login { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 20px; overflow: auto }
/* sideways phone / any wide screen: logo beside the form, everything sized by the screen height → no scrolling */
@media (orientation: landscape) {
  #login { flex-direction: row; gap: 5vw; padding: 2vh 4vw; overflow: hidden }
  #login .biglogo { width: min(44vw, 120vh, 560px) }
  #login .logincard { width: min(46vw, 400px); padding: clamp(10px, 3.4vh, 22px) 22px; gap: clamp(5px, 1.8vh, 12px) }
  #login label { gap: clamp(3px, 1vh, 6px) }
  #login input { padding: clamp(7px, 2.4vh, 12px) 14px }
  #login .gbtn { padding: clamp(8px, 2.8vh, 13px) 22px }
  #login .err:empty { display: none }
}
.biglogo { width: min(78vw, 360px); height: auto; filter: drop-shadow(0 10px 30px rgba(0,0,0,.7)) drop-shadow(0 0 24px rgba(25,211,223,.35)) }
.logincard { width: min(100%, 380px); background: linear-gradient(180deg, rgba(8,30,58,.9), rgba(3,14,30,.94)); border: 1px solid rgba(246,195,67,.45); border-radius: 20px; padding: 22px; display: flex; flex-direction: column; gap: 12px; backdrop-filter: blur(12px); box-shadow: 0 20px 50px rgba(0,0,0,.6), inset 0 0 30px rgba(25,211,223,.08), 0 0 0 1px rgba(125,245,255,.15) }
label { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--mute); letter-spacing: .03em }
input { font: inherit; font-weight: 700; color: var(--ink); background: rgba(2,10,22,.75); border: 1px solid rgba(125,245,255,.25); border-radius: 11px; padding: 12px 14px; outline: none; width: 100%; user-select: text }
input:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(25,211,223,.2) }
.err { color: #ff8a9a; min-height: 1.2em; margin: 0; font-size: 13px; font-weight: 700 } .hint { color: var(--mute); font-size: 12.5px; margin: 0; text-align: center }

/* ---- lobby layout ---- */
#lobby { display: grid; grid-template-rows: var(--top) 1fr var(--strip); grid-template-columns: 100%; position: fixed; top: 0; left: 0; width: 1280px; height: 720px; transform-origin: 0 0 }
#rotate { display: none !important }

/* top bar: metallic frame with the ornate logo plate hanging over it */
.top { position: relative; z-index: 5; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 12px; padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right));
  background: linear-gradient(180deg, rgba(6,26,52,.92), rgba(3,12,28,.9)); border-bottom: 2px solid #b8780c; box-shadow: 0 2px 0 #ffe9a3, 0 8px 26px rgba(0,0,0,.6), inset 0 -1px 0 rgba(255,233,163,.25), inset 0 1px 0 rgba(125,245,255,.25) }
.top::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 100%; background: url(img/lobby/filigree.webp) center bottom / auto 100% repeat-x; opacity: .16; pointer-events: none }
.who { display: flex; align-items: center; gap: 8px; justify-self: start; z-index: 2 }
.avatar { position: relative; width: 50px; height: 50px; display: grid; place-items: center; font-family: Cinzel, serif; font-weight: 900; font-size: 20px; color: #fff; text-shadow: 0 1px 2px #000 }
.avatar::before { content: ''; position: absolute; inset: 7px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #3d9be6, #0a2a55 70%); box-shadow: inset 0 0 10px rgba(0,0,0,.6) }
.avatar span { position: relative; z-index: 1 } .avatar .ring { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 0 6px rgba(246,195,67,.5)) }
.gid { font-size: 12px; font-weight: 800; color: #fff; background: linear-gradient(180deg, rgba(2,10,22,.9), rgba(6,24,46,.9)); border: 1px solid rgba(246,195,67,.6); border-radius: 999px; padding: 3px 10px; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; box-shadow: inset 0 0 8px rgba(0,0,0,.6), 0 0 8px rgba(246,195,67,.2) }
.balance { position: absolute; left: 150px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 16px 0 6px; border-radius: 999px; background: linear-gradient(180deg, #06162c, #020a18); border: 2px solid #c9921c; box-shadow: inset 0 0 10px rgba(0,0,0,.8), 0 0 0 1px #5a3a00, 0 0 12px rgba(246,195,67,.3); color: #fff; font: inherit; font-weight: 900; cursor: pointer; z-index: 2 }
.balance b { font-size: 16px; font-variant-numeric: tabular-nums; color: var(--gold2); text-shadow: 0 0 8px rgba(246,195,67,.6) }
.balance.held { border-color: var(--teal) } .balance.held b { color: var(--teal2) }
.balance .coin { width: 34px; height: 34px; margin: -4px -2px -4px -8px; filter: drop-shadow(0 2px 4px rgba(0,0,0,.6)) }
.logo { justify-self: center; align-self: start; position: relative; z-index: 3; margin-top: 2px; pointer-events: none }
.logo img { height: calc(var(--top) + 28px); width: auto; filter: drop-shadow(0 8px 16px rgba(0,0,0,.7)) drop-shadow(0 0 18px rgba(25,211,223,.35)) }
.menuwrap { justify-self: end; position: relative; z-index: 2 }
.menubtn { width: 50px; height: 50px; padding: 0; border: 0; background: none; cursor: pointer; filter: drop-shadow(0 3px 6px rgba(0,0,0,.6)) } .menubtn img { width: 100%; height: 100%; object-fit: contain } .menubtn:active { transform: scale(.94) }
.menu { position: absolute; right: 0; top: 56px; width: 230px; background: linear-gradient(180deg, #0c2a4e, #061a34); border: 1px solid rgba(246,195,67,.5); border-radius: 14px; box-shadow: 0 20px 50px rgba(0,0,0,.7); padding: 8px; display: flex; flex-direction: column; gap: 2px; z-index: 20 }
.menu .me { padding: 8px 12px; border-bottom: 1px solid var(--line); margin-bottom: 4px; display: flex; flex-direction: column } .menu .me small { color: var(--mute) }
.menu button { font: inherit; font-weight: 700; text-align: left; background: none; border: 0; color: var(--ink); padding: 10px 12px; border-radius: 10px; cursor: pointer } .menu button:hover { background: rgba(125,245,255,.1) } .menu button.danger { color: #ff9b86 }
.status { position: absolute; left: 50%; top: calc(var(--top) + 28px); transform: translateX(-50%); z-index: 6; display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 12px; background: rgba(5,22,44,.94); border: 1px solid rgba(25,211,223,.5); font-weight: 700; font-size: 13px; white-space: nowrap; max-width: calc(100% - 24px) }
.status .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--teal2); box-shadow: 0 0 10px var(--teal2); animation: pulse 1.2s infinite alternate } @keyframes pulse { to { opacity: .35 } }
.link { background: none; border: 0; color: var(--gold2); font: inherit; font-weight: 800; cursor: pointer; text-decoration: underline; text-underline-offset: 3px }

/* body: ornate rail + the game stage */
.body { display: grid; grid-template-columns: var(--rail) 1fr; min-height: 0; padding: 22px 6px 0 max(10px, env(safe-area-inset-left)); gap: 4px }
.rail { display: flex; flex-direction: column; justify-content: center; gap: 3px; align-self: center; padding: 6px 4px; border-radius: 14px;
  background: linear-gradient(180deg, rgba(8,34,64,.92), rgba(3,14,30,.94)); border: 2px solid #c9921c; box-shadow: 0 0 0 1px #4a2f00, inset 0 0 0 1px rgba(255,233,163,.35), inset 0 0 22px rgba(25,211,223,.14), 0 10px 28px rgba(0,0,0,.6) }
.rail button { font-family: Cinzel, serif; font-weight: 900; font-size: 8.5px; letter-spacing: .04em; color: #dcecff; background: none; border: 0; border-radius: 10px; padding: 4px 2px 3px; display: flex; flex-direction: column; align-items: center; gap: 1px; cursor: pointer; transition: background .15s, color .15s, transform .1s; text-shadow: 0 1px 2px #000 }
.rail button img { width: 30px; height: 30px; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0,0,0,.6)); transition: transform .15s }
.rail button:active { transform: scale(.95) }
.rail button.on { color: #2a1a00; text-shadow: 0 1px 0 rgba(255,255,255,.5); background: linear-gradient(180deg, var(--gold2), var(--gold) 55%, var(--gold3)); box-shadow: 0 0 0 1px #5a3a00, inset 0 1px 0 #fff9, 0 4px 14px rgba(246,195,67,.5) } .rail button.on img { transform: scale(1.1) }
.stage { position: relative; min-height: 0; display: grid; grid-template-columns: 40px 1fr 40px; grid-template-rows: 1fr 12px; align-items: center }
.arrow { background: none; border: 0; cursor: pointer; width: 40px; height: 64px; padding: 0; display: grid; place-items: center; transition: opacity .2s, transform .1s } .arrow img { width: 34px; height: auto; filter: drop-shadow(0 0 10px rgba(125,245,255,.7)); animation: beat 1.6s ease-in-out infinite }
.arrow.left img { transform: scaleX(-1) } .arrow:disabled { opacity: .18; cursor: default } .arrow:disabled img { animation: none } .arrow:active:not(:disabled) { transform: scale(.92) }
@keyframes beat { 50% { filter: drop-shadow(0 0 18px rgba(125,245,255,1)) } }
.gridwrap { height: 100%; min-height: 0; overflow: hidden; touch-action: pan-y; display: flex; align-items: center; justify-content: center }
.grid { height: 100%; max-height: 100%; aspect-ratio: 4 * 1.25 / 2; max-width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 1fr); gap: 6px 8px; padding: 2px 2px; transition: transform .25s, opacity .25s; margin: 0 auto }
.grid.anim { opacity: 0; transform: translateX(var(--dir, 30px)) }
.dots { grid-column: 1 / -1; display: flex; justify-content: center; gap: 6px; height: 12px; align-items: center }
.dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(125,245,255,.3); transition: width .2s, background .2s } .dots i.on { width: 22px; border-radius: 4px; background: var(--gold); box-shadow: 0 0 8px rgba(246,195,67,.8) }
.tile { position: relative; min-height: 0; min-width: 0; aspect-ratio: 5 / 4; padding: 0; background: none; cursor: pointer; border: 0; font: inherit; color: var(--ink); text-align: left; transition: transform .12s, filter .15s; filter: drop-shadow(0 8px 14px rgba(0,0,0,.6)) }
.tile:hover { transform: translateY(-2px) scale(1.03); filter: drop-shadow(0 10px 18px rgba(0,0,0,.7)) drop-shadow(0 0 14px rgba(246,195,67,.45)) } .tile:active { transform: scale(.97) }
.tile .inner { position: absolute; inset: 0 }
.tile .pic { position: absolute; left: var(--fx); right: var(--fx); top: var(--fy); bottom: var(--fy); overflow: hidden; background: #071a33; border-radius: 3px }
.tile .pic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; display: block }
.tile .frame { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; pointer-events: none; z-index: 1 }
.tile .heart { position: absolute; top: calc(var(--fy) + 3px); right: calc(var(--fx) + 3px); width: 26px; height: 26px; border-radius: 50%; border: 2px solid #e9b64a; background: radial-gradient(circle at 35% 30%, #1f4d80, #061a34); color: #cfe3f5; display: grid; place-items: center; font-size: 13px; cursor: pointer; z-index: 2; box-shadow: 0 2px 6px rgba(0,0,0,.6) } .tile .heart.on { color: #ff3b5c; text-shadow: 0 0 8px #ff3b5c }
.ribbon { position: absolute; top: 8px; left: -26px; width: 92px; transform: rotate(-45deg); text-align: center; font-size: 10px; font-weight: 900; letter-spacing: .1em; padding: 3px 0; color: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.5); z-index: 2; text-shadow: 0 1px 1px #000 }
.ribbon.hot { background: linear-gradient(90deg, #ff2d55, #ff7a3d) } .ribbon.new { background: linear-gradient(90deg, #16a34a, #86efac); color: #06320f; text-shadow: none }
.gempty { grid-column: 1 / -1; grid-row: 1 / -1; display: grid; place-items: center; color: var(--mute); font-weight: 700; text-align: center }

/* bottom strip: glossy 3D icons, jackpot sign, mascot */
.strip { height: var(--strip); display: grid; grid-template-columns: 1fr auto 1fr; grid-template-rows: 100%; align-items: end; padding: 0 16px 6px; padding-bottom: max(6px, env(safe-area-inset-bottom)); gap: 10px; position: relative; z-index: 4 }
.strip .left { justify-self: start; display: flex; gap: 18px; align-items: end } .strip .right { justify-self: end; display: flex; gap: 10px; align-items: end }
.sbtn { font-family: Cinzel, serif; font-weight: 900; font-size: 10.5px; letter-spacing: .05em; color: var(--gold2); background: none; border: 0; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 0; cursor: pointer; text-shadow: 0 1px 0 #6b4300, 0 0 10px rgba(246,195,67,.5), 0 2px 4px #000; white-space: nowrap } .sbtn:active { transform: scale(.95) }
.sbtn.off { filter: grayscale(1) brightness(.6); cursor: default }
.ico { display: block; width: 56px; height: 56px; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(0,0,0,.6)) }
.ico.wheelico { width: 74px; height: 74px; margin-bottom: -4px; animation: wob 3s ease-in-out infinite } @keyframes wob { 0%, 100% { transform: rotate(-4deg) } 50% { transform: rotate(4deg) } }
.sbtn.off .ico.wheelico { animation: none }
.ico.bagico { width: 64px; height: 64px; margin-bottom: -2px }
.sbtn.bag.active .ico.bagico { animation: bounce 1.4s ease-in-out infinite } @keyframes bounce { 50% { transform: translateY(-6px) } }
.mascot { width: 84px; height: auto; margin-bottom: -4px; filter: drop-shadow(0 6px 10px rgba(0,0,0,.6)); animation: swim 3.4s ease-in-out infinite } @keyframes swim { 50% { transform: translateY(-5px) rotate(-3deg) } }
.jackpot { justify-self: center; position: relative; height: calc(var(--strip) + 16px); margin-bottom: -6px; filter: drop-shadow(0 6px 14px rgba(0,0,0,.65)); animation: jpglow 2.4s ease-in-out infinite }
.jackpot > img { height: 100%; width: auto; display: block }
@keyframes jpglow { 50% { filter: drop-shadow(0 6px 14px rgba(0,0,0,.65)) drop-shadow(0 0 14px rgba(246,195,67,.55)) } }
.jp-plate { position: absolute; left: 15.5%; right: 14.5%; top: 59%; bottom: 9.5%; border-radius: 999px; background: linear-gradient(180deg, rgba(10,28,56,.92), rgba(2,8,20,.96)); box-shadow: inset 0 2px 8px rgba(0,0,0,.8), inset 0 -1px 0 rgba(125,245,255,.15); display: flex; align-items: center; justify-content: center; gap: .3em; font-weight: 900; font-variant-numeric: tabular-nums; white-space: nowrap; font-size: calc(var(--strip) * .15) }
.jp-plate span { display: none; font-family: Cinzel, serif; font-size: .55em; letter-spacing: .08em; color: var(--teal2); text-shadow: 0 0 8px rgba(125,245,255,.8) }
.jp-plate b { font-size: 1em; color: #fff5c2; text-shadow: 0 0 10px rgba(246,195,67,.9), 0 1px 2px #000 }

/* ---- modals ---- */
.modal { position: fixed; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(2,6,14,.72); backdrop-filter: blur(6px) }
.card { width: min(100%, 420px); background: linear-gradient(180deg, rgba(8,30,58,.97), rgba(3,14,30,.98)); border: 1px solid rgba(246,195,67,.5); border-radius: 20px; padding: 22px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 20px 50px rgba(0,0,0,.7), inset 0 0 30px rgba(25,211,223,.06); max-height: 94dvh; overflow: auto }
.card h3 { margin: 0; font-family: Cinzel, serif; font-size: 18px; text-align: center; letter-spacing: .06em; color: var(--gold2) } .card p { margin: 0; color: var(--mute); font-weight: 600; font-size: 13.5px; line-height: 1.45 }
.row { display: flex; gap: 10px } .row .gbtn { flex: 1 }
.prog { height: 10px; border-radius: 6px; background: rgba(125,245,255,.15); overflow: hidden } .prog i { display: block; height: 100%; background: linear-gradient(90deg, var(--teal), var(--gold)); border-radius: 6px }
.kv { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; font-size: 13.5px; font-weight: 700; color: var(--mute) } .kv b { color: #fff } .pos { color: #7cf29a }
.wheelcard { align-items: center } .wheelbox { position: relative; width: 240px; height: 240px }
#wheelSvg { width: 100%; height: 100%; transition: transform 4.2s cubic-bezier(.17,.67,.12,1); filter: drop-shadow(0 0 16px rgba(246,195,67,.5)) }
.pointer { position: absolute; top: -6px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 22px solid #ff4f6d; z-index: 2; filter: drop-shadow(0 2px 3px rgba(0,0,0,.5)) }
.spin { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 64px; height: 64px; border-radius: 50%; border: 3px solid #7a4c00; background: radial-gradient(circle at 35% 30%, #fff3b0, #f6c343 50%, #b8780c); font: inherit; font-weight: 900; color: #4a2c00; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.5) } .spin:disabled { filter: grayscale(.6); cursor: default }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 40; background: #0d2a4a; border: 1px solid rgba(246,195,67,.5); color: var(--ink); padding: 11px 18px; border-radius: 12px; font-weight: 700; box-shadow: 0 20px 50px rgba(0,0,0,.6); max-width: calc(100% - 32px); text-align: center; font-size: 13.5px }
.toast.bad { border-color: rgba(255,95,122,.6); background: #3a0f1c }
.veil { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; background: rgba(2,10,22,.88); font-weight: 800; font-size: 16px }
.veil .spin { position: static; transform: none; width: 54px; height: 54px; border-radius: 50%; border: 4px solid rgba(125,245,255,.2); border-top-color: var(--gold); background: none; animation: rot .9s linear infinite; box-shadow: none } @keyframes rot { to { transform: rotate(360deg) } }
.rotate { position: fixed; inset: 0; z-index: 25; display: flex; align-items: center; justify-content: center; background: rgba(2,10,22,.94); text-align: center }
.rotate > div { display: flex; flex-direction: column; align-items: center; gap: 10px } .rotate b { font-size: 20px } .rotate small { color: var(--mute); font-weight: 700 }
.rotate .phone { width: 38px; height: 68px; border: 3px solid var(--teal2); border-radius: 8px; animation: turn 1.6s ease-in-out infinite alternate; margin-bottom: 8px } @keyframes turn { to { transform: rotate(90deg) } }

/* ---- bigger screens ---- */
/* the lobby is a fixed 720px-tall stage scaled to the screen (lobby.js fit), so these sizes always apply */
@media all {
  :root { --top: 76px; --strip: 120px; --rail: 96px }
  .rail { gap: 6px; padding: 8px 6px } .rail button { font-size: 10.5px; padding: 6px 3px } .rail button img { width: 40px; height: 40px }
  .avatar { width: 62px; height: 62px; font-size: 24px } .gid { font-size: 13px } .balance { height: 36px } .balance b { font-size: 19px } .balance .coin { width: 42px; height: 42px }
  .menubtn { width: 60px; height: 60px } .menu { top: 66px } .logo img { height: calc(var(--top) + 34px) } .body { padding-top: 34px }
  .body { padding-top: 26px } .grid { gap: 12px 16px } .stage { grid-template-columns: 56px 1fr 56px } .arrow { width: 56px; height: 90px } .arrow img { width: 48px }
  .jackpot { height: calc(var(--strip) + 22px) } .jp-plate span { display: inline } .jp-plate { font-size: calc(var(--strip) * .2) }
  .ico { width: 72px; height: 72px } .ico.wheelico { width: 100px; height: 100px } .ico.bagico { width: 84px; height: 84px } .mascot { width: 118px } .sbtn { font-size: 13px } .strip .left { gap: 26px } .strip .right { gap: 16px }
}

/* top-left player block: avatar | (Game ID over the balance bar) — one aligned group, no stray pills */
.who { gap: 12px; padding-left: 4px }
.whoinfo { display: flex; flex-direction: column; align-items: flex-start; gap: 4px }
.gid { background: none; border: 0; box-shadow: none; padding: 0 0 0 4px; font-family: Cinzel, serif; font-size: 13px; font-weight: 900; letter-spacing: .08em; color: var(--gold2); text-shadow: 0 1px 2px #000; max-width: 220px }
.who .balance { position: static; transform: none; min-width: 168px; justify-content: flex-start }
.who .avatar { width: 70px; height: 70px; font-size: 26px }
.tile[data-game=keno] .pic img, .tile[data-game=jade] .pic img { object-position: 50% 0 }
/* clean top bar: smooth dark metal with a soft sheen and the gold edge — no pattern */
.top::before { display: none }
.top { background: linear-gradient(180deg, #13304f 0%, #0a1f39 38%, #06142a 70%, #040d1d 100%) }
.top::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 45%; background: linear-gradient(180deg, rgba(160,220,255,.10), rgba(160,220,255,0)); pointer-events: none }
/* no top bar: logo, player block and menu float on the scene (a soft shade keeps them readable) */
.top { background: linear-gradient(180deg, rgba(2,10,22,.55), rgba(2,10,22,0)) !important; border: 0 !important; box-shadow: none !important }
.top::after { display: none }
/* player avatar: a real portrait inside the gold ring */
.avatar::before { display: none }
.avatar .face { position: absolute; inset: 9%; width: 82%; height: 82%; border-radius: 50%; object-fit: cover; box-shadow: inset 0 0 8px rgba(0,0,0,.6) }
.avatar .ring { z-index: 2 }
.who .avatar { width: 88px; height: 88px; margin-top: 6px } .who { gap: 10px }
/* nothing may poke out past the screen edge: some in-app browsers (Telegram, Facebook) zoom the whole page out
   to fit anything wider than the screen, which made the login look tiny */
html, body { max-width: 100%; overflow-x: hidden }
.sea { contain: strict }
.ray { width: 12vw } .r2 { left: 52% }
/* login card: Royal Reef game style (gold-edged dark glass, gold title, glowing fields) */
.logincard { position: relative; border: 0; border-radius: 22px; background:
    linear-gradient(180deg, rgba(10,30,58,.88), rgba(3,12,28,.94)) padding-box,
    linear-gradient(160deg, #fff1b8, #f6c343 22%, #8a5a0a 50%, #f6c343 78%, #fff1b8) border-box;
  border: 2px solid transparent; box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 18px 50px rgba(0,0,0,.7), 0 0 40px rgba(25,211,223,.18), inset 0 0 30px rgba(25,211,223,.08) }
.lc-title { margin: 0 0 4px; text-align: center; font-family: Cinzel, serif; font-weight: 900; font-size: 18px; letter-spacing: .14em; color: var(--gold2); text-shadow: 0 1px 0 #6b4300, 0 0 12px rgba(246,195,67,.55) }
.logincard input { background: rgba(1,8,18,.85); border: 1px solid rgba(246,195,67,.35); box-shadow: inset 0 2px 6px rgba(0,0,0,.6) }
.logincard input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(246,195,67,.18), inset 0 2px 6px rgba(0,0,0,.6) }
.logincard label { color: #cfe3f7; letter-spacing: .06em; text-transform: uppercase; font-size: 11.5px }
.logincard .gbtn { font-family: Cinzel, serif; font-size: 17px; letter-spacing: .16em; box-shadow: 0 6px 18px rgba(246,160,40,.45), inset 0 1px 0 #fff8 }
@media (orientation: portrait) { #login .biglogo { width: min(92vw, 520px) } #login .logincard { width: min(92vw, 420px) } }
@media (orientation: landscape) { .lc-title { font-size: clamp(13px, 3.6vh, 18px); margin: 0 } }
/* Royal Reef medallion icons (Scenario set): a little bigger, and a navy "on" state so the gold medallion stands out */
.rail button img { width: 46px !important; height: 46px !important }
.rail button.on { background: radial-gradient(circle at 50% 40%, rgba(25,211,223,.28), rgba(6,24,48,.95) 70%) !important; color: var(--gold2) !important; text-shadow: 0 1px 2px #000 !important; box-shadow: 0 0 0 1.5px #f6c343, 0 0 14px rgba(246,195,67,.45) !important }
.mascot { display: none !important } /* cartoon mascot retired: nothing cute next to the medallion set */
/* Royal Reef medallion set, part 2 (Scenario): thin gold tile frame with ruby corners, gold chevron medallion arrows,
   gold-edged HOT / NEW ribbons, ruby-heart favourite buttons, ruby coin */
.arrow img { width: 50px !important; filter: drop-shadow(0 3px 6px rgba(0,0,0,.7)) drop-shadow(0 0 8px rgba(246,195,67,.35)) }
@keyframes beat { 50% { filter: drop-shadow(0 3px 6px rgba(0,0,0,.7)) drop-shadow(0 0 14px rgba(246,195,67,.75)) } }
.arrow:disabled { opacity: .22 }
.tile .heart { width: 30px; height: 30px; top: calc(var(--fy) + 4px); right: calc(var(--fx) + 4px); font-size: 0; border: 0; box-shadow: none; background: url(img/lobby/heart-off.webp) center / 100% 100% no-repeat; filter: drop-shadow(0 2px 4px rgba(0,0,0,.7)) }
.tile .heart.on { background-image: url(img/lobby/heart-on.webp); filter: drop-shadow(0 2px 4px rgba(0,0,0,.7)) drop-shadow(0 0 7px rgba(255,60,90,.65)) }
.tile .pic img.ribbon { top: 11px; left: -31px; width: 110px; height: auto; object-fit: contain; padding: 0; background: none; box-shadow: none; filter: drop-shadow(0 2px 4px rgba(0,0,0,.6)) }
/* jackpot label change: a quick gold flash on the number plate */
@keyframes jpflip { 0% { filter: brightness(1.8) } 100% { filter: none } }
.jackpot.jpflip .jp-plate { animation: jpflip .7s ease-out }