:root { color-scheme:dark; --gold:#f5d67d; --line:#765236; --muted:#d7c4c4; --green:#f5d67d; --red:#ffb3ad; font-family:Arial,Helvetica,sans-serif; }
* { box-sizing:border-box; letter-spacing:0; }
[hidden] { display:none !important; }
body { margin:0; min-width:280px; min-height:100dvh; color:#fff6df; background:#250912 url('assets/home-fabric.jpg') center top / cover fixed; }
button,input,a { -webkit-tap-highlight-color:transparent; }
button,input { font:inherit; }
button,a { touch-action:manipulation; }
button,a,input { outline-offset:5px; }
:focus-visible { outline:3px solid #fff1b5; }
button { cursor:pointer; }
button:disabled { opacity:.6; cursor:wait; }
a { color:inherit; }
.profile-band { background:#320812ee; border-bottom:1px solid #a77b3b; box-shadow:0 5px 28px #10000590; padding:20px 28px; padding-top:max(20px,env(safe-area-inset-top)); }
.profile-inner { max-width:1040px; margin:auto; display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.player-identity { display:flex; align-items:center; gap:15px; min-width:0; flex:1; }
.avatar { width:68px; height:68px; flex:none; display:grid; place-items:center; position:relative; border:2px solid #bd9655; border-radius:8px; background:#591b29; box-shadow:inset 0 0 0 3px #250912; overflow:hidden; }
.avatar span { font:700 32px Georgia,serif; color:var(--gold); }
.avatar img { position:absolute; width:100%; height:100%; object-fit:cover; }
.player-details { min-width:0; display:grid; gap:6px; }
.profile-label { color:#cfa887; font-size:11px; font-weight:700; }
#player-name { font-size:22px; overflow-wrap:anywhere; }
#auth-user { display:none; }
.profile-actions { display:flex; align-items:center; gap:12px; }
.balance { min-width:130px; max-width:240px; display:flex; align-items:center; gap:12px; padding:8px 18px 8px 9px; text-decoration:none; background:#22060c; border:2px solid #d5ac57; border-radius:8px; box-shadow:0 0 0 3px #100207,inset 0 0 12px #703b2133; }
.coin { width:39px; height:39px; border-radius:50%; display:grid; place-items:center; background:linear-gradient(135deg,#fff1ac,#dba528); border:3px double #9e651b; color:#724412; font:bold 23px Georgia,serif; box-shadow:0 2px 5px #0008; flex:none; }
.balance small { font-size:10px; display:block; color:#e0b765; margin-bottom:2px; }
.balance strong { color:var(--gold); font-size:24px; overflow-wrap:anywhere; }
.icon-button { width:44px; height:44px; display:grid; place-items:center; border:1px solid #916d49; background:#4b202a; color:#ffe4a1; border-radius:6px; padding:10px; flex:none; }
.icon-button svg { width:22px; height:22px; }
.profile-band .auth-options { gap:10px; }
.profile-band .auth-options button { font-size:14px; }
.home-menu { max-width:650px; padding:40px 26px 22px; margin:0 auto; }
.game-brand { text-align:center; padding:0 0 32px; }
.brand-crown { width:54px; height:43px; color:#f3ca62; fill:#bd721433; filter:drop-shadow(0 3px 3px #180209); stroke-width:1.5; }
h1 { color:#ffe39b; margin:7px 0 17px; font:700 54px Georgia,'Times New Roman',serif; line-height:1.08; text-shadow:0 3px 0 #6c361c,0 6px 16px #0c0005; }
h1 span { font-size:34px; color:#dfb555; font-weight:400; }
.brand-rule { display:flex; align-items:center; justify-content:center; gap:12px; color:#c39950; }
.brand-rule span { width:76px; height:1px; background:#b48b48; }
.brand-rule b { font-size:12px; }
.game-options { display:grid; gap:18px; }
.menu-heading { display:grid; grid-template-columns:44px minmax(0,1fr) 44px; align-items:center; gap:12px; margin-bottom:18px; }
.menu-heading a { text-decoration:none; }
.menu-heading h2 { margin:0; font-size:24px; color:#ffe39b; text-align:center; line-height:1.25; }
.menu-heading h2:focus { outline:none; }
.game-button { position:relative; width:100%; min-height:112px; display:grid; grid-template-columns:116px minmax(0,1fr) 24px; align-items:center; gap:12px; padding:12px 20px 12px 15px; text-decoration:none; border:3px solid #dfba62; border-radius:8px; box-shadow:inset 0 0 0 2px #f8dfa333,inset 0 -12px 28px #0006,0 6px 15px #14000790; color:#ffe8a0; background:var(--button-bg); transition:transform .18s,border-color .18s,filter .18s; text-align:left; overflow:hidden; isolation:isolate; }
.game-button::before { content:''; position:absolute; inset:0; z-index:-1; background-image:url('assets/home-fabric.jpg'); background-size:350px; opacity:.12; mix-blend-mode:luminosity; }
.game-button.online { --button-bg:#8c1345; }
.game-button.private { --button-bg:#18583f; }
.game-button.hokm { --button-bg:#244b78; }
.game-button.pasoor { --button-bg:#684078; }
.game-button:hover { transform:translateY(-2px); filter:brightness(1.12); border-color:#fff0af; }
.game-button:active { transform:translateY(1px); }
.button-title { font-size:30px; font-weight:800; line-height:1.15; text-shadow:0 2px 2px #000b; overflow-wrap:anywhere; }
.button-title span { display:block; font-size:25px; margin-top:3px; }
.button-arrow { width:24px; height:24px; stroke-width:2; }
.button-art { position:relative; display:block; width:108px; height:82px; }
.card-fan img { position:absolute; width:48px; height:68px; object-fit:contain; top:5px; left:15px; transform:rotate(-18deg); filter:drop-shadow(0 4px 3px #0007); }
.card-fan img:nth-child(2) { left:45px; top:3px; transform:rotate(13deg); }
.card-fan svg { position:absolute; width:35px; height:35px; right:1px; bottom:0; padding:6px; color:#ffe6a0; border:1px solid #dfb55f; border-radius:50%; background:#36131c; box-shadow:0 3px 6px #0008; }
.account-status { margin:18px 0 0; text-align:center; font-size:14px; color:#efd9ba; line-height:1.5; }
.account-status:empty { display:none; }
.home-footer { padding:26px 0 0; display:flex; justify-content:center; gap:16px; color:#bf9691; font-size:12px; }
.home-footer span { color:#d8b065; }
dialog { background:#30131c; color:#fff6df; border:1px solid #a68147; border-radius:8px; box-shadow:0 20px 70px #000b; padding:26px; width:min(440px,calc(100% - 28px)); max-height:calc(100dvh - 28px); }
dialog::backdrop { background:#08030bdd; }
.dialog-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.dialog-heading h2 { margin:0; font-size:25px; }
.primary,.secondary { min-height:50px; border-radius:6px; font-weight:700; padding:12px 18px; border:1px solid #c5a15f; text-decoration:none; }
.primary { background:#f2d286; color:#311221; }
.secondary { background:#502332; color:#ffedbc; }
.text-button { border:0; background:transparent; color:#e7c485; padding:8px 0; text-align:left; }
label { display:grid; gap:8px; font-size:15px; color:#f4dfd9; }
input { min-width:0; width:100%; border:1px solid #906b64; background:#200c14; color:#fff; border-radius:6px; padding:12px; }
.private-choices { display:grid; gap:14px; margin-top:28px; }
.private-choices a { display:flex; align-items:center; justify-content:center; gap:12px; min-height:64px; font-size:19px; }
.private-choices svg { width:24px; height:24px; }
.script-notice { padding:20px; text-align:center; }
@media(min-width:1000px) { .home-menu { padding-top:32px; } .game-brand { padding-bottom:24px; } .game-options { gap:16px; } }
@media(max-width:600px) {
  .profile-band { padding:16px; padding-top:max(16px,env(safe-area-inset-top)); }
  .profile-inner { gap:12px; }
  .player-identity { gap:10px; }
  .avatar { width:51px; height:51px; }
  .avatar span { font-size:26px; }
  #player-name { font-size:18px; }
  .profile-label { font-size:9px; }
  .profile-actions { gap:8px; }
  .balance { min-width:0; max-width:148px; gap:7px; padding:6px 10px 6px 6px; }
  .coin { width:31px; height:31px; font-size:19px; }
  .balance strong { font-size:20px; }
  .balance small { font-size:9px; }
  .profile-actions .icon-button { width:36px; height:42px; padding:7px; }
  .profile-band .auth-options { display:grid; grid-template-columns:1fr 1fr; width:100%; }
  .profile-band .auth-options button { font-size:13px; padding:9px 5px; min-height:44px; }
  .home-menu { padding:23px 18px max(20px,env(safe-area-inset-bottom)); }
  .game-brand { padding-bottom:24px; }
  .brand-crown { height:32px; width:43px; }
  h1 { font-size:38px; margin:5px 0 14px; }
  h1 span { font-size:25px; }
  .game-options { gap:15px; }
  .game-button { min-height:102px; grid-template-columns:86px minmax(0,1fr) 18px; gap:10px; padding:10px 13px 10px 8px; }
  .button-title { font-size:24px; }
  .button-title span { font-size:21px; }
  .button-art { width:85px; height:74px; }
  .card-fan img { width:42px; height:60px; left:10px; }
  .card-fan img:nth-child(2) { left:33px; }
  .card-fan svg { width:31px; height:31px; right:0; }
  .button-arrow { width:18px; height:18px; }
  .home-footer { padding-top:24px; }
}
@media(max-width:360px) {
  .home-menu { padding-left:14px; padding-right:14px; }
  h1 { font-size:32px; } h1 span { font-size:22px; }
  .game-button { grid-template-columns:70px minmax(0,1fr) 16px; gap:8px; }
  .button-art { width:70px; }
  .card-fan img { left:4px; } .card-fan img:nth-child(2) { left:26px; }
  .button-title { font-size:21px; } .button-title span { font-size:19px; }
  .profile-actions { gap:5px; } .balance { max-width:126px; padding-right:6px; }
  .coin { display:none; } #player-name { font-size:16px; }
}
@media(prefers-reduced-motion:reduce) { .game-button { transition:none; } }