/* HayBlot browser version: the game's look. Colours are the game's Slate colours (linear) shown as
   the screen shows them: dark green panels #243a33, gold #fae2a2, cream #fff8e7, lobby gold #f6e5b8. */
@font-face { font-family: "DejaVu"; src: url(assets/DejaVuSans.ttf) format("truetype"); font-weight: 100 900; font-display: swap; }
:root {
  --gold: #fae2a2; --cream: #fff8e7; --dark: rgba(36,58,51,.96); --lgold: #f6e5b8; --light: #fdf8eb;
  --ink: rgba(18,43,40,.92); --profile: rgba(29,29,34,.96);
  --frame-bg: rgba(53,36,24,.94); --frame-line: #f5da97; --btn: rgba(77,55,36,.92); --btn-line: #dac290; --btn-red: #ad5042;
  --action: #2c6c5b; --action-hi: #3c8b73;
}
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #050b08; color: var(--cream);
  font: 700 16px/1.25 "DejaVu", "DejaVu Sans", "Noto Sans Armenian", system-ui, sans-serif; -webkit-tap-highlight-color: transparent; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--gold); }

/* ---------- stage */
.viewport { position: fixed; inset: 0; overflow: hidden; }
.backdrop { position: absolute; inset: 0; background: #020604 center / cover no-repeat; }
.stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.abs { position: absolute !important; }
.layer { position: absolute; inset: 0; pointer-events: none; }
.layer > * { pointer-events: auto; }
.layer-trick > *, .layer-pops > * { pointer-events: none; }
.rotate { display: none; }
@media (orientation: portrait) and (max-width: 700px) {
  .rotate { display: flex; position: fixed; inset: 0; z-index: 100; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
    background: rgba(5,11,8,.94); color: var(--gold); font-size: 22px; }
  .rotate div:first-child { font-size: 72px; animation: turn 2s ease-in-out infinite; }
}
@keyframes turn { 0%, 30% { transform: rotate(0); } 60%, 100% { transform: rotate(90deg); } }
.spinner { color: var(--gold); font-size: 22px; }
.spinner.center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }

/* ---------- panels and buttons (HayblotVIP, HayblotProfileStyle) */
.panel { background: var(--dark); border: 1.5px solid var(--gold); border-radius: 14px; color: var(--cream); }
.decorated { background: rgba(39,25,16,.97); border: 2px solid #f5ddaa; border-radius: 24px; padding: 7px; box-shadow: 0 10px 40px rgba(0,0,0,.6); }
.decorated > * { position: relative; }
.decorated::before { content: ""; position: absolute; inset: 7px; border: 1px solid #bca57c; border-radius: 18px; background: rgba(60,42,27,.97); pointer-events: none; }
.decorated { position: relative; }
.frame-panel { background: var(--frame-bg); border: 1.5px solid var(--frame-line); border-radius: 20px; padding: 16px; }
.btn { background: var(--btn); border: 1px solid var(--btn-line); border-radius: 12px; color: var(--gold); padding: 8px 16px; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.btn:hover:not(:disabled) { background: rgba(108,79,52,.96); border-color: #fff0c4; }
.btn:disabled { background: rgba(70,60,50,.7); border-color: rgba(160,148,120,.6); color: rgba(255,248,231,.45); cursor: default; }
.btn.primary { background: var(--btn-red); border-color: var(--frame-line); color: var(--cream); }
.btn.primary:hover:not(:disabled) { background: #c56350; }
.btn:disabled, .btn.primary:disabled { background: rgba(70,60,50,.7); border-color: rgba(160,148,120,.6); color: rgba(255,248,231,.45); cursor: default; }
.btn.small { padding: 4px 12px; font-size: 15px; }
.btn.on { border-color: #fff0c4; background: rgba(140,100,40,.9); }
.btn.big { font-size: 22px; padding: 14px 24px; }
.action { background: var(--action); border: 1px solid var(--gold); border-radius: 10px; color: var(--cream); font-size: 24px; }
.action:hover { background: var(--action-hi); border-width: 2px; }
.action.dark { background: var(--dark); color: var(--gold); }
input, select { background: rgba(0,0,0,.4); border: 1px solid var(--btn-line); border-radius: 12px; color: #fff0c4; padding: 8px 12px; min-width: 0; }
.row { display: flex; gap: 10px; align-items: center; justify-content: center; flex-wrap: wrap; }
.dim { color: #c9bfa4; font-weight: 400; font-size: 15px; }

.modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: rgba(0,0,0,.5); padding: 16px; }
.modal .decorated { min-width: min(420px, 92vw); max-width: 560px; padding: 26px 28px; display: flex; flex-direction: column; gap: 14px; text-align: center; }
.modal h2 { margin: 0; color: var(--gold); font-size: 24px; }
.modal .msg { margin: 0; font-size: 18px; color: var(--cream); white-space: pre-line; }
.modal .label { color: var(--gold); min-width: 90px; }
.modal.veil { background: rgba(0,0,0,.35); }
.toast { position: fixed; left: 50%; bottom: 8%; transform: translateX(-50%); z-index: 70; background: var(--dark); border: 1.5px solid var(--gold);
  border-radius: 14px; padding: 12px 20px; color: var(--cream); max-width: 90vw; text-align: center; animation: toast 2.6s ease forwards; }
@keyframes toast { 0% { opacity: 0; transform: translate(-50%, 10px); } 10%, 85% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; } }

/* ---------- sign in */
.title { object-fit: contain; }
.login { display: flex; flex-direction: column; gap: 16px; justify-content: center; padding: 28px 34px; }
.login h2 { margin: 0; text-align: center; color: var(--gold); }
.login details summary { cursor: pointer; color: var(--gold); text-align: center; }
.login .hint { color: var(--cream); font-weight: 400; font-size: 15px; }
.langbar { display: flex; gap: 6px; justify-content: flex-end; }
.foot { text-align: center; color: var(--cream); font-size: 16px; text-shadow: 0 1px 2px #000; }

/* ---------- lobby (BlotReferenceLobbyUI) */
.profile-panel { background: var(--profile); border: 2px solid var(--lgold); border-radius: 16px; }
.profile-panel.level { display: grid; place-items: center; color: var(--lgold); font-size: 18px; border-radius: 10px; padding: 0; }
.avatar-btn { padding: 0; border: 0; background: none; border-radius: 50%; }
.round { width: 100%; height: 100%; border-radius: 50%; display: block; box-shadow: 0 0 0 3px #c9a45a; }
.tag { display: grid; place-items: center; color: var(--lgold); font-size: 17px; border-radius: 10px; }
.pname { color: var(--light); font-size: 22px; white-space: nowrap; overflow: hidden; }
.xpbar { background: rgba(255,255,255,.12); border-radius: 4px; overflow: hidden; }
.xpbar i { display: block; height: 100%; background: var(--lgold); }
.currency { background: none; border: 0; display: flex; align-items: center; gap: 7px; padding: 0; color: var(--light); font-size: 23px; }
.currency img { width: 54px; height: 54px; object-fit: contain; }
.currency.gold { color: var(--lgold); }
.icon-btn { background: var(--profile); border: 1.5px solid var(--lgold); border-radius: 10px; display: grid; place-items: center; padding: 0; }
.icon-btn:hover { border-width: 2px; background: rgba(33,27,15,.98); }
.icon-btn img { width: 40px; height: 40px; }
.icon-btn.plus { color: var(--lgold); font-size: 29px; line-height: 1; }
.ink-btn { background: rgba(5,18,16,.95); border: 0; color: var(--light); font-size: 20px; border-radius: 4px; }
.rooms-clip { overflow: hidden; }
.rooms-row { display: flex; gap: 22px; transition: transform .35s ease; }
.room-card, .side-card { position: relative; flex: 0 0 360px; width: 360px; height: 390px; padding: 0; border: 0; background: #1a120c; text-align: center; color: var(--light); overflow: hidden; }
.side-card { width: 100%; height: 100%; }
.room-card .photo, .side-card .photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tone { position: absolute; left: 5px; right: 5px; }
.tone.top { top: 5px; padding: 12px 8px; }
.tone.bottom { bottom: 5px; padding: 12px; }
.side-card .tone.top { padding: 10px 9px; }
.side-card .tone.bottom { padding: 7px 12px; display: flex; align-items: center; gap: 10px; text-align: left; font-size: 16px; }
.rname { font-size: 21px; color: var(--light); }
.rlevel { font-size: 16px; color: var(--lgold); margin-top: 8px; letter-spacing: .5px; }
.rto { font-size: 17px; margin-top: 4px; }
.line1, .line2 { display: flex; align-items: center; gap: 6px; }
.line1 { font-size: 20px; } .line1 b { font-size: 22px; }
.line2 { margin-top: 5px; color: var(--lgold); font-size: 18px; } .line2 b { font-size: 22px; }
.grow { flex: 1; text-align: left; }
.chev { color: var(--lgold); font-size: 36px; line-height: .8; margin-left: 8px; }
.chip32 { width: 32px; height: 32px; } .chip24 { width: 24px; height: 24px; }
.pill { position: absolute; left: 50%; bottom: 132px; transform: translateX(-50%); display: flex; align-items: center; gap: 9px; white-space: nowrap;
  background: rgba(30,20,12,.86); border: 1.5px solid #ecd28f; border-radius: 17px; padding: 5px 14px 5px 10px; font-size: 15px; color: #e4ddd0; }
.dot { width: 11px; height: 11px; border-radius: 50%; background: #c4bfb9; display: inline-block; }
.dot.live { background: #9ff3a6; box-shadow: 0 0 0 6px rgba(160,243,166,.25); animation: breathe 2s ease-in-out infinite; }
@keyframes breathe { 50% { box-shadow: 0 0 0 9px rgba(160,243,166,.08); } }
.lock { position: absolute; left: 50%; top: 50%; width: 190px; height: 190px; transform: translate(-50%, -50%); object-fit: contain; }
.vip-ribbon { position: absolute; right: 14px; top: 62px; padding: 4px 12px; font-size: 20px; color: var(--lgold); border-radius: 10px; background: var(--ink); border-color: var(--lgold); }
.frame { position: absolute; inset: 0; border: 20px solid transparent; border-image: url(assets/frame.png) 20 stretch; pointer-events: none; }
.room-card:hover .photo, .side-card:hover .photo { filter: brightness(1.12); }
.arrow { display: grid; place-items: center; font-size: 36px; color: var(--lgold); background: var(--ink); border-color: var(--lgold); border-radius: 10px; padding: 0; }
.navbar { background: var(--ink); }
.nav { background: none; border: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; color: var(--lgold); font-size: 17px; }
.nav img { width: 32px; height: 32px; object-fit: contain; }
.nav:not(.on) { opacity: .92; }

/* ---------- table (BlotOnlineOnlyStatusWidget) */
.lobby-btn { font-size: 24px; }
.status { color: var(--gold); font-size: 17px; text-shadow: 1px 1px 0 #000; white-space: nowrap; overflow: hidden; }
.settings-btn { font-size: 16px; padding: 8px; }
.wallet { color: var(--cream); font-size: 16px; text-align: center; text-shadow: 1px 1px 0 #000; }
.score { padding: 14px; }
.stitle { text-align: center; color: var(--gold); font-size: 15px; font-weight: 400; margin-bottom: 8px; }
.srow { display: flex; align-items: center; margin: 3px 0; }
.srow .grow { font-size: 17px; text-align: center; }
.srow b { font-size: 26px; color: var(--gold); font-weight: 400; }
.srow small { font-size: 14px; margin-left: 5px; font-weight: 400; }
.sbar { height: 5px; margin: 1px 6px 7px; background: rgba(0,0,0,.4); border-radius: 3px; overflow: hidden; }
.sbar i { display: block; height: 100%; }
.sbar.us i { background: #61ddb3; } .sbar.them i { background: var(--gold); }
.contract { display: flex; align-items: center; padding: 6px 8px; }
.contract .badge { position: relative; width: 96px; height: 96px; flex: none; }
.contract .badge img:first-child { width: 96px; height: 96px; }
.contract .badge .suit { position: absolute; left: 23px; top: 23px; }
.cinfo { margin-left: 8px; min-width: 0; }
.cval { font-size: 30px; color: var(--gold); }
.cq { font-size: 17px; color: #ffa286; margin-left: 8px; }
.cname { font-size: 14px; color: var(--cream); white-space: nowrap; overflow: hidden; }
.ctrick { font-size: 13px; color: var(--gold); margin-top: 3px; }

.seat { display: flex; flex-direction: column; align-items: center; }
.seat .avatar { border-radius: 50%; display: block; box-shadow: 0 0 0 3px #b58c42, 0 4px 14px rgba(0,0,0,.6); }
.seat .avatar.ph { display: grid; place-items: center; background: rgba(0,0,0,.35); border: 2px dashed #b58c42; box-shadow: none; color: var(--gold); font-size: 30px; }
.seat.empty { opacity: .65; }
.sname { margin-top: 3px; color: var(--cream); text-shadow: 1px 1px 0 #000; text-align: center; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.sname.turn { color: var(--gold); }
.sdecl { color: var(--gold); text-shadow: 1px 1px 0 #000; text-align: center; margin-top: 2px; }
.ring { transform-origin: center; }
.ring.hurry { filter: hue-rotate(-40deg) saturate(3) brightness(1.1); animation: beat .67s ease-in-out infinite; }
@keyframes beat { 50% { transform: scale(1.05); } }
.firstmark { display: grid; place-items: center; color: var(--gold); padding: 1px 6px; z-index: 2; }
.plaque { display: grid; place-items: center; animation: popin .35s cubic-bezier(.2,1.6,.4,1); }
.plaque .pbg { position: absolute; inset: 0; width: 100%; height: 100%; }
.plaque .ptext { position: relative; display: flex; align-items: center; gap: 6px; text-shadow: 1px 1px 0 #000; }
.plaque .k1 { color: var(--cream); } .plaque .k2 { color: #e7ebf1; } .plaque .k3 { color: #ffcea2; }
@keyframes popin { 0% { transform: scale(.4); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.shown { display: flex; gap: 4px; }
.card.mini { width: 62px; height: 87px; }
.pop { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; animation: pop 1.7s ease forwards; }
.pop img { width: 200px; height: 200px; object-fit: contain; }
.poptext { color: var(--gold); font-size: 26px; text-shadow: 2px 2px 0 #000; margin-top: -26px; }
.pop.burst { animation: popburst 1.7s ease forwards; }
@keyframes pop { 0% { transform: scale(.3); opacity: 0; } 15% { transform: scale(1.08); opacity: 1; } 25% { transform: scale(1); } 70% { opacity: 1; } 100% { opacity: 0; } }
@keyframes popburst { 0% { transform: scale(.3); opacity: 0; } 15% { transform: scale(1.05); opacity: 1; } 70% { opacity: 1; } 100% { transform: scale(1.35); opacity: 0; } }

.card { display: block; width: 100%; height: 100%; border-radius: 6px; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.45); }
.tcard { transform-origin: 50% 50%; transition: transform .58s cubic-bezier(.2,.8,.3,1), opacity .7s; }
.tcard .card { position: relative; box-shadow: 4px 6px 0 rgba(0,0,0,.35); }
.tcard .glow { position: absolute; left: -60px; top: -60px; width: 230px; height: 274px; display: none; }
.tcard.winner .glow { display: block; }
.tcard.collect { transition: transform .7s ease-in, opacity .7s ease-in; opacity: 0; }

.hand { display: flex; justify-content: center; align-items: flex-start; padding-top: 22px; }
.hand.dealt { animation: deal .6s ease-out; }
@keyframes deal { 0% { transform: translateY(70px); opacity: 0; } 100% { transform: none; opacity: 1; } }
.hcard { flex: none; transform-origin: 50% 90%; transform: rotate(var(--rot)) translateY(var(--dy)); transition: transform .15s, filter .15s; }
.hcard.legal { transform: rotate(var(--rot)) translateY(calc(var(--dy) - 22px)); cursor: pointer; }
.hcard.legal:hover { transform: rotate(var(--rot)) translateY(calc(var(--dy) - 32px)); }
.hcard.dim { filter: brightness(.55); }

.waiting { padding: 40px 32px 28px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.wtitle { color: var(--gold); font-size: 20px; }
.wtext { color: var(--cream); font-size: 20px; white-space: pre-line; font-weight: 400; }
.waiting .code { font-size: 18px; letter-spacing: 2px; }

.bazar { display: flex; }
.bazar-inner { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 16px 30px; }
.btitle { color: var(--gold); font-size: 24px; text-align: center; }
.bsub { color: var(--cream); font-size: 17px; text-align: center; font-weight: 400; }
.bazar.small .btitle { font-size: 18px; } .bazar.small .bsub { font-size: 13px; }
.bazar.small .bazar-inner { padding: 10px 16px; gap: 4px; }
.bsuits { display: flex; gap: 10px; }
.bsuit { position: relative; flex: 1; height: 92px; background: var(--frame-bg); border: 1.5px solid var(--frame-line); border-radius: 20px; display: grid; place-items: center; padding: 0; overflow: hidden; }
.bsuit:not(.on) { border-color: #8c8c8c; }
.bsuit .suit { transform: scale(.9); filter: grayscale(.4) brightness(.75); transition: transform .15s; position: relative; }
.bsuit.on .suit { transform: scale(1.1); filter: none; }
.bsuit .glow { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bvalue { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 4px 0; }
.bvalue b { font-size: 44px; color: var(--cream); min-width: 70px; text-align: center; text-shadow: 2px 2px 0 #000; margin-left: 16px; }
.bvalue .suit { margin-right: 16px; }
.btn.round { width: 64px; height: 64px; padding: 0; font-size: 34px; color: var(--gold); }
.bactions { display: flex; gap: 10px; }
.bactions .btn { flex: 1; height: 62px; font-size: 19px; }
.bactions .btn.primary:first-child { flex: 1.2; }
.passbtn { color: #e4e8ee; }
.kaputbtn { color: var(--gold); }
.bquansh { display: flex; align-items: center; justify-content: center; gap: 10px; }
.bquansh .side { flex: 1; display: flex; justify-content: flex-end; }
.bquansh .side .btn { height: 62px; min-width: 120px; font-size: 19px; }
.qbtn { position: relative; padding: 0; border: 0; background: none; display: grid; place-items: center; filter: grayscale(1) brightness(.6); }
.qbtn.live { filter: none; animation: qbeat 1.67s ease-in-out infinite; }
.qbtn img { position: absolute; inset: 0; width: 100%; height: 100%; }
.qbtn span { position: relative; color: var(--cream); font-size: 24px; text-shadow: 2px 2px 0 #000; }
@keyframes qbeat { 50% { transform: scale(1.06); } }
.timebar { height: 8px; margin: 6px 40px 0; background: rgba(0,0,0,.55); border-radius: 4px; overflow: hidden; }
.timebar i { display: block; height: 100%; background: #ffbd81; width: 100%; transition: width .25s linear; }

.dimmer { background: rgba(0,0,0,.45); }
.decl { display: flex; flex-direction: column; align-items: center; gap: 8px; animation: popin .25s ease-out; }
.dq { color: var(--gold); font-size: 25px; text-align: center; }
.darts { display: flex; gap: 12px; }
.darts img { width: 110px; height: 110px; object-fit: contain; }
.dd { color: var(--cream); font-size: 22px; }
.decl .row { width: 100%; }
.decl .action { flex: 1; height: 68px; }

.result { animation: popin .3s ease-out; }
.result .rbg { position: absolute; inset: 0; width: 100%; height: 100%; }
.rbody { position: absolute; left: 96px; right: 96px; top: 78px; bottom: 74px; display: flex; flex-direction: column; justify-content: center; }
.rtitle { text-align: center; color: var(--gold); font-size: 28px; text-shadow: 1px 1px 0 #000; }
.rwinner { text-align: center; font-size: 22px; margin: 2px 0 4px; }
.rwinner.us { color: #8ef2a2; } .rwinner.them { color: #ffa286; }
.rcontract { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 18px; margin-bottom: 8px; font-weight: 400; }
.rcontract .ok { color: #9bf0a6; } .rcontract .bad { color: #ffa286; }
.drow { display: flex; align-items: center; padding: 5px 0; border-radius: 8px; margin: 2px 0; }
.drow.shade { background: rgba(0,0,0,.38); }
.drow .dl { flex: 1.5; padding: 0 14px; font-size: 16px; font-weight: 400; }
.drow .dv { flex: 1; text-align: center; text-shadow: 1px 1px 0 #000; }
.drow .dv.us { color: #9bf2aa; } .drow .dv.them { color: var(--gold); }
.drow.head .dv { font-size: 18px; }
.settle { margin: 8px 10px 0; padding: 8px; color: var(--gold); text-align: center; font-size: 15px; }
.rwallet { text-align: center; font-size: 14px; color: var(--cream); font-weight: 400; margin-top: 4px; }
.rbtn { align-self: center; width: 340px; height: 58px; font-size: 21px; margin-top: 12px; }