:root{--panel:rgba(20,24,31,.62);--panel-strong:rgba(17,21,28,.92);--line:rgba(255,244,218,.18);--gold:#ead5a0;--text:#fff8ec;--muted:rgba(255,248,236,.72)}*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:"Microsoft YaHei","PingFang SC",sans-serif;color:var(--text)}body{background:#111}button,input{font:inherit}.hidden{display:none!important}
.loader-screen{position:fixed;inset:0;z-index:20;display:grid;place-items:center;align-content:center;gap:12px;background:radial-gradient(circle at 50% 25%,rgba(234,213,160,.22),transparent 34%),#10141b;transition:opacity .45s ease}.loader-screen.hidden{opacity:0;pointer-events:none}.loader-copy{min-height:24px;margin:0;color:var(--muted);transition:opacity .2s ease}.loader-progress{display:grid;justify-items:center;gap:8px;width:min(280px,72vw);margin-top:6px}.loader-progress-track{width:100%;height:10px;border:1px solid rgba(234,213,160,.35);border-radius:999px;overflow:hidden;background:rgba(255,255,255,.08)}.loader-progress-track span{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#b89454,#f4dfad);box-shadow:0 0 18px rgba(234,213,160,.45);transition:width .18s ease}.loader-progress strong{color:var(--gold);font-size:15px;letter-spacing:.08em}.loader-mark{display:flex;gap:14px}.loader-mark span{width:18px;height:18px;border-radius:50%;background:linear-gradient(145deg,#fff,#cfcfcf);animation:bob 1s infinite ease-in-out}.loader-mark span:nth-child(2){animation-delay:.15s;background:linear-gradient(145deg,#666,#050505)}.loader-mark span:nth-child(3){animation-delay:.3s}@keyframes bob{50%{transform:translateY(-14px)}}
.screen{display:none;min-height:100vh}.screen.active{display:flex}.lobby-screen{position:relative;align-items:center;justify-content:center;padding:24px;background:linear-gradient(180deg,rgba(18,26,38,.08),rgba(18,26,38,.45)),url("./assets/backgrounds/lobby.png") center/cover no-repeat}.mist{position:absolute;inset:0;background:radial-gradient(circle at 50% 28%,rgba(255,255,255,.35),transparent 36%)}
.settings-button,.avatar-button{position:absolute;top:18px;z-index:2;width:72px;height:72px;border:0;padding:0;background:transparent;cursor:pointer}.settings-button{right:18px}.avatar-button{left:18px;border-radius:50%;overflow:hidden;border:2px solid rgba(234,213,160,.72);background:rgba(0,0,0,.25)}.settings-button img,.avatar-button img{width:100%;height:100%;object-fit:cover}.lobby-card{position:relative;width:min(720px,100%);padding:28px 24px 20px;border:1px solid rgba(255,255,255,.18);border-radius:28px;background:rgba(24,29,37,.42);backdrop-filter:blur(16px);box-shadow:0 24px 80px rgba(0,0,0,.28);text-align:center}.eyebrow{margin:0 0 6px;color:var(--gold);font-size:12px;letter-spacing:.18em;text-transform:uppercase}h1{margin:0;font-size:clamp(30px,8vw,44px)}.subtitle{margin:10px 0 20px;color:var(--muted)}input{width:100%;border:1px solid var(--line);border-radius:16px;padding:14px 16px;color:var(--text);background:rgba(255,255,255,.08);outline:none}.hero-actions{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(220px,.85fr);gap:18px;align-items:stretch;margin-top:8px}.action-rail{display:grid;gap:12px;align-content:start}.utility-rail{display:grid;grid-template-rows:auto 1fr;gap:12px;align-content:start}.art-button{border:0;padding:0;background:transparent;cursor:pointer;transition:transform .18s ease,filter .18s ease}.art-button:hover,.art-button:active{transform:translateY(-3px) scale(1.015);filter:drop-shadow(0 14px 18px rgba(0,0,0,.3))}.art-button img{width:100%;display:block}.rail-art-button img{height:96px;object-fit:contain}.theme-preview{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:6px;min-height:96px;padding:16px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(180deg,rgba(10,12,18,.12),rgba(10,12,18,.74)),url("./assets/backgrounds/game-autumn.png") center/cover no-repeat;text-align:left}.theme-preview.yinyang{background:linear-gradient(180deg,rgba(10,12,18,.12),rgba(10,12,18,.74)),url("./assets/backgrounds/game-yinyang.png") center/cover no-repeat}.theme-preview.moonlit{background:linear-gradient(180deg,rgba(10,12,18,.08),rgba(10,12,18,.72)),url("./assets/backgrounds/game-moonlit.png") center/cover no-repeat}.theme-preview span{color:var(--muted);font-size:13px}.theme-preview strong{font-size:20px;color:var(--gold)}.topbar button,.action-row button,.chat-panel button,.modal-card button{border:1px solid var(--line);border-radius:14px;color:var(--text);background:rgba(255,255,255,.1);padding:12px 14px}.tips{margin:16px 0 0;color:var(--muted);font-size:13px}.shop-top-button{display:block;margin:0 auto 8px}
.difficulty-modal{position:fixed;inset:0;z-index:14;display:grid;place-items:center;padding:20px;background:rgba(5,7,10,.56);backdrop-filter:blur(6px)}.difficulty-panel{position:relative;width:min(540px,calc(100vw - 24px));aspect-ratio:2/3;display:grid;place-items:center}.difficulty-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 22px 28px rgba(0,0,0,.42))}.difficulty-content{position:relative;z-index:1;width:min(320px,calc(100% - 120px));display:grid!important;gap:14px!important;color:#3a2515}.difficulty-content h2{margin:0 0 6px;color:#2e1c10;font-size:30px;letter-spacing:.08em}.difficulty-content button:not(.close-x){border:1px solid rgba(87,57,29,.28);border-radius:999px;padding:14px 18px;color:#f8ead0;background:linear-gradient(180deg,rgba(71,48,28,.98),rgba(39,25,16,.98));box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}.difficulty-close{top:-2px;right:-6px;color:#fff!important;background:rgba(35,22,14,.82)!important}.cloud-transition{position:fixed;inset:0;z-index:30;pointer-events:none;overflow:hidden}.cloud{position:absolute;top:0;left:50%;width:62%;height:100%;background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.98),rgba(255,255,255,.94) 28%,rgba(232,239,242,.9) 52%,rgba(255,255,255,0) 76%);filter:blur(10px)}.cloud-left{transform:translateX(-52%)}.cloud-right{transform:translateX(-48%)}.cloud-transition.play .cloud-left{animation:cloudLeft 1.15s ease-in-out forwards}.cloud-transition.play .cloud-right{animation:cloudRight 1.15s ease-in-out forwards}@keyframes cloudLeft{0%{transform:translateX(-52%);opacity:1}70%{opacity:1}100%{transform:translateX(-145%);opacity:0}}@keyframes cloudRight{0%{transform:translateX(-48%);opacity:1}70%{opacity:1}100%{transform:translateX(45%);opacity:0}}.join-room-modal{position:fixed;inset:0;z-index:12;display:grid;place-items:center;padding:20px;background:rgba(5,7,10,.5);backdrop-filter:blur(5px)}.join-room-panel{position:relative;width:min(720px,100%);aspect-ratio:16/10;display:grid;place-items:center;animation:joinRoomRise .22s ease-out}.join-room-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 22px 28px rgba(0,0,0,.42))}.join-room-content{position:relative;z-index:1;width:min(420px,calc(100% - 96px));display:grid;gap:18px;text-align:center;color:#332315}.join-room-content h2{margin:0;font-size:clamp(24px,4vw,32px);letter-spacing:.12em}.join-room-field{display:grid;gap:8px;text-align:left}.join-room-field span{color:rgba(51,35,21,.8);font-size:14px}.join-room-field input{border-color:rgba(87,57,29,.32);color:#2c1e13;background:rgba(255,248,233,.62);box-shadow:inset 0 1px 0 rgba(255,255,255,.55)}.join-room-field input::placeholder{color:rgba(55,39,24,.48)}.join-room-actions{display:flex;justify-content:center;gap:12px}.join-room-actions button{min-width:104px;border:1px solid rgba(87,57,29,.3);border-radius:14px;padding:12px 14px;color:#fff7e8;background:linear-gradient(180deg,rgba(119,76,39,.92),rgba(72,43,22,.95));box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 10px 18px rgba(42,25,14,.18)}.join-room-actions button:last-child{color:#442d1b;background:rgba(255,248,233,.62)}@keyframes joinRoomRise{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.game-screen{flex-direction:column;min-height:100vh;padding:18px;gap:16px;background:linear-gradient(180deg,rgba(10,12,18,.2),rgba(10,12,18,.58)),url("./assets/backgrounds/game-autumn.png") center/cover no-repeat}.game-screen.yinyang{background:linear-gradient(180deg,rgba(10,12,18,.1),rgba(10,12,18,.65)),url("./assets/backgrounds/game-yinyang.png") center/cover no-repeat}.game-screen.moonlit{background:linear-gradient(180deg,rgba(8,12,22,.1),rgba(8,12,22,.66)),url("./assets/backgrounds/game-moonlit.png") center/cover no-repeat}.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px}.topbar-actions{display:flex;align-items:center;gap:10px}.mini-settings-button{width:88px;height:88px;padding:0;border:0!important;background:transparent!important}.mini-settings-button img{width:100%;height:100%;object-fit:contain}.topbar strong{font-size:22px}.game-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:16px;flex:1;min-height:0}.board-panel,.chat-panel{background:var(--panel);border:1px solid var(--line);border-radius:24px;backdrop-filter:blur(12px)}.board-panel{display:flex;flex-direction:column;align-items:center;gap:14px;padding:16px}.players{display:flex;width:100%;gap:10px}.player-card{flex:1;display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:18px;padding:12px;background:rgba(255,255,255,.08)}.player-card.active{box-shadow:inset 0 0 0 1px rgba(234,213,160,.7)}.player-card em{display:block;margin-top:6px;color:var(--gold);font-size:12px}.player-avatar-button{flex:0 0 52px;width:52px;height:52px;border:0!important;border-radius:50%!important;padding:0!important;overflow:hidden;background:rgba(255,255,255,.08)!important;cursor:pointer}.player-avatar-button img{display:block;width:100%;height:100%;object-fit:cover}.player-copy{min-width:0;text-align:left}.stone-dot{display:inline-block;width:14px;height:14px;border-radius:50%;margin-right:8px;vertical-align:middle}.stone-dot.black{background:radial-gradient(circle at 30% 30%,#666,#080808)}.stone-dot.white{background:radial-gradient(circle at 30% 30%,#fff,#d5d5d5)}.board-frame{width:min(76vh,100%);max-width:720px;aspect-ratio:1;padding:14px;border-radius:28px;background:linear-gradient(145deg,rgba(255,255,255,.28),rgba(255,255,255,.05));box-shadow:0 24px 50px rgba(0,0,0,.28)}#boardCanvas{display:block;width:100%;height:100%;border-radius:20px}.action-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}.chat-panel{display:flex;height:min(76vh,720px);min-height:0;flex-direction:column;overflow:hidden}.chat-head{padding:14px;border-bottom:1px solid var(--line)}.emoji-bar{display:flex;gap:8px;margin-top:10px}.emoji-bar button{padding:8px 10px}.messages{flex:1;min-height:0;overflow-y:auto;padding:14px;display:grid;gap:10px}.message{padding:10px 12px;border-radius:16px;background:rgba(255,255,255,.08)}.message.system{background:rgba(234,213,160,.14);border:1px solid rgba(234,213,160,.18)}.message small{display:block;color:var(--gold);margin-bottom:4px}#chatForm{display:grid;grid-template-columns:1fr auto;gap:10px;padding:14px;border-top:1px solid var(--line)}
.modal{position:fixed;inset:0;z-index:10;display:grid;place-items:center;background:rgba(0,0,0,.45)}.modal-card{position:relative;min-width:min(320px,calc(100vw - 32px));padding:18px;border-radius:20px;background:var(--panel-strong);border:1px solid var(--line);text-align:center}.settings-card,.profile-card,.shop-card{display:grid;gap:14px}.settings-card{text-align:left}.settings-card h2,.profile-card h2,.shop-card h2{margin:0 0 4px;text-align:center}.settings-modal{z-index:16;background:rgba(0,0,0,.52);backdrop-filter:blur(6px)}.settings-panel{position:relative;width:min(440px,calc(100vw - 24px));aspect-ratio:2/3;display:grid;place-items:center}.settings-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 22px 28px rgba(0,0,0,.42))}.settings-panel-content{position:relative;z-index:1;width:min(260px,calc(100% - 120px));display:grid!important;gap:18px!important;color:#342313}.settings-panel-content h2{margin:0 0 4px;color:#2d1d11;font-size:30px;letter-spacing:.16em}.settings-panel-content .switch-row{padding:12px 14px;border:1px solid rgba(83,53,27,.2);border-radius:16px;background:rgba(255,246,224,.42)}.settings-panel-content button{border-color:rgba(87,57,29,.28)!important;color:#f8ead0!important;background:linear-gradient(180deg,rgba(71,48,28,.98),rgba(39,25,16,.98))!important}.switch-row{display:flex;align-items:center;justify-content:space-between;gap:18px}.switch-row input{width:22px;height:22px}.modal-card div{display:flex;justify-content:center;gap:10px}.close-x{position:absolute;top:8px;right:10px;width:34px;height:34px;padding:0!important;border-radius:50%!important}.profile-avatar{width:76px;height:76px;margin:0 auto;border-radius:50%;object-fit:cover}.readonly-profile-card{width:min(360px,calc(100vw - 32px))}.profile-name-editor{display:grid;gap:8px;text-align:left}.profile-name-editor span{font-size:13px;color:var(--muted)}.profile-name-editor div{display:grid!important;grid-template-columns:1fr auto;gap:10px!important}.profile-name-editor button{white-space:nowrap}.profile-meta,.games-line{margin:0;color:var(--muted);display:flex;justify-content:center;gap:14px}.stats-grid{display:grid!important;grid-template-columns:repeat(4,1fr);gap:8px!important}.stats-grid span{color:var(--muted);font-size:13px}.stats-grid b{font-size:18px}.shop-card{width:min(760px,calc(100vw - 32px))}.shop-tabs{display:grid!important;grid-template-columns:repeat(2,1fr);gap:10px!important}.shop-tabs button{border:1px solid var(--line);border-radius:14px;color:var(--text);background:rgba(255,255,255,.06);padding:12px 14px}.shop-tabs button.active{color:#25180d;background:var(--gold);border-color:rgba(234,213,160,.8)}.board-shop-grid{display:grid!important;grid-template-columns:repeat(4,1fr);gap:12px!important}.board-item{display:grid!important;gap:8px!important;padding:12px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.06)}.board-item.selected{box-shadow:inset 0 0 0 1px rgba(234,213,160,.8)}.board-item h3,.board-item p{margin:0}.board-item button:disabled{opacity:.58;cursor:not-allowed}.mini-board{height:82px;border-radius:14px}.board-item.bamboo .mini-board{background:linear-gradient(135deg,#efc98e,#b77d42)}.board-item.jade .mini-board{background:linear-gradient(135deg,#d9efe5,#75a08f)}.board-item.obsidian .mini-board{background:linear-gradient(135deg,#575a64,#15181d)}.board-item.palace .mini-board{background:linear-gradient(135deg,#f6ddab,#a96f24)}.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);padding:10px 14px;border-radius:999px;background:rgba(0,0,0,.72);opacity:0;pointer-events:none;transition:opacity .18s ease}.toast.show{opacity:1}
@media (max-width:900px){.join-room-panel{aspect-ratio:4/3}.join-room-content{width:min(320px,calc(100% - 64px));}.game-layout{grid-template-columns:1fr}.chat-panel{height:300px;min-height:300px}.board-shop-grid{grid-template-columns:1fr 1fr}.settings-button,.avatar-button{width:62px;height:62px}.mini-settings-button{width:76px;height:76px}}
@media (max-width:640px){.lobby-card{width:min(480px,100%);padding:24px 16px 18px}.profile-name-editor div{grid-template-columns:1fr}}


/* Lobby profile strip + recharge */
.lobby-profile-strip{position:absolute;top:18px;left:18px;z-index:2;display:flex;align-items:center;gap:12px}.lobby-profile-strip .avatar-button{position:static}.lobby-profile-meta{display:grid;gap:6px;padding:10px 12px;border:1px solid rgba(255,244,218,.22);border-radius:18px;background:rgba(17,21,28,.58);backdrop-filter:blur(12px);text-align:left}.lobby-profile-meta strong{font-size:15px;color:var(--gold)}.wallet-row{display:flex;align-items:center;gap:8px}.usdt-icon{display:inline-flex;width:20px;height:20px}.usdt-icon svg{width:100%;height:100%;display:block}.wallet-balance{min-width:34px;font-size:15px}.recharge-button{border:1px solid rgba(234,213,160,.55);border-radius:999px;padding:6px 10px;color:#2a1a0d;background:var(--gold);cursor:pointer}.recharge-card{display:grid;gap:14px;width:min(360px,calc(100vw - 32px))}.recharge-card p{margin:0;color:var(--muted)}.recharge-card h2{margin:0 0 4px;text-align:center}.recharge-shortcuts{display:grid!important;grid-template-columns:repeat(3,1fr);gap:10px!important}
@media (max-width:900px){.lobby-profile-meta{padding:9px 11px}}
@media (max-width:640px){.lobby-profile-strip{right:90px}.lobby-profile-meta{gap:4px}.wallet-row{gap:6px}.recharge-button{padding:5px 9px}}


/* Stable H5 adaptation */
.screen{min-height:100svh}
.lobby-screen{overflow:auto;align-items:flex-start;padding-top:118px}
.avatar-button{flex:0 0 72px;aspect-ratio:1/1}
.lobby-profile-strip{max-width:calc(100vw - 108px)}
.lobby-profile-meta{min-width:max-content}
@media (max-width:900px){.avatar-button{flex-basis:62px}}
@media (max-height:760px){.lobby-screen{padding-top:108px;padding-bottom:24px}.lobby-card{margin:0}}

/* One-screen H5 lobby layout */
@media (max-width:640px){
  .lobby-screen{
    min-height:100svh;
    overflow-x:hidden;
    overflow-y:auto;
    padding:104px 12px 28px;
    -webkit-overflow-scrolling:touch;
  }
  .lobby-card{
    width:min(390px,100%);
    min-height:calc(100svh - 132px);
    height:auto;
    max-height:none;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    padding:18px 16px 14px;
  }
  .subtitle{margin:8px 0 10px}
  .shop-top-button{width:min(260px,88%);margin:0 auto 8px}
  .hero-actions{grid-template-columns:1fr;gap:10px;margin-top:4px}
  .action-rail{gap:8px}
  .utility-rail{display:grid}
  .rail-art-button img{width:100%;height:min(11svh,86px);object-fit:contain}
  .theme-preview{min-height:58px;margin-top:0;padding:12px 14px}
  .tips{margin-top:10px}
}


/* Fixed join room modal proportions */
.join-room-panel{width:min(720px,calc(100vw - 24px));aspect-ratio:16/10}
.join-room-actions{flex-wrap:nowrap}
.join-room-actions button{flex:0 0 104px;width:104px;min-width:104px;height:47px}
@media (max-width:900px){.join-room-panel{aspect-ratio:16/10}}
@media (max-width:420px){
  .join-room-content{width:min(280px,calc(100% - 48px));gap:14px}
  .join-room-actions{gap:10px}
  .join-room-actions button{flex-basis:96px;width:96px;min-width:96px;height:44px;padding:10px 12px}
}