/* Explicit page/section alignment: do not inherit the old 620px left-aligned landing. */
body{background-position:center top;background-size:cover;background-repeat:no-repeat;background-attachment:fixed}
#game-content{margin-inline:auto}
#lobby{width:100%;max-width:1100px;margin:0 auto;text-align:center;padding:32px 0}
#lobby .lobby-heading{width:100%;display:flex;align-items:center;justify-content:center}
#lobby h1{letter-spacing:.025em;word-spacing:.08em;line-height:1.25;margin:12px 0 16px;font-size:clamp(25px,3.2vw,42px)}
#lobby h1 em{display:inline-block}
#lobby .arena-cards{width:100%;max-width:1050px;margin:24px auto}
#lobby #create[hidden]{display:none}
#lobby .lobby-tools{display:none}
#lobby .shop-entry{height:48px;padding:4px 14px 4px 6px;display:flex;align-items:center;justify-content:center;gap:8px;border:1px solid #f8cb6177;border-radius:12px;background:linear-gradient(#143650,#081a30);transition:transform .15s,box-shadow .15s}
#lobby .shop-entry img{display:block;width:44px;height:36px;object-fit:contain;filter:drop-shadow(0 2px 5px #e8a12055)}
#lobby .shop-entry span{font-size:11px;letter-spacing:.08em;color:#ffe286;white-space:nowrap}
#lobby .shop-entry:hover{transform:translateY(-2px);box-shadow:0 0 28px #28baff66}
@media(max-width:650px){#lobby{padding:24px 0}#lobby h1{font-size:27px}#lobby .arena-cards,#lobby .lobby-tools{max-width:440px}}
.room-bar .lobby-return{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 20px;border:2px solid #53d8ff;border-radius:12px;background:linear-gradient(#174c72,#09213d);color:#fff;text-decoration:none;font-size:15px;letter-spacing:.06em;box-shadow:0 0 14px #35caff44;white-space:nowrap}
.room-bar .lobby-return:hover{border-color:#ffe286;background:#174c72}
.room-bar .lobby-return::before{content:'←';margin-right:8px}
#battle-stage #opponent-choice{position:absolute;left:32%;top:39%;width:36%;z-index:4;display:grid;gap:10px;padding:14px;border:1px solid #51ceff88;border-radius:16px;background:#06162eee;box-shadow:0 8px 25px #0008}
#battle-stage #opponent-choice[hidden],#battle-stage .panel-rival[hidden],#rival-beam[hidden]{display:none}
#battle-stage #opponent-choice button{position:static;left:auto;top:auto;width:100%;min-height:44px;padding:10px;font-size:clamp(10px,1.2cqw,17px)}
#opponent-choice small{font-size:clamp(9px,.9cqw,12px);text-align:center;color:#c6d9ef}
#rival-beam{position:absolute;left:80%;top:34%;width:19%;height:49%;z-index:3;pointer-events:none;background:repeating-linear-gradient(90deg,transparent 0 8%,#a9efff88 9% 10%,transparent 11% 15%),linear-gradient(transparent,#54d7ffbb);border-radius:50% 50% 15% 15%;box-shadow:0 0 30px #5adfff88}
#player-beam{position:absolute;left:1%;top:34%;width:19%;height:49%;z-index:3;pointer-events:none;background:repeating-linear-gradient(90deg,transparent 0 8%,#a9efff88 9% 10%,transparent 11% 15%),linear-gradient(transparent,#54d7ffbb);border-radius:50% 50% 15% 15%;box-shadow:0 0 30px #5adfff88}
#player-beam[hidden]{display:none}
#lobby .arena-stakes{display:flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap}
#lobby .stake-chip{width:30px;height:30px;object-fit:contain;filter:drop-shadow(0 1px 4px #ffca4855)}
#lobby .arena-card small{display:flex;align-items:center;justify-content:center;gap:4px}
#lobby .pot-chip{width:19px;height:19px;object-fit:contain}
@media(max-width:650px){#lobby h1{font-size:clamp(20px,5vw,27px)}#battle-stage #opponent-choice{left:24%;top:28%;width:52%;gap:6px;padding:8px}#opponent-choice small{font-size:9px}}
header #open-shop{width:112px;height:48px;flex:0 0 112px;padding:6px 10px;display:inline-flex;flex-direction:row;gap:8px;align-items:center;justify-content:center;border:1px solid #f8cb6188;border-radius:10px;background:#102039;box-shadow:0 0 10px #f8cb6122}
header #open-shop img{width:32px;height:32px;object-fit:contain;filter:drop-shadow(0 1px 3px #e8a12055)}
header #open-shop span{font-size:13px;line-height:16px;letter-spacing:.04em;color:#ffe286}
@media(max-width:900px){header{grid-template-columns:minmax(0,1fr) 104px repeat(4,44px)}header #open-shop{grid-column:2;grid-row:2;width:104px;height:44px;flex-basis:104px;padding:4px 8px;gap:6px}header #sound{grid-column:3;grid-row:2}header #rotate-screen{grid-column:4;grid-row:2}header #fullscreen{grid-column:5;grid-row:2}header #open-help{grid-column:6;grid-row:2}header .profile-chip,header .login{grid-column:1;grid-row:2}}
@media(max-width:900px) and (orientation:portrait){header{grid-template-columns:minmax(0,1fr) repeat(5,44px)}header #open-shop{width:44px;flex-basis:44px;padding:4px}header #open-shop span{display:none}}
@media(max-width:700px){header #open-shop img{width:28px;height:28px}}
/* One compact toolbar: keep the balance, omit only the name on portrait phones. */
@media(max-width:900px) and (orientation:portrait){
  header{grid-template-columns:minmax(0,1fr) repeat(5,44px);gap:4px}
  header .profile-chip{width:100%;margin-right:0;gap:4px;padding:4px;min-height:44px}
  header .profile-chip #account{display:block;min-width:0;font-size:11px}
  header .account-name,header .account-unit{display:none}
  header .profile-chip img{width:28px;height:28px;flex-shrink:0}
  header #open-shop{grid-column:2;grid-row:2}
  header #sound{grid-column:3;grid-row:2}
  header #rotate-screen{grid-column:4;grid-row:2}
  header #fullscreen{grid-column:5;grid-row:2}
  header #open-help{grid-column:6;grid-row:2}
}
@media(max-width:360px) and (orientation:portrait){
  header{grid-template-columns:minmax(0,1fr) repeat(5,34px)}
  header #open-shop,header .header-icon,header #rotate-screen{width:34px;min-width:34px;padding:4px;min-height:44px}
}
body.fullscreen-active header #open-shop img{width:26px;height:26px}
header .brand{display:flex;align-items:center;flex-shrink:0}
header .header-logo{display:block;width:220px;height:auto;max-width:100%;object-fit:contain}
@media(max-width:900px){header .header-logo{width:190px}}
@media(max-height:500px) and (orientation:landscape){header .header-logo{width:140px}}
.star-progress{display:flex;align-items:center;gap:12px;width:min(340px,100%);margin:12px auto 20px;padding:12px 18px;border:1px solid #ffd57a66;border-radius:14px;background:linear-gradient(120deg,#183953ee,#0a172bee);text-align:left;box-shadow:0 0 18px #ffd57a11}
.star-badge{font-size:36px;filter:drop-shadow(0 0 6px #ffd57a66)}.star-progress>div{flex:1;min-width:0}.star-progress strong{font:14px Russo;color:#ffe286}.star-progress span:not(.star-badge){float:right;font-size:13px;color:#ffe286}.star-progress progress{display:block;width:100%;height:9px;margin:8px 0;accent-color:#ffd57a}.star-progress small{font-size:11px;display:block;color:#bdd0e3}#profile-progress{width:100%;margin:16px 0}
#level-up{position:fixed;left:50%;top:max(20px,env(safe-area-inset-top));transform:translateX(-50%);z-index:1100;display:flex;align-items:center;gap:12px;border:2px solid #ffd57a;border-radius:18px;background:#102039f5;padding:18px 24px;color:#ffe286;box-shadow:0 0 35px #ffc74466;pointer-events:none;animation:star-arrival .4s ease-out}#level-up[hidden]{display:none}#level-up>span:first-child{font-size:32px}@keyframes star-arrival{from{opacity:0;transform:translate(-50%,-20px) scale(.8)}to{opacity:1;transform:translate(-50%,0) scale(1)}}@media(prefers-reduced-motion:reduce){#level-up{animation:none}}