/* Shared presentation, based on the home screen. No board geometry or rules. */
:root{--ui-bg:#020617;--ui-card:#0f172a;--ui-text:#f8fafc;--ui-muted:#a5b4c8;--ui-line:#26364d;--ui-input:#080f20;--ui-accent:#40e0d0;--ui-gold:#d6ad62;--ui-tint:#40e0d014;--ui-shadow:0 20px 55px #0003}
html[data-axis-theme=light]{--ui-bg:#f1f5f9;--ui-card:#fff;--ui-text:#0f172a;--ui-muted:#52647c;--ui-line:#cbd5e1;--ui-input:#f8fafc;--ui-accent:#087d76;--ui-gold:#865f24;--ui-tint:#087d7610;--ui-shadow:0 10px 30px #0f172a0a}
body.ranking-page,body:is(.axis-tools-page,.axis-tools-page.light){--bg:var(--ui-bg);--card:var(--ui-card);--line:var(--ui-line);--aqua:var(--ui-accent);color:var(--ui-text);background:radial-gradient(ellipse at 15% 15%,#40e0d012,transparent 48%),var(--ui-bg);font:14px/1.6 'Montserrat',system-ui,sans-serif;min-height:100dvh}
body:is(.axis-tools-page,.axis-tools-page.light){padding:0}
.ranking-shell{max-width:1380px;padding:0 28px}
.ranking-header,body:is(.axis-tools-page,.axis-tools-page.light)>header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:20px;min-height:104px;padding:20px 0;margin-bottom:28px;border:0;border-bottom:1px solid var(--ui-line);background:transparent;box-shadow:none}
body:is(.axis-tools-page,.axis-tools-page.light)>header{max-width:1324px;margin:0 auto 28px}
.ranking-brand,body:is(.axis-tools-page,.axis-tools-page.light) .brand h1{font-family:'Orbitron',system-ui,sans-serif;font-size:13px;font-weight:800;letter-spacing:1.4px;color:var(--ui-accent);line-height:1.6}
.ranking-brand small,body:is(.axis-tools-page,.axis-tools-page.light) .brand small{font:11px/1.6 'Montserrat',system-ui,sans-serif;letter-spacing:.3px;color:var(--ui-muted)}
.ranking-brand img{width:46px;height:46px;object-fit:contain;filter:drop-shadow(0 0 12px #40e0d030)}
body.ranking-page .ranking-header nav,body:is(.axis-tools-page,.axis-tools-page.light) .ranking-header nav{display:flex;gap:6px;align-items:center;flex-wrap:wrap;font:700 12px 'Montserrat',system-ui,sans-serif}
.ranking-header nav a,.home-navigation a,.home-navigation span{padding:10px 14px;border:1px solid transparent;border-radius:12px;text-decoration:none;color:var(--ui-muted);min-height:42px;display:inline-flex;align-items:center}
.ranking-header nav a[aria-current],.home-navigation [aria-current]{color:var(--ui-accent);background:var(--ui-tint);border-color:#40e0d040}
.ranking-header nav a:hover,.home-navigation a:hover{color:var(--ui-accent);border-color:#40e0d050}
.home-navigation{flex-wrap:wrap;gap:4px;font-family:'Montserrat',system-ui,sans-serif}.home-navigation a,.home-navigation span{padding:9px 11px;font-size:11px}
body.ranking-page :is(.ranking-board,.ranking-profile,.ranking-grades,.account-card),body:is(.axis-tools-page,.axis-tools-page.light) :is(section,.panel){background:var(--ui-card);border:1px solid var(--ui-line);border-radius:24px;box-shadow:var(--ui-shadow)}
body.ranking-page :is(h1,h2),body:is(.axis-tools-page,.axis-tools-page.light) :is(h1,h2){font-family:'Orbitron',system-ui,sans-serif;letter-spacing:.3px;color:var(--ui-text)}
body.ranking-page .ranking-board h2,body.ranking-page .ranking-grades h2{font-size:17px;line-height:1.6;font-weight:700}
body.ranking-page .ranking-profile h2{font-size:21px;overflow-wrap:anywhere;margin-top:8px}
body.ranking-page .account-card h1{font-size:26px;line-height:1.5}
body.ranking-page :is(.ranking-kicker,.ranking-elo,.ranking-metrics strong,.ranking-player-button[aria-pressed=true]),body:is(.axis-tools-page,.axis-tools-page.light) h2{color:var(--ui-accent)}
body.ranking-page :is(.ranking-subtext,.ranking-status,.ranking-board-foot,.ranking-pagination label,.ranking-pagination p,body.ranking-page-controls span,.ranking-board td small,.ranking-grade-list,.ranking-grade-list small,.ranking-footer,.ranking-history p,.account-copy,.account-card p,.account-card small,.account-explainer p,.ranking-online,.ranking-results,.ranking-progress-label),body:is(.axis-tools-page,.axis-tools-page.light) :is(p,.note,small,pre,.legend,.caption){color:var(--ui-muted)}
body.ranking-page :is(.ranking-history-item strong,.ranking-results b,.account-explainer h2,.account-explainer h3,.account-card label,.ranking-progress-label b,.ranking-player-button){color:var(--ui-text)}
body.ranking-page :is(.ranking-tabs,.account-tabs){background:var(--ui-input);border:1px solid var(--ui-line);border-radius:14px;padding:5px;gap:5px}
body.ranking-page :is(.ranking-tabs button,.account-tabs button){border-radius:10px;color:var(--ui-muted);min-height:42px;font-weight:700}
body.ranking-page :is(.ranking-tabs button[aria-pressed=true],.account-tabs button[aria-pressed=true]){background:var(--ui-tint);color:var(--ui-accent);box-shadow:inset 0 0 0 1px #40e0d040}
body.ranking-page :is(.ranking-search-field input,.ranking-pagination select,.account-card input,.account-card textarea),body:is(.axis-tools-page,.axis-tools-page.light) :is(input,select,#log){background:var(--ui-input);color:var(--ui-text);border:2px solid var(--ui-line);border-radius:14px;font:inherit;padding:12px 14px;min-height:44px}
body.ranking-page .ranking-search-field input{padding-right:68px}
body.ranking-page :is(.ranking-search-field label,.ranking-test-switch),body:is(.axis-tools-page,.axis-tools-page.light) label{color:var(--ui-muted)}
body.ranking-page :is(.ranking-my-position,body.ranking-page-controls button,.account-secondary,.ranking-profile-link,.app-theme-toggle),body:is(.axis-tools-page,.axis-tools-page.light) :is(button,.back){border:1px solid var(--ui-line);background:var(--ui-card);color:var(--ui-text)!important;border-radius:14px;padding:10px 14px;min-height:44px;font:700 11px/1.5 'Montserrat',system-ui,sans-serif;cursor:pointer;text-decoration:none}
body.ranking-page .ranking-search-field>button{color:var(--ui-accent);background:var(--ui-tint);bottom:12px}
body.ranking-page .account-primary,body:is(.axis-tools-page,.axis-tools-page.light) #run,body:is(.axis-tools-page,.axis-tools-page.light) #send{font:800 12px/1.5 'Orbitron',system-ui,sans-serif;background:#40e0d0;color:#04151d!important;border:1px solid #40e0d0;border-radius:16px;min-height:48px;padding:13px 18px;box-shadow:0 10px 20px -10px #40e0d070}
body.ranking-page :is(.ranking-board th,.ranking-board td,.ranking-board-foot,.ranking-results,.ranking-history,.ranking-history-item,.ranking-metrics>div+div,.ranking-footer),body:is(.axis-tools-page,.axis-tools-page.light) :is(td,th,#log div){border-color:var(--ui-line)}
body.ranking-page .ranking-board th{color:var(--ui-muted);background:var(--ui-input)}
body.ranking-page .is-selected{background:var(--ui-tint)}
body.ranking-page :is(.ranking-notice,.account-notice,.ranking-position,.ranking-pill){background:var(--ui-tint);border-color:#40e0d030;color:var(--ui-muted)}
body.ranking-page .ranking-notice strong{color:var(--ui-text)}body.ranking-page .ranking-notice p{color:var(--ui-muted)}
body.ranking-page .ranking-position span,body.ranking-page .ranking-position small{color:var(--ui-muted)}
body.ranking-page :is(.ranking-position strong,.ranking-grade,.ranking-number,.ranking-grade-list .current,.ranking-avatar,.account-code-panel h2){color:var(--ui-gold)}
body.ranking-page .ranking-avatar{background:linear-gradient(145deg,#d6ad621a,transparent);border-color:#d6ad6260;border-radius:20px;font-family:'Orbitron',system-ui,sans-serif}
body.ranking-page .ranking-progress{background:var(--ui-line)}body.ranking-page .ranking-progress>span{background:var(--ui-accent)}
body.ranking-page .ranking-profile-top .ranking-pill{color:var(--ui-gold);border-color:#d6ad6240;background:#d6ad6210}
body:is(.axis-tools-page,.axis-tools-page.light) main{padding:0 28px 28px;max-width:1380px;margin:auto}
body:is(.axis-tools-page,.axis-tools-page.light) .lab-header{margin-top:28px}body:is(.axis-tools-page,.axis-tools-page.light) .lab-header h1{font-size:clamp(20px,3vw,27px);color:var(--ui-text)}
body:is(.axis-tools-page,.axis-tools-page.light) section{padding:24px}body:is(.axis-tools-page,.axis-tools-page.light) .lab-grid{gap:24px}
body:is(.axis-tools-page,.axis-tools-page.light) .board-shell{background:var(--ui-card);border-color:var(--ui-line);border-radius:28px}
body:is(.axis-tools-page,.axis-tools-page.light) #board{border-color:var(--ui-line);background:var(--ui-line)}body:is(.axis-tools-page,.axis-tools-page.light) .cell{background:var(--ui-card)}
body:is(.axis-tools-page,.axis-tools-page.light) :is(.coord,a,.status){color:var(--ui-accent)}body:is(.axis-tools-page,.axis-tools-page.light) strong{color:var(--ui-text)}
body:is(.axis-tools-page,.axis-tools-page.light) .cheer-head{background:var(--ui-input)}body:is(.axis-tools-page,.axis-tools-page.light) .cheer-head.orange{color:#ea580c}body:is(.axis-tools-page,.axis-tools-page.light) .cheer-head.navy{color:#3b82f6}
body:is(.axis-tools-page,.axis-tools-page.light) .buttons button{font-size:23px;padding:9px 4px}
body:is(.axis-tools-page,.axis-tools-page.light) .pill{background:var(--ui-tint);border-color:var(--ui-line);color:var(--ui-accent)}
body:is(.axis-tools-page,.axis-tools-page.light) .track{background:var(--ui-line)}
body:is(.axis-tools-page,.axis-tools-page.light) select{max-width:100%;margin-left:0}body:is(.axis-tools-page,.axis-tools-page.light) label{max-width:100%}
body:is(.axis-tools-page,.axis-tools-page.light) .lab-status{border-left:3px solid var(--ui-accent);padding-left:14px;margin-block:24px}
.pc .ship-symbol{font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;font-size:calc(var(--sz-piece)*.48);line-height:1;pointer-events:none;filter:drop-shadow(0 2px 2px #0005)}
.pc.king i{pointer-events:none;font-size:calc(var(--sz-piece)*.42)}
.legend-icon.icon-pc{font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif}
body.ranking-page :is(button,a,input,select,textarea):focus-visible,body:is(.axis-tools-page,.axis-tools-page.light) :is(button,a,input,select):focus-visible{outline:3px solid var(--ui-accent);outline-offset:4px}
@media(max-width:800px){.ranking-shell,body:is(.axis-tools-page,.axis-tools-page.light) main{padding-inline:16px}.ranking-header,body:is(.axis-tools-page,.axis-tools-page.light)>header{gap:14px;padding-block:18px;min-height:0;margin-bottom:22px}body:is(.axis-tools-page,.axis-tools-page.light)>header{margin-inline:16px}.ranking-header nav{width:100%}.ranking-brand{font-size:11px}body.ranking-page .ranking-header nav,body:is(.axis-tools-page,.axis-tools-page.light) .ranking-header nav{gap:4px}.ranking-header nav a{padding:10px;font-size:11px}body.ranking-page :is(.ranking-board,.ranking-profile,.ranking-grades,.account-card),body:is(.axis-tools-page,.axis-tools-page.light) :is(section,.panel){border-radius:22px}body:is(.axis-tools-page,.axis-tools-page.light) section{padding:18px}body:is(.axis-tools-page,.axis-tools-page.light) .lab-grid{grid-template-columns:minmax(0,1fr);gap:18px}body:is(.axis-tools-page,.axis-tools-page.light) .lab-grid section:last-child{grid-column:auto}body:is(.axis-tools-page,.axis-tools-page.light) .lab-header{align-items:flex-start}body:is(.axis-tools-page,.axis-tools-page.light) select{display:block;width:100%;font-size:16px;margin-top:6px}body:is(.axis-tools-page,.axis-tools-page.light) input{font-size:16px}body:is(.axis-tools-page,.axis-tools-page.light) label:has(select){display:block;margin-right:0}body.ranking-page .ranking-search-field input{font-size:16px}body.ranking-page .ranking-profile h2{font-size:19px}}
.ranking-brand{display:flex;align-items:center;gap:14px;text-decoration:none;flex-shrink:0}.ranking-brand small{display:block;margin-top:3px}
body:is(.axis-tools-page,.axis-tools-page.light) .ranking-header nav a{color:var(--ui-muted)}
body:is(.axis-tools-page,.axis-tools-page.light) .ranking-header nav a[aria-current]{color:var(--ui-accent)}
body:is(.axis-tools-page,.axis-tools-page.light) .ranking-brand{color:var(--ui-accent)}
body.ranking-page .ranking-brand{color:var(--ui-accent)}
body .axis-audio-toggle{background:var(--ui-card);color:var(--ui-text);border:1px solid var(--ui-line);border-radius:14px;min-height:44px;font:700 11px 'Montserrat',system-ui,sans-serif}
body .axis-audio-controls input{accent-color:var(--ui-accent);border:0;background:transparent;box-shadow:none;min-height:32px}

.ax .axis-emblem{position:absolute;inset:-12.5%;width:125%;height:125%;max-width:none;object-fit:contain;z-index:10;pointer-events:none;filter:drop-shadow(0 0 5px #40e0d055)}
.legend-icon .axis-emblem{width:125%;height:125%;object-fit:contain;pointer-events:none;flex-shrink:0}
.lab-axis-legend{display:inline-flex;align-items:center;gap:3px}.lab-axis-legend .axis-emblem{width:25px;height:25px;object-fit:contain}

.axis-lab-page .ax{position:relative}

/* Author's exact piece palette, shared by every board and both themes. */
:root{--axis-piece:#2b5947;--orange-piece:#c96844;--blue-piece:#16487e}
body .pc.orange,body .piece.orange{background:var(--orange-piece)}
body .pc.navy,body .piece.navy{background:var(--blue-piece)}
body .ax{background:var(--axis-piece);box-shadow:0 0 25px #2b594766}
body .ax .axis-emblem,body .icon-axis .axis-emblem{filter:brightness(0) invert(1)}
body .icon-axis{background:var(--axis-piece)}
body .ax .ax-core{opacity:.08}
body .ax .ax-aura{border-color:#2b594780}
body .ax.influence-orange .ax-aura{border-color:var(--orange-piece)}
body .ax.influence-navy .ax-aura{border-color:var(--blue-piece)}
body .fill.orange{background:var(--orange-piece)}body .fill.navy{background:var(--blue-piece)}body .fill.axis{background:var(--axis-piece)}