:root{
  --bg:#1e2638;--bg2:#2a3550;--navy:#20283c;--navy2:#293550;--ink:#273047;--muted:#7f89a0;
  --cream:#f9f5ed;--cream2:#efe8dc;--paper:#fffdf8;--gold:#e9b95f;--gold2:#c88d35;--coral:#ef7768;
  --green:#65a080;--line:rgba(70,60,48,.10);--wood1:#e2b873;--wood2:#c98d48;--wood3:#b97837;
  --shadow:0 24px 70px rgba(17,22,34,.26)
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","PingFang SC","Microsoft YaHei",sans-serif}
body{overflow-x:hidden;background:radial-gradient(circle at 10% 0%,#3a496c 0,transparent 28%),radial-gradient(circle at 95% 22%,rgba(116,91,170,.28) 0,transparent 26%),linear-gradient(180deg,#20283b 0,#27334b 46%,#20283b 100%);position:relative}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.13;background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:32px 32px;mask-image:linear-gradient(to bottom,black,transparent 65%)}
.ambient{position:fixed;border-radius:50%;filter:blur(70px);pointer-events:none;opacity:.24}.ambient-a{width:220px;height:220px;left:-80px;top:180px;background:#dca85d}.ambient-b{width:250px;height:250px;right:-120px;top:520px;background:#7e69bd}
button{font:inherit;color:inherit}button:focus-visible{outline:3px solid rgba(233,185,95,.52);outline-offset:3px}
.app{width:min(100%,680px);margin:0 auto;padding:max(12px,env(safe-area-inset-top)) 14px max(24px,env(safe-area-inset-bottom));min-height:100vh;position:relative;z-index:1}
.topbar{height:58px;display:grid;grid-template-columns:92px minmax(0,1fr) 92px;align-items:center;margin-bottom:8px;color:#fff}.top-actions{display:flex;align-items:center;justify-content:flex-end;gap:4px;min-width:0}.top-actions-left{justify-content:flex-start}
.icon-btn{width:44px;height:44px;border:1px solid rgba(255,255,255,.11);border-radius:15px;background:rgba(255,255,255,.07);display:grid;place-items:center;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.09);backdrop-filter:blur(14px)}
.icon-btn img{width:20px;height:20px;filter:brightness(0) invert(1);opacity:.9}.rank-entry-btn{position:relative}.rank-entry-btn:after{content:"";position:absolute;right:7px;top:7px;width:6px;height:6px;border-radius:50%;background:#e9b95f;box-shadow:0 0 0 2px #2b3650}.brand{justify-self:center;display:flex;align-items:center;gap:10px;min-width:0}.brand h1{font-size:20px;line-height:1;margin:0 0 4px;letter-spacing:.09em;font-weight:900}.brand p{font-size:7px;line-height:1;margin:0;color:rgba(255,255,255,.48);letter-spacing:.28em;font-weight:850}
.brand-mark{width:35px;height:35px;position:relative}.brand-mark i,.brand-mark b{position:absolute;width:22px;height:22px;border-radius:50%;box-shadow:0 4px 9px rgba(0,0,0,.28)}.brand-mark i{left:0;top:0;background:radial-gradient(circle at 34% 28%,#777 0,#26272b 43%,#050607 83%)}.brand-mark b{right:0;bottom:0;background:radial-gradient(circle at 34% 28%,#fff 0,#f5f2eb 58%,#d8d1c5 100%);border:1px solid #e1d9cc}
.account-card{min-height:60px;margin:2px 0 10px;padding:8px 9px 8px 10px;border:1px solid rgba(255,255,255,.1);border-radius:19px;background:rgba(255,255,255,.075);display:flex;align-items:center;justify-content:space-between;gap:10px;color:#fff;backdrop-filter:blur(18px);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.account-person{display:flex;align-items:center;gap:9px;min-width:0}.account-avatar-shell{position:relative;width:43px;height:43px;flex:0 0 auto}.account-avatar{width:43px;height:43px;border-radius:14px;display:block;border:2px solid rgba(255,255,255,.18)}.account-avatar-shell>span{position:absolute;right:-1px;bottom:-1px;width:10px;height:10px;border:2px solid #29354c;background:#72b88f;border-radius:50%}.account-copy{display:flex;flex-direction:column;min-width:0}.account-copy small{font-size:7px;color:rgba(255,255,255,.38);font-weight:900;letter-spacing:.15em}.account-copy b{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}.account-copy span{margin-top:3px;font-size:8px;color:rgba(255,255,255,.52);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.account-action{height:38px;padding:0 12px;border:1px solid rgba(255,255,255,.10);border-radius:12px;background:rgba(255,255,255,.09);color:#fff;display:flex;align-items:center;gap:6px;font-size:10px;font-weight:850;cursor:pointer;flex:0 0 auto}.account-action img{width:16px;height:16px;filter:brightness(0) invert(1)}.account-card.logged-in .account-action{background:rgba(101,160,128,.18);border-color:rgba(101,160,128,.25)}
.game-card{position:relative;background:linear-gradient(180deg,#fffdf9 0,#f6f0e7 100%);border:1px solid rgba(255,255,255,.65);border-radius:30px;padding:15px;box-shadow:var(--shadow);overflow:hidden}.game-card:before{content:"";position:absolute;left:16%;right:16%;top:-24px;height:46px;border-radius:50%;background:rgba(233,185,95,.18);filter:blur(18px)}
.arena-label{height:20px;display:flex;align-items:center;justify-content:center;gap:8px;color:#9a8970;font-size:7px;letter-spacing:.15em;font-weight:900;text-transform:uppercase;margin-bottom:4px}.arena-label>span{width:28px;height:1px;background:linear-gradient(90deg,transparent,#d7c7ad)}.arena-label>span:last-child{background:linear-gradient(90deg,#d7c7ad,transparent)}
.battle-head{display:grid;grid-template-columns:minmax(0,1fr) 78px minmax(0,1fr);align-items:start;gap:7px;margin:0 0 11px;position:relative}.player-card{min-height:112px;padding:9px 7px 7px;border-radius:22px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:5px;position:relative;min-width:0;background:#eee8df;border:1px solid rgba(72,62,51,.07);transition:.2s ease;overflow:hidden}.player-card:after{content:"";position:absolute;inset:auto -20px -34px;height:65px;border-radius:50%;background:rgba(255,255,255,.36)}.player-black{background:linear-gradient(180deg,#e7e2db 0,#ded7cd 100%)}.player-white{background:linear-gradient(180deg,#f1e9dc 0,#e8decf 100%)}.player-card.active{transform:translateY(-2px);border-color:rgba(233,185,95,.6);box-shadow:0 10px 22px rgba(164,118,50,.15),inset 0 0 0 1px rgba(233,185,95,.18)}.player-card.active:before{content:"";position:absolute;inset:0;background:linear-gradient(145deg,rgba(255,255,255,.45),transparent 45%);pointer-events:none}
.portrait-wrap{width:62px;height:62px;position:relative;flex:0 0 auto;z-index:1}.portrait-ring{width:62px;height:62px;border-radius:20px;padding:3px;background:linear-gradient(145deg,#fff,#d9d0c3);box-shadow:0 6px 14px rgba(55,42,28,.13)}.player-card.active .portrait-ring{background:linear-gradient(145deg,#ffe3a6,#d89d40)}.portrait{width:56px;height:56px;border-radius:17px;display:block;background:#fff}.stone-badge{position:absolute;right:-4px;bottom:-2px;width:20px;height:20px;border-radius:50%;border:3px solid #f8f2e9;box-shadow:0 3px 7px rgba(0,0,0,.20);z-index:3}.stone-badge.black,.mini-stone.black{background:radial-gradient(circle at 32% 24%,#72706d 0,#292927 38%,#050505 80%)}.stone-badge.white,.mini-stone.white{background:radial-gradient(circle at 30% 24%,#fff 0,#f5f2ec 55%,#d6d0c6 100%)}
.player-copy{display:flex;flex-direction:column;align-items:center;min-width:0;width:100%;z-index:1;text-align:center}.player-copy b{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;font-weight:900}.player-copy small{font-size:8px;color:#8f8374;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.turn-flag{position:absolute;z-index:2;left:50%;bottom:5px;transform:translate(-50%,5px);opacity:0;white-space:nowrap;font-size:7px;font-weight:900;color:#8a642f;background:#f6d38f;border-radius:8px;padding:3px 6px;transition:.2s}.player-card.active .turn-flag{opacity:1;transform:translate(-50%,0)}
.battle-center{text-align:center;min-width:0;padding-top:17px}.vs-medal{width:48px;height:48px;border-radius:50%;margin:0 auto 5px;display:grid;place-items:center;background:linear-gradient(145deg,#2f3a53,#1e2637);box-shadow:0 8px 18px rgba(35,43,62,.22),inset 0 1px 0 rgba(255,255,255,.12);border:3px solid #f3d397}.versus{width:29px;height:29px;display:block;filter:brightness(0) invert(1)}.battle-center strong{display:block;font-size:10px;line-height:1.15;font-weight:900;white-space:nowrap}.battle-center span{display:block;font-size:7px;color:#9d9285;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.board-stage{padding:8px 7px 7px;border-radius:23px;background:linear-gradient(180deg,#20283b 0,#2c3852 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 13px 26px rgba(35,43,62,.20)}.board-topline{height:25px;padding:0 4px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;color:rgba(255,255,255,.42);font-size:7px;font-weight:800;letter-spacing:.09em}.board-topline b{color:rgba(255,255,255,.82);font-size:8px;letter-spacing:.06em}.board-topline span:last-child{text-align:right}
.board-frame{position:relative;padding:10px;border-radius:18px;background:linear-gradient(145deg,#b87334 0,#dfa85e 34%,#efc87f 54%,#bc7939 100%);box-shadow:inset 0 2px 1px rgba(255,255,255,.4),inset 0 -8px 16px rgba(82,52,20,.18),0 12px 24px rgba(10,14,23,.25);overflow:hidden}.board-frame:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.22;background:repeating-linear-gradient(5deg,rgba(78,48,21,.25) 0 1px,transparent 1px 8px)}.board-frame:after{content:"";position:absolute;inset:5px;border:1px solid rgba(72,40,16,.18);border-radius:14px;pointer-events:none}.corner{position:absolute;z-index:4;width:7px;height:7px;border-radius:50%;background:radial-gradient(circle at 30% 25%,#f8e5b8,#a87431 70%);box-shadow:0 1px 2px rgba(73,45,19,.5)}.corner.c1{left:8px;top:8px}.corner.c2{right:8px;top:8px}.corner.c3{left:8px;bottom:8px}.corner.c4{right:8px;bottom:8px}#board{position:relative;z-index:1;width:100%;height:auto;aspect-ratio:1/1;display:block;border-radius:10px;touch-action:manipulation;cursor:pointer;box-shadow:0 3px 10px rgba(89,53,20,.16)}
.thinking{position:absolute;z-index:5;left:50%;bottom:19px;transform:translateX(-50%);height:38px;padding:0 14px;border-radius:19px;background:rgba(29,36,52,.9);color:#fff;display:flex;align-items:center;gap:6px;font-size:9px;font-weight:800;box-shadow:0 9px 20px rgba(0,0,0,.20);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.09)}.thinking[hidden]{display:none}.thinking-stone{width:15px;height:15px;border-radius:50%;background:radial-gradient(circle at 30% 25%,#fff 0,#eee 55%,#bfbab0 100%)}.thinking i{width:3px;height:3px;background:#fff;border-radius:50%;opacity:.35;animation:dots 1.1s infinite ease-in-out}.thinking i:nth-of-type(2){animation-delay:.12s}.thinking i:nth-of-type(3){animation-delay:.24s}@keyframes dots{0%,100%{transform:translateY(0);opacity:.3}50%{transform:translateY(-3px);opacity:1}}
.online-overlay{position:absolute;z-index:6;inset:10px;border-radius:11px;background:rgba(31,39,57,.93);backdrop-filter:blur(7px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px;color:#fff}.online-overlay[hidden]{display:none}.match-pulse{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:rgba(233,185,95,.13);box-shadow:0 0 0 9px rgba(233,185,95,.06);animation:pulse 1.7s infinite ease-in-out}.match-pulse img{width:30px;height:30px;filter:brightness(0) invert(1)}@keyframes pulse{50%{transform:scale(1.05);box-shadow:0 0 0 15px rgba(233,185,95,.02)}}.online-overlay b{font-size:15px;margin-top:16px}.online-overlay span{font-size:10px;color:rgba(255,255,255,.55);line-height:1.6;margin-top:6px;max-width:250px}.online-overlay button{margin-top:15px;height:38px;padding:0 17px;border:1px solid rgba(255,255,255,.14);border-radius:12px;background:rgba(255,255,255,.08);color:#fff;font-size:10px;font-weight:850;cursor:pointer}
.toolbar{display:grid;grid-template-columns:1fr 1.7fr 1fr;gap:8px;margin-top:12px}.tool-btn,.primary-btn{height:52px;border-radius:16px;border:0;display:flex;align-items:center;justify-content:center;gap:7px;font-size:10px;font-weight:900;cursor:pointer;transition:transform .12s ease,opacity .12s ease}.tool-btn{background:#eae3d8;color:#6e655b;box-shadow:inset 0 1px 0 rgba(255,255,255,.75)}.primary-btn{background:linear-gradient(180deg,#35425e,#20283b);color:#fff;box-shadow:0 9px 18px rgba(36,45,66,.24),inset 0 1px 0 rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.04)}.tool-icon{width:29px;height:29px;border-radius:10px;display:grid;place-items:center;background:rgba(255,255,255,.46)}.primary-btn .tool-icon{background:rgba(255,255,255,.09)}.tool-btn img,.primary-btn img{width:17px;height:17px}.primary-btn img{filter:brightness(0) invert(1)}.tool-btn:active,.primary-btn:active{transform:scale(.97)}.tool-btn:disabled,.primary-btn:disabled{opacity:.38;cursor:not-allowed}
.record-strip{min-height:66px;margin:11px auto 0;padding:5px 0;background:rgba(255,255,255,.075);border:1px solid rgba(255,255,255,.09);border-radius:20px;display:flex;align-items:center;justify-content:center;color:#fff;backdrop-filter:blur(14px);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}.record-strip div{width:30%;text-align:center;display:grid;grid-template-columns:auto auto;justify-content:center;align-items:baseline;column-gap:4px}.record-strip small{grid-column:1/-1;font-size:6px;color:rgba(255,255,255,.32);font-weight:900;letter-spacing:.15em;margin-bottom:3px}.record-strip b{font-size:16px;line-height:1}.record-strip span{font-size:8px;color:rgba(255,255,255,.46)}.record-strip>i{width:1px;height:27px;background:rgba(255,255,255,.10)}.tip{text-align:center;color:rgba(255,255,255,.42);font-size:9px;line-height:1.6;margin:10px 10px 0}
.toast{position:fixed;z-index:80;left:50%;bottom:max(24px,env(safe-area-inset-bottom));transform:translate(-50%,12px);max-width:min(86vw,420px);padding:11px 15px;border-radius:14px;background:rgba(20,25,37,.94);color:#fff;font-size:10px;line-height:1.45;text-align:center;box-shadow:0 14px 34px rgba(0,0,0,.24);opacity:0;transition:.2s ease;pointer-events:none;border:1px solid rgba(255,255,255,.08)}.toast.show{opacity:1;transform:translate(-50%,0)}.toast[hidden]{display:none}
.sheet-backdrop,.result-backdrop{position:fixed;inset:0;z-index:30;background:rgba(12,16,25,.58);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}.sheet{position:fixed;z-index:31;left:50%;bottom:0;transform:translate(-50%,110%);width:min(100%,680px);padding:9px 17px max(20px,env(safe-area-inset-bottom));background:linear-gradient(180deg,#fffdf8,#f4eee5);border-radius:29px 29px 0 0;box-shadow:0 -24px 70px rgba(12,16,25,.28);transition:transform .28s cubic-bezier(.2,.8,.2,1);max-height:92%;overflow:auto}.sheet.open{transform:translate(-50%,0)}.sheet-grip{width:38px;height:4px;border-radius:3px;background:#d8d0c5;margin:2px auto 14px}.sheet-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.sheet-eyebrow{display:block;font-size:7px;color:#b79a6b;font-weight:900;letter-spacing:.16em;margin-bottom:4px}.sheet-head h2{font-size:21px;margin:0;font-weight:950}.sheet-head p{font-size:9px;color:#999083;margin:5px 0 0}.sheet-close{width:40px;height:40px;border-radius:13px;border:0;background:#eee8df;font-size:22px;line-height:1;color:#756d62;cursor:pointer}
.setting-group{margin-top:18px}.setting-group>label,.setting-title-row label{display:block;font-size:10px;font-weight:900;color:#6e685f}.setting-group>label{margin-bottom:8px}.setting-title-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}.setting-title-row span{font-size:8px;color:#9a9083;text-align:right}.mode-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:7px}.mode-grid button{min-height:76px;padding:8px;border:1px solid #e4dbcf;border-radius:17px;background:#f1ebe3;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;cursor:pointer;position:relative;overflow:hidden}.mode-grid button:after{content:"";position:absolute;width:55px;height:55px;border-radius:50%;right:-22px;bottom:-28px;background:rgba(255,255,255,.5)}.mode-icon{font-size:9px;font-weight:950;color:#9a8f80;background:#e3dacf;padding:4px 6px;border-radius:8px;margin-bottom:6px}.mode-grid b{font-size:12px;z-index:1}.mode-grid small{font-size:8px;color:#9e9488;margin-top:3px;z-index:1}.mode-grid button.selected{background:linear-gradient(150deg,#34415c,#20283b);color:#fff;border-color:#34415c;box-shadow:0 8px 18px rgba(38,48,69,.18)}.mode-grid button.selected .mode-icon{background:rgba(233,185,95,.18);color:#f2cc83}.mode-grid button.selected small{color:rgba(255,255,255,.48)}
.difficulty-grid{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(112px,1fr);gap:8px;overflow-x:auto;padding:2px 1px 7px;scroll-snap-type:x mandatory;scrollbar-width:none}.difficulty-grid::-webkit-scrollbar{display:none}.difficulty-grid button{min-width:0;height:136px;padding:9px 7px 8px;border-radius:20px;border:1px solid #e4dbcf;background:#f1ebe3;display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;position:relative;scroll-snap-align:start;overflow:hidden}.difficulty-grid button:after{content:"";position:absolute;left:-18px;right:-18px;bottom:-36px;height:70px;border-radius:50%;background:rgba(255,255,255,.52)}.difficulty-grid .tier{position:absolute;left:8px;top:8px;z-index:3;height:22px;min-width:22px;padding:0 5px;border-radius:8px;display:grid;place-items:center;background:#e4dbd0;color:#8b8175;font-size:9px;font-weight:950}.difficulty-grid .tier.master{background:#efd49f;color:#8b6228}.difficulty-grid img{width:66px;height:66px;border-radius:21px;margin-top:4px;z-index:2;box-shadow:0 6px 12px rgba(74,58,40,.11);border:2px solid rgba(255,255,255,.7)}.difficulty-grid b{font-size:10px;white-space:nowrap;z-index:2;margin-top:2px}.difficulty-grid small{font-size:8px;color:#9d9286;z-index:2}.difficulty-grid button.selected{background:linear-gradient(160deg,#34415c,#20283b);color:#fff;border-color:#34415c;box-shadow:0 8px 20px rgba(38,48,69,.20);transform:translateY(-1px)}.difficulty-grid button.selected .tier{background:#edc77d;color:#62471c}.difficulty-grid button.selected small{color:rgba(255,255,255,.52)}.difficulty-grid button:disabled{opacity:.35}.difficulty-detail{margin-top:5px;padding:10px 11px;border-radius:13px;background:#ece5db;color:#756d63;font-size:9px;line-height:1.55;border-left:3px solid #d2aa67}.difficulty-detail.disabled{opacity:.45}
.account-setting-row{min-height:62px;padding:8px;border:1px solid #e3dbcf;border-radius:16px;display:flex;align-items:center;gap:9px;background:#f6f1ea}.account-setting-row>img{width:44px;height:44px;border-radius:14px}.account-setting-row>div{display:flex;flex-direction:column;min-width:0;flex:1}.account-setting-row b{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.account-setting-row span{font-size:8px;color:#9b9184;margin-top:4px;line-height:1.35}.account-setting-row button{height:36px;padding:0 12px;border:0;border-radius:11px;background:#28344d;color:#fff;font-size:9px;font-weight:850;cursor:pointer}.sheet-confirm{margin-top:18px;width:100%;height:53px;border:0;border-radius:17px;background:linear-gradient(180deg,#35425e,#20283b);color:white;font-size:12px;font-weight:900;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:9px;box-shadow:0 10px 22px rgba(38,48,69,.2)}.sheet-confirm b{font-size:7px;color:#e9c47d;letter-spacing:.14em}

.rank-backdrop{position:fixed;inset:0;z-index:42;background:rgba(10,14,22,.66);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.rank-panel{position:fixed;z-index:43;left:50%;top:50%;transform:translate(-50%,-46%) scale(.97);opacity:0;pointer-events:none;width:min(calc(100% - 24px),520px);max-height:min(82vh,720px);display:flex;flex-direction:column;padding:18px;background:linear-gradient(180deg,#fffdf8 0,#f2eadf 100%);border:1px solid rgba(255,255,255,.76);border-radius:29px;box-shadow:0 34px 90px rgba(7,10,17,.42);transition:.24s cubic-bezier(.2,.8,.2,1);overflow:hidden}.rank-panel.open{transform:translate(-50%,-50%) scale(1);opacity:1;pointer-events:auto}.rank-panel:before{content:"";position:absolute;left:10%;right:10%;top:-55px;height:110px;border-radius:50%;background:radial-gradient(circle,rgba(233,185,95,.34),transparent 70%);pointer-events:none}
.rank-head{position:relative;z-index:2;display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.rank-title{display:flex;align-items:center;gap:11px;min-width:0}.rank-title-icon{width:48px;height:48px;flex:0 0 auto;border-radius:16px;display:grid;place-items:center;background:linear-gradient(145deg,#34415d,#1f2739);box-shadow:0 9px 18px rgba(31,39,57,.18),inset 0 1px 0 rgba(255,255,255,.12)}.rank-title-icon img{width:25px;height:25px;filter:brightness(0) invert(1)}.rank-title small{display:block;font-size:7px;line-height:1;color:#b18c52;letter-spacing:.16em;font-weight:950;margin-bottom:5px}.rank-title h2{margin:0;font-size:21px;line-height:1.1;color:#283248;font-weight:950}.rank-title p{margin:5px 0 0;color:#91877a;font-size:9px}.rank-close{width:40px;height:40px;flex:0 0 auto;border:0;border-radius:13px;background:#e9e1d6;color:#756d62;font-size:22px;line-height:1;cursor:pointer}
.rank-meta{position:relative;z-index:2;margin-top:15px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 9px 8px 11px;border:1px solid #e4dacd;border-radius:14px;background:rgba(255,255,255,.54)}.rank-meta>span{font-size:9px;color:#81786d;font-weight:800}.rank-meta button{height:32px;border:0;border-radius:10px;padding:0 10px;background:#273249;color:#fff;font-size:9px;font-weight:850;cursor:pointer}.rank-meta button span{color:#efc875;font-size:12px;margin-right:2px}
.rank-loading{position:relative;z-index:2;min-height:210px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:#8f8579;font-size:10px}.rank-loading i{width:32px;height:32px;border-radius:50%;border:3px solid #e5d9c8;border-top-color:#d49d48;animation:rankspin .8s linear infinite}@keyframes rankspin{to{transform:rotate(360deg)}}
.rank-podium{position:relative;z-index:2;margin:14px 0 10px;display:grid;grid-template-columns:1fr 1.08fr 1fr;align-items:end;gap:7px;min-height:154px}.podium-card{min-width:0;text-align:center;padding:9px 5px 10px;border-radius:18px 18px 13px 13px;background:rgba(255,255,255,.58);border:1px solid #e3d8c9;position:relative;overflow:hidden}.podium-card.p1{min-height:151px;padding-top:12px;background:linear-gradient(180deg,#fff9e9,#f0ddba);border-color:#ddba78;box-shadow:0 10px 20px rgba(172,122,50,.12)}.podium-card.p2{min-height:132px}.podium-card.p3{min-height:122px}.podium-rank{position:absolute;left:50%;top:5px;transform:translateX(-50%);font-size:8px;color:#968b7e;font-weight:950}.podium-card.p1 .podium-rank{color:#a36d24}.podium-avatar{width:53px;height:53px;margin:10px auto 6px;border-radius:17px;padding:3px;background:#d9d2c9}.podium-card.p1 .podium-avatar{width:62px;height:62px;border-radius:20px;background:linear-gradient(145deg,#ffe7a9,#c8892e);box-shadow:0 7px 14px rgba(177,121,38,.16)}.podium-avatar img{width:100%;height:100%;display:block;border-radius:14px}.podium-card.p1 .podium-avatar img{border-radius:16px}.podium-card b{display:block;min-width:0;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#30384b}.podium-score{display:block;margin-top:4px;font-size:9px;color:#a47633;font-weight:900}.podium-badge{display:inline-flex;margin-top:4px;padding:2px 5px;border-radius:6px;background:#e8dfd4;color:#8d8378;font-size:6px;font-weight:900}.podium-card.me{box-shadow:inset 0 0 0 2px rgba(92,126,190,.34)}
.rank-list{position:relative;z-index:2;min-height:0;overflow:auto;padding:0 2px 2px;scrollbar-width:thin}.rank-row{min-height:55px;margin-top:6px;padding:6px 9px 6px 8px;border:1px solid #e5dbcf;border-radius:15px;background:rgba(255,255,255,.48);display:grid;grid-template-columns:30px 40px minmax(0,1fr) auto;align-items:center;gap:8px}.rank-row.me{background:#eaf0fa;border-color:#b9c9e5;box-shadow:inset 3px 0 0 #657fac}.rank-pos{text-align:center;font-size:11px;font-weight:950;color:#8e857a}.rank-row-avatar{width:40px;height:40px;border-radius:13px;display:block;background:#eee5d9}.rank-person{min-width:0;display:flex;flex-direction:column}.rank-person b{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rank-person span{display:flex;align-items:center;gap:5px;margin-top:3px;font-size:7px;color:#9a9085}.guest-chip{padding:2px 5px;border-radius:6px;background:#e9e1d6;color:#91867a;font-size:6px;font-weight:900}.me-chip{padding:2px 5px;border-radius:6px;background:#d0dcf1;color:#506a99;font-size:6px;font-weight:900}.rank-score{text-align:right;white-space:nowrap}.rank-score b{font-size:15px;color:#2d374c}.rank-score span{font-size:8px;color:#aa8a59;margin-left:3px;font-weight:800}
.rank-empty{position:relative;z-index:2;min-height:230px;padding:24px 20px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.rank-empty-icon{width:58px;height:58px;border-radius:20px;display:grid;place-items:center;background:#ebe4da}.rank-empty-icon img{width:30px;height:30px;opacity:.55}.rank-empty b{font-size:13px;margin-top:10px}.rank-empty span{max-width:280px;font-size:9px;line-height:1.6;color:#9b9185;margin-top:6px}.rank-me{position:relative;z-index:3;margin-top:10px;min-height:49px;padding:8px 10px;border-radius:14px;background:linear-gradient(145deg,#303c56,#222b3f);color:#fff;display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto;align-items:center;gap:1px 9px}.rank-me>span{grid-row:1/3;font-size:9px;color:#f0c97e;font-weight:900}.rank-me>b{font-size:14px;line-height:1;text-align:left}.rank-me>small{grid-column:2/4;font-size:7px;color:rgba(255,255,255,.5)}
.result-card{position:fixed;z-index:41;left:50%;top:50%;transform:translate(-50%,-45%) scale(.95);opacity:0;width:min(calc(100% - 34px),390px);padding:26px 20px 19px;background:linear-gradient(180deg,#fffdf8,#f4ede3);border-radius:30px;box-shadow:0 34px 90px rgba(10,14,22,.36);text-align:center;transition:.24s ease;pointer-events:none;overflow:hidden}.result-card.open{transform:translate(-50%,-50%) scale(1);opacity:1;pointer-events:auto}.result-card:before{content:"";position:absolute;left:50%;top:-80px;transform:translateX(-50%);width:240px;height:190px;border-radius:50%;background:radial-gradient(circle,rgba(241,196,112,.4),transparent 70%)}.result-ribbon{position:relative;z-index:2;display:inline-flex;height:24px;align-items:center;padding:0 10px;border-radius:9px;background:#273249;color:#f0ca82;font-size:7px;font-weight:950;letter-spacing:.16em;margin-bottom:12px}.result-burst i{position:absolute;width:5px;height:5px;border-radius:50%;background:#e9b95f}.result-burst i:nth-child(1){left:17%;top:67px}.result-burst i:nth-child(2){right:18%;top:57px;width:7px;height:7px;background:#ee7e70}.result-burst i:nth-child(3){left:25%;top:118px;width:4px;height:4px;background:#6e9f86}.result-burst i:nth-child(4){right:23%;top:128px}.result-burst i:nth-child(5){left:9%;top:143px;background:#758bb8}.result-burst i:nth-child(6){right:10%;top:158px;background:#b086cc}.result-portraits{width:92px;height:92px;margin:0 auto 10px;position:relative;z-index:2}.winner-ring{width:92px;height:92px;border-radius:29px;padding:5px;background:linear-gradient(145deg,#ffe9b8,#c88d35);box-shadow:0 12px 24px rgba(184,126,47,.22)}.result-portraits>div>img{width:82px;height:82px;border-radius:25px;display:block}.mini-stone{display:inline-block;width:24px;height:24px;border-radius:50%;vertical-align:middle}.result-portraits .mini-stone{position:absolute;right:-4px;bottom:-4px;width:29px;height:29px;border:4px solid #f8f1e6;box-shadow:0 3px 7px rgba(0,0,0,.15)}.result-kicker{position:relative;z-index:2;margin:0 0 5px;color:#a88b60;font-size:9px;font-weight:900;letter-spacing:.12em}.result-card h2{position:relative;z-index:2;margin:0;font-size:30px;letter-spacing:.01em;font-weight:950;color:#283248}.result-card>p:not(.result-kicker){position:relative;z-index:2;margin:7px 0 0;color:#8f867a;font-size:10px}.result-stats{position:relative;z-index:2;margin:18px 0 15px;display:grid;grid-template-columns:1fr 1fr;border:1px solid #e5dbcf;border-radius:18px;overflow:hidden;background:rgba(255,255,255,.45)}.result-stats div{padding:11px 8px;display:flex;flex-direction:column}.result-stats div+div{border-left:1px solid #e5dbcf}.result-stats small{font-size:6px;color:#b2a99d;font-weight:900;letter-spacing:.12em}.result-stats b{font-size:16px;margin-top:3px}.result-stats span{font-size:8px;color:#9d9488;margin-top:2px}.result-actions{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1.4fr;gap:8px}.result-actions button{height:47px;border:0;border-radius:15px;background:#e9e1d6;font-size:10px;font-weight:900;cursor:pointer}.result-actions .result-again{background:linear-gradient(180deg,#35425e,#20283b);color:#fff;box-shadow:0 8px 16px rgba(36,45,66,.18)}
@media(max-width:420px){.topbar{grid-template-columns:88px minmax(0,1fr) 88px}.icon-btn{width:42px;height:42px}.rank-panel{width:calc(100% - 18px);padding:15px;border-radius:25px;max-height:86vh}.rank-title-icon{width:44px;height:44px}.rank-title h2{font-size:19px}.rank-podium{gap:5px;min-height:144px}.podium-card{padding-left:3px;padding-right:3px}.podium-avatar{width:48px;height:48px}.podium-card.p1 .podium-avatar{width:57px;height:57px}.rank-row{grid-template-columns:27px 38px minmax(0,1fr) auto;gap:7px;padding-left:6px;padding-right:7px}.rank-row-avatar{width:38px;height:38px}.app{padding-left:10px;padding-right:10px}.account-card{margin-bottom:8px}.account-copy span{max-width:190px}.game-card{padding:11px;border-radius:25px}.arena-label{margin-bottom:2px}.battle-head{grid-template-columns:minmax(0,1fr) 66px minmax(0,1fr);gap:5px;margin-bottom:9px}.player-card{min-height:103px;padding-left:4px;padding-right:4px}.portrait-wrap,.portrait-ring{width:56px;height:56px}.portrait-ring{border-radius:18px}.portrait{width:50px;height:50px;border-radius:15px}.battle-center{padding-top:15px}.vs-medal{width:42px;height:42px;border-width:2px}.versus{width:25px;height:25px}.battle-center strong{font-size:9px}.battle-center span{font-size:6px}.board-stage{padding:7px 6px 6px;border-radius:20px}.board-frame{padding:8px;border-radius:16px}.toolbar{gap:6px;margin-top:10px}.tool-btn,.primary-btn{height:49px}.tool-icon{width:27px;height:27px}.record-strip{min-height:62px}.difficulty-grid{grid-auto-columns:108px}}
@media(max-width:350px){.topbar{grid-template-columns:84px minmax(0,1fr) 84px}.top-actions{gap:2px}.icon-btn{width:40px;height:40px;border-radius:13px}.brand-mark{display:none}.rank-title p{display:none}.rank-panel{padding:13px}.rank-row{grid-template-columns:24px 36px minmax(0,1fr) auto}.rank-row-avatar{width:36px;height:36px}.rank-score b{font-size:13px}.account-copy span{display:none}.account-card{min-height:54px}.account-avatar-shell,.account-avatar{width:39px;height:39px}.account-action span{display:none}.account-action{width:38px;padding:0;justify-content:center}.player-card{min-height:96px}.portrait-wrap,.portrait-ring{width:50px;height:50px}.portrait{width:44px;height:44px}.player-copy small{display:none}.battle-center span{display:none}.toolbar>button>span:last-child{display:none}.toolbar{grid-template-columns:1fr 1.35fr 1fr}.tool-icon{width:30px;height:30px}.board-topline span{font-size:6px}.difficulty-grid{grid-auto-columns:104px}}
@media(min-width:760px){.app{padding-top:22px}.game-card{padding:17px}.battle-head{grid-template-columns:minmax(0,1fr) 96px minmax(0,1fr)}.player-card{min-height:126px}.portrait-wrap,.portrait-ring{width:70px;height:70px}.portrait{width:64px;height:64px}.record-strip{width:84%}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

/* v1.6 mobile typography compliance: visible game text is at least 12px on mobile. */
@media(max-width:759px){
  .brand p,.account-copy small,.account-copy span,.account-action,.arena-label,
  .player-copy b,.player-copy small,.turn-flag,.battle-center strong,.battle-center span,
  .board-topline,.board-topline b,.board-topline span,.thinking,.online-overlay span,.online-overlay button,
  .tool-btn,.primary-btn,.record-strip small,.record-strip span,.tip,.toast,.sheet-eyebrow,.sheet-head p,
  .setting-group>label,.setting-title-row label,.setting-title-row span,.mode-icon,.mode-grid small,
  .difficulty-grid .tier,.difficulty-grid b,.difficulty-grid small,.difficulty-detail,
  .account-setting-row b,.account-setting-row span,.account-setting-row button,.sheet-confirm b,
  .rank-title small,.rank-title p,.rank-meta>span,.rank-meta button,.rank-loading,.podium-rank,
  .podium-card b,.podium-score,.podium-badge,.rank-pos,.rank-person b,.rank-person span,.guest-chip,.me-chip,
  .rank-score span,.rank-empty span,.rank-me>span,.rank-me>small,.result-ribbon,.result-kicker,
  .result-card>p:not(.result-kicker),.result-stats small,.result-stats span,.result-actions button{font-size:12px}
}


/* v1.8 mobile button legibility: keep button copy >=12px and enlarge icon artwork. */
@media(max-width:759px){
  /* Top navigation buttons: keep the 44px-ish tap target, but make the glyph itself much more prominent. */
  .icon-btn img{width:32px;height:32px}

  /* Account/login button. */
  .account-action{font-size:12px;min-height:42px;gap:8px}
  .account-action img{width:26px;height:26px}

  /* Main in-game action buttons. */
  .tool-btn,.primary-btn{font-size:12px;min-height:56px;gap:8px}
  .tool-icon{width:40px;height:40px;border-radius:12px}
  .tool-btn img,.primary-btn img{width:30px;height:30px}

  /* Match fallback / settings / account / result buttons. */
  .online-overlay button,.account-setting-row button,.sheet-confirm,.result-actions button,.rank-meta button{font-size:12px}
  .sheet-confirm{min-height:56px}
  .sheet-confirm b{font-size:12px}

  /* Text-based button glyphs are icons too. */
  .sheet-close,.rank-close{font-size:28px}
  .rank-meta button span{font-size:22px;line-height:1}

  /* Mode buttons use AI / VS badges as their visual icon. */
  .mode-icon{font-size:12px;padding:6px 9px;border-radius:10px}
}

@media(max-width:420px){
  .tool-btn,.primary-btn{height:56px}
  .tool-icon{width:38px;height:38px}
  .tool-btn img,.primary-btn img{width:29px;height:29px}
}

@media(max-width:350px){
  /* At the narrowest width labels remain intentionally hidden, but visible icon controls stay large. */
  .icon-btn img{width:30px;height:30px}
  .tool-icon{width:38px;height:38px}
  .tool-btn img,.primary-btn img{width:29px;height:29px}
  .account-action img{width:26px;height:26px}
}