@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;--bg:#10131b;--panel:#151a24;--line:#2a303d;--text:#edf0f5;--muted:#81899c;--accent:#c8f975;--cyan:#73ded7}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 50% 45%,#1a2330 0,transparent 60%),var(--bg);color:var(--text);font-family:'DM Sans',sans-serif;font-size:14px}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit}button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:5px}header{height:86px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 5%}.brand{text-decoration:none;color:var(--text);font:700 29px 'Space Grotesk',sans-serif;letter-spacing:5px;display:flex;align-items:center;gap:13px}.brand-icon{color:var(--accent);font-size:39px}.edition{font:10px 'DM Sans',sans-serif;letter-spacing:2px;border-left:1px solid var(--line);padding-left:20px;margin-left:14px;color:var(--muted)}.header-right{display:flex;align-items:center;gap:10px;font-size:10px;letter-spacing:1.5px;color:var(--muted)}.header-right button{background:none;border:1px solid var(--line);border-radius:5px;padding:9px 12px;font-size:10px;margin-left:24px}.live-dot,.cyan-dot{display:inline-block;width:6px;height:6px;background:var(--accent);border-radius:50%}.cyan-dot{background:var(--cyan)}main{max-width:1320px;margin:auto;padding:39px 40px 0}.intro{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:32px}.eyebrow{font-size:10px;letter-spacing:2px;color:var(--accent);font-weight:600}h1{font:500 43px/1.13 'Space Grotesk',sans-serif;letter-spacing:-1.8px;margin:13px 0 0}h1 span{color:#959eb0}.intro-copy{color:var(--muted);line-height:1.8;font-size:13px;margin-bottom:3px}.game-layout{display:grid;grid-template-columns:220px minmax(320px,620px) 220px;gap:30px;align-items:start}.left-panel,.right-panel{padding-top:15px}.section-label{display:flex;justify-content:space-between;color:#a5adbd;font-size:10px;letter-spacing:1.7px;font-weight:600}.section-label>span{color:#555f73}.score-label{font-size:10px;color:var(--muted);letter-spacing:1.7px;margin-top:35px}.score{font:500 51px 'Space Grotesk',sans-serif;letter-spacing:-2px;color:var(--accent);margin:5px 0}.best{font-size:10px;color:var(--muted);letter-spacing:1px}.best strong{color:#c1c8d5;font-weight:500;margin-left:14px}.stats{display:flex;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:27px 0 31px;padding:20px 0}.stats>div{width:50%;display:flex;flex-direction:column;gap:8px}.stats>div+div{border-left:1px solid var(--line);padding-left:23px}.stats span{font-size:10px;color:var(--muted);letter-spacing:1.5px}.stats strong{font:400 27px 'Space Grotesk',sans-serif}.balance-track{position:relative;height:5px;margin:24px 0 12px;background:linear-gradient(90deg,#779cad,#c8f975,#779cad);border-radius:9px}.balance-track b{position:absolute;left:50%;top:-4px;height:13px;width:1px;background:#e2e8ef}.balance-track i{position:absolute;left:50%;top:-4px;width:5px;height:13px;background:white;box-shadow:0 0 9px #fff;z-index:1;transition:left .3s}.balance-labels{display:flex;justify-content:space-between;font-size:8px;letter-spacing:1px;color:var(--muted)}.balance-card p{font-size:11px;color:var(--muted);margin-top:17px}.tip{display:flex;gap:12px;border:1px solid var(--line);border-radius:9px;padding:15px 13px;margin-top:28px;background:#ffffff02}.tip>span{color:var(--accent);font-size:25px}.tip p{margin:0;font-size:11px;color:var(--muted);line-height:1.7}.tip strong{display:block;color:#c6ceda;font-weight:500;margin-bottom:4px}.arena-wrap{border:1px solid #354050;border-radius:12px;overflow:hidden;background:#101620;box-shadow:0 25px 70px #0005}.arena-top,.arena-bottom{height:43px;display:flex;align-items:center;justify-content:space-between;padding:0 17px;font-size:9px;letter-spacing:1.4px;color:#b0bacb;background:#19212c}.arena-top .live-dot{margin-right:6px}.arena-top button{background:none;border:1px solid #3a4556;border-radius:4px;padding:3px 8px}.arena-bottom{height:36px;font-size:8px;background:#141c26}.arena-bottom i{margin-right:5px}.canvas-wrap{position:relative;aspect-ratio:1}#board{display:block;width:100%;height:auto}.overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#101620dc;text-align:center;padding:20px;backdrop-filter:blur(3px)}.overlay.hidden{display:none}.orb{font-size:55px;color:var(--accent);margin-bottom:12px;text-shadow:0 0 40px #c8f94566}.overlay .eyebrow{font-size:8px}.overlay h2{font:500 36px 'Space Grotesk',sans-serif;letter-spacing:-1.4px;margin:12px 0}.overlay p:not(.eyebrow){color:#9ca9bb;line-height:1.8;font-size:12px}.primary{margin-top:18px;border:0;border-radius:6px;background:var(--accent);color:#182313;padding:17px 23px;font-size:11px;letter-spacing:1px;font-weight:700;min-width:230px;box-shadow:0 0 30px #c8f97515}.primary:hover{background:#dbff9e}.primary span{margin-left:27px}.overlay-foot{font-size:8px;color:#79869b;letter-spacing:1px;margin-top:24px}.toast{position:absolute;left:50%;top:15%;transform:translateX(-50%);background:#c8f975;color:#182313;padding:10px 18px;border-radius:5px;white-space:nowrap;font-weight:700;font-size:12px;opacity:0;transition:opacity .2s;pointer-events:none}.toast.visible{opacity:1}#next{display:block;width:100%;height:125px;margin-top:15px;background:#141b26;border:1px solid var(--line);border-radius:9px}.piece-info{display:flex;justify-content:space-between;font-size:8px;color:var(--muted);letter-spacing:.6px;margin:11px 0 30px}.piece-info>span:first-child{color:var(--cyan)}.rule{display:flex;gap:12px;margin-top:19px}.rule>span{font:12px 'Space Grotesk',sans-serif;color:var(--accent);padding-top:2px}.rule p{margin:0;color:var(--muted);font-size:11px;line-height:1.7}.rule strong{display:block;color:#c8d0dc;font-weight:500;margin-bottom:3px}.controls{border-top:1px solid var(--line);padding-top:22px;margin-top:25px}.controls>div:not(.section-label){display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:10px;margin-top:10px}kbd{display:inline-block;min-width:24px;padding:4px 6px;text-align:center;border:1px solid #354052;border-bottom-width:2px;border-radius:4px;background:#1c2430;color:#c4cddd;font:11px monospace}kbd.wide{font-size:8px}footer{display:flex;justify-content:space-between;border-top:1px solid var(--line);margin-top:35px;padding:20px 0;color:#687488;font-size:8px;letter-spacing:1.8px}.muted{color:#465268;margin:0 7px}.touch-controls{display:none;gap:8px;margin-top:15px}.touch-controls button{touch-action:manipulation;background:#222d3c;border:1px solid #39485c;border-radius:8px;padding:16px;flex:1}.touch-controls button:last-child{background:var(--accent);color:#182313;font-size:10px;font-weight:bold}@media(min-width:1500px){main{padding-top:50px}.intro{margin-bottom:40px}}@media(max-width:1050px){.game-layout{grid-template-columns:170px minmax(300px,1fr);gap:24px}.right-panel{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:20px}.right-panel>.section-label,.right-panel>#next,.piece-info{display:none}.controls{margin:0;padding:0;border:0}.rules .rule{margin-top:12px}.touch-controls{display:flex}}@media(max-width:600px){header{height:64px;padding:0 20px}.brand{font-size:24px}.edition,.header-right>.live-dot{display:none}.header-right{font-size:0;gap:0}.header-right button{font-size:9px;margin:0}main{padding:24px 16px 0}.intro{margin-bottom:23px}.intro h1{font-size:33px}.intro .eyebrow{font-size:8px}.intro-copy{display:none}.game-layout{grid-template-columns:1fr;gap:18px}.left-panel{display:flex;align-items:center;justify-content:space-between;padding:0;gap:10px}.left-panel>.section-label,.score-label,.best,.balance-card,.tip{display:none}.score{font-size:34px;margin:0}.stats{border:0;margin:0;padding:0;gap:20px}.stats>div{width:auto;gap:2px}.stats>div+div{padding-left:20px}.stats span{font-size:8px}.stats strong{font-size:20px}.arena-wrap{grid-row:2}.right-panel{grid-row:3;gap:22px}.overlay h2{font-size:30px}.orb{font-size:40px;margin:0}.overlay-foot{font-size:6px}.arena-bottom{font-size:6px;padding:0 12px}.touch-controls{position:sticky;bottom:8px;background:#10131bf0;padding:8px;border-radius:10px;z-index:3}.touch-controls button{padding:13px 10px}footer{font-size:7px;line-height:1.8}footer>span:last-child{display:none}}
/* Play-first layout: keep the complete board inside the available viewport. */
header{height:54px;padding:0 24px}.brand{font-size:23px}.brand-icon{font-size:30px}
main{max-width:none;padding:14px 20px 0}.intro,footer,.tip{display:none}
.game-layout{grid-template-columns:160px minmax(0,1fr) 160px;gap:20px;max-width:1800px;margin:0 auto;align-items:start}
.arena-wrap{width:min(100%,calc(100vh - 150px));width:min(100%,calc(100dvh - 150px));justify-self:center}
.arena-top{height:34px}.arena-bottom{height:27px}.left-panel,.right-panel{padding-top:10px;min-width:0}
.score{font-size:38px}.score-label{margin-top:24px}.stats{margin:20px 0;padding:16px 0}.stats>div+div{padding-left:15px}
#next{height:auto;aspect-ratio:8/5}.piece-info{flex-direction:column;gap:8px;margin-bottom:22px}
.help{border-top:1px solid var(--line);padding-top:16px}.help summary{cursor:pointer;color:#b8c3d3;font-size:12px;padding:5px 0}.help .rules{margin-top:20px}.help .controls{margin-top:20px}
.balance-card p{line-height:1.7}.balance-card .section-label{font-size:9px;letter-spacing:.7px}
@media(max-width:1050px){
 .game-layout{grid-template-columns:135px minmax(0,1fr);gap:16px}
 .arena-wrap{width:min(100%,calc(100dvh - 175px))}
 .right-panel{grid-column:1;grid-row:2;display:block}.right-panel>.section-label,.right-panel>#next,.piece-info{display:block}
 .arena-wrap{grid-column:2;grid-row:1/3}.right-panel{margin-top:0}.piece-info>span{display:block;margin-bottom:5px}
 .touch-controls{max-width:640px;margin:10px auto;position:static;padding:0}.touch-controls button{padding:11px}
}
@media(max-width:600px){
 header{height:46px;padding:0 12px}.edition{display:none}main{padding:8px 8px 0}
 .game-layout{display:flex;flex-direction:column;gap:8px}.left-panel{width:100%;padding:0 4px;display:flex;flex-wrap:wrap}
 .score{font-size:28px}.stats{margin:0;padding:0}.stats strong{font-size:18px}
 .balance-card{display:block;width:100%;}.balance-card .section-label,.balance-track,.balance-labels{display:none}.balance-card p{margin:0;font-size:10px}
 .arena-wrap{width:min(100%,calc(100dvh - 205px));align-self:center}.right-panel{width:100%;padding:0;order:3}
 .right-panel>.section-label,.right-panel>#next,.piece-info{display:none}.help{border:0;padding:0}.help summary{font-size:10px}
 .help[open]{padding:12px}.help .rules,.help .controls{max-width:400px;margin:12px auto}
 .touch-controls{position:sticky;bottom:4px;z-index:3;padding:5px;margin-top:4px;gap:5px}.touch-controls button{padding:11px 6px}
 .overlay{padding:12px}.overlay h2{font-size:24px;margin:8px 0}.overlay p:not(.eyebrow){font-size:10px;margin:5px 0}.overlay .eyebrow{font-size:6px}
 .orb{font-size:32px}.primary{margin-top:10px;padding:13px 16px;min-width:200px}.overlay-foot{margin-top:12px}.arena-top{height:28px}.arena-bottom{height:22px}
}
@media(pointer:coarse) and (min-width:1051px){.touch-controls{display:flex;max-width:650px;margin:8px auto}.touch-controls button{padding:10px}}


/* AXIS V5 — play-first responsive interface */
:root{--ui-max:1680px}
body{min-height:100dvh;overflow-x:hidden}
header{height:64px;padding:0 clamp(16px,3vw,48px)}
main{max-width:var(--ui-max);padding:18px clamp(14px,2.5vw,38px) 24px}
.game-layout{
  display:grid;
  grid-template-columns:minmax(190px,250px) minmax(520px,1fr) minmax(190px,250px);
  gap:clamp(18px,2.2vw,34px);
  align-items:start;
  max-width:var(--ui-max);
}
.arena-wrap{
  width:min(100%,calc(100dvh - 150px));
  max-width:920px;
  min-width:0;
  justify-self:center;
  border-radius:16px;
}
.arena-top{height:42px;padding:0 18px}
.arena-bottom{height:34px;padding:0 18px}
.left-panel,.right-panel{padding-top:8px}
.score{font-size:clamp(42px,4vw,62px)}
.score-label{margin-top:28px}
.stats{margin:24px 0 28px;padding:20px 0}
.stats strong{font-size:32px}
#next{min-height:150px}
.help summary{font-size:13px;padding:10px 0}
.rule p{font-size:12px}
.controls>div:not(.section-label){font-size:11px;margin-top:13px}
kbd{
 min-width:32px;padding:7px 9px;border-radius:6px;
 font-size:13px;background:#202a38;box-shadow:0 2px 0 #0b0f15;
}
kbd.wide,.space-key{min-width:78px;font-size:9px}
.key-strip{
 display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
 gap:10px 18px;padding:12px 10px 13px;border-top:1px solid var(--line);
 background:#111923;color:#8490a3;font-size:9px;letter-spacing:1px
}
.key-strip span{display:flex;align-items:center;gap:6px}
.key-strip kbd{min-width:24px;padding:4px 6px;font-size:10px;box-shadow:none}
.key-strip .space-key{min-width:62px;font-size:7px}
.touch-controls{max-width:920px;margin:12px auto 0}
.touch-controls button{
 min-height:62px;display:flex;flex-direction:column;align-items:center;
 justify-content:center;gap:3px;padding:8px;border-radius:12px
}
.touch-controls button b{font-size:24px;line-height:1}
.touch-controls button span{font-size:8px;letter-spacing:1px}
.touch-controls .drop-key{background:var(--accent);color:#182313}
@media(min-width:1350px){
 .arena-wrap{max-width:900px}
 .left-panel,.right-panel{font-size:15px}
}
@media(max-width:1180px){
 .game-layout{grid-template-columns:170px minmax(440px,1fr) 170px;gap:16px}
 .arena-wrap{width:min(100%,calc(100dvh - 160px))}
 .piece-info{font-size:7px}
}
@media(max-width:900px){
 header{height:54px}
 main{padding-top:10px}
 .game-layout{grid-template-columns:minmax(125px,170px) minmax(0,1fr);gap:14px}
 .arena-wrap{grid-column:2;grid-row:1/3;width:100%;max-width:none}
 .right-panel{grid-column:1;grid-row:2;display:block}
 .right-panel>.section-label,.right-panel>#next,.piece-info{display:block}
 .left-panel{grid-column:1;grid-row:1}
 .key-strip{gap:8px 12px}
 .touch-controls{display:flex}
}
@media(max-width:680px){
 header{height:50px;padding:0 12px}.brand{font-size:21px}.brand-icon{font-size:28px}
 main{padding:8px 8px 90px}
 .game-layout{display:flex;flex-direction:column;gap:8px}
 .left-panel{
   order:1;width:100%;display:grid;grid-template-columns:1fr auto;
   align-items:center;gap:4px 14px;padding:5px 8px
 }
 .left-panel>.section-label,.score-label,.best,.tip{display:none}
 .score{font-size:32px;margin:0}
 .stats{margin:0;padding:0;border:0;gap:18px}
 .stats strong{font-size:20px}
 .balance-card{grid-column:1/-1;width:100%;display:block}
 .balance-card .section-label,.balance-track,.balance-labels{display:none}
 .balance-card p{margin:0;font-size:9px}
 .arena-wrap{order:2;width:100%;max-width:none;align-self:center;border-radius:10px}
 .arena-top{height:30px}.arena-bottom{height:24px}
 .key-strip{display:none}
 .right-panel{order:3;width:100%;padding:0}
 .right-panel>.section-label,.right-panel>#next,.piece-info{display:none}
 .help{border:0;padding:0}.help summary{font-size:11px}
 .touch-controls{
   display:grid;grid-template-columns:repeat(5,1fr);position:fixed;
   left:8px;right:8px;bottom:max(6px,env(safe-area-inset-bottom));
   margin:0;padding:6px;background:#10131bf2;backdrop-filter:blur(12px);
   border:1px solid #2c3746;border-radius:14px;z-index:20
 }
 .touch-controls button{min-height:58px;padding:6px}
 .touch-controls button b{font-size:22px}
 .overlay h2{font-size:27px}
}
@media(max-width:410px){
 .touch-controls{gap:4px;left:4px;right:4px}
 .touch-controls button{min-height:54px}
 .touch-controls button span{font-size:7px}
 .arena-bottom span:last-child{display:none}
}

/* AXIS V6 — direct touch gestures */
.canvas-wrap{overscroll-behavior:contain}
.touch-hint{
 display:none;position:absolute;left:50%;bottom:14px;transform:translateX(-50%);
 width:min(92%,430px);padding:12px 42px 12px 14px;border:1px solid #425064;
 border-radius:10px;background:#101722ee;backdrop-filter:blur(10px);
 color:#aeb9c9;font-size:10px;line-height:1.6;z-index:12;pointer-events:auto
}
.touch-hint.visible{display:grid;gap:2px}
.touch-hint strong{color:var(--accent);font-size:9px;letter-spacing:1.4px}
.touch-hint button{
 position:absolute;right:8px;top:8px;width:30px;height:30px;border:1px solid #3b4758;
 border-radius:7px;background:#1b2430;color:#c7d0dd;font-size:18px;line-height:1
}
@media(pointer:fine){
 .touch-controls{display:none!important}
}
@media(pointer:coarse){
 .canvas-wrap{touch-action:none}
 .touch-controls{display:grid}
 .key-strip{display:none}
 #board{user-select:none;-webkit-user-select:none}
}
@media(max-width:680px){
 .touch-hint{bottom:8px;font-size:9px}
}

/* AXIS V7 — visible mobile instructions and controls */
.mobile-controls-help{display:none}
@media(max-width:900px){
 .mobile-controls-help{
   display:block;width:min(100%,920px);margin:10px auto 6px;padding:10px 12px;
   border:1px solid #2d3948;border-radius:12px;background:#111923;color:#aeb9c9
 }
 .mobile-help-title{
   text-align:center;color:var(--accent);font-size:9px;font-weight:800;
   letter-spacing:1.6px;margin-bottom:8px
 }
 .mobile-help-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
 .mobile-help-grid span{
   min-width:0;display:flex;flex-direction:column;align-items:center;gap:2px;
   font-size:7px;letter-spacing:.8px
 }
 .mobile-help-grid b{font-size:18px;color:#e7edf5;line-height:1}
 .mobile-help-note{text-align:center;font-size:8px;margin-top:8px;color:#77869a}
 .touch-controls{display:grid!important}
}
@media(max-width:680px){
 .mobile-controls-help{
   order:4;position:fixed;left:8px;right:8px;bottom:76px;width:auto;margin:0;
   z-index:19;padding:7px 10px;border-radius:11px;background:#10131bf2;
   backdrop-filter:blur(12px)
 }
 .mobile-help-title{margin-bottom:5px}
 .mobile-help-grid b{font-size:16px}
 .mobile-help-note{font-size:7px;margin-top:5px}
 .touch-controls{display:grid!important}
}
@media(max-width:380px){
 .mobile-help-note{display:none}
 .mobile-help-grid b{font-size:15px}
}

/* PublikaYA — enlace de regreso al hub de juegos */
.back-link{color:var(--muted);text-decoration:none;border:1px solid var(--line);border-radius:5px;padding:9px 12px;font-size:10px;letter-spacing:1.5px;margin-right:18px}
.back-link:hover{color:var(--text);border-color:#4A90E2}
@media(max-width:600px){.back-link{font-size:9px;padding:7px 9px;margin-right:8px}}