/* SHARDWAKE ALPHA 08 — mobile-first LANDSCAPE interface */
:root{
  --sw-landscape-nav:64px;
  --sw-landscape-actions:164px;
  --safe-left:env(safe-area-inset-left,0px);
  --safe-right:env(safe-area-inset-right,0px);
  --safe-top:env(safe-area-inset-top,0px);
}

/* Portrait phones intentionally ask the player to rotate. Installed PWA is also locked via manifest. */
#rotate-device{display:none}
@media (orientation:portrait) and (max-width:760px){
  #rotate-device{display:flex;position:fixed;inset:0;z-index:9999;align-items:center;justify-content:center;text-align:center;padding:28px;background:radial-gradient(circle at 50% 28%,#273b50 0%,#0a1320 42%,#050a11 100%);color:#f4e7ce}
  #rotate-device .rotate-card{width:min(92vw,390px);padding:26px 22px;border:1px solid #c6a5687d;border-radius:18px;background:linear-gradient(150deg,#17283af3,#09131ff6);box-shadow:0 30px 80px #000c,inset 0 1px #fff1}
  #rotate-device .rotate-icon{font-size:3rem;line-height:1;margin-bottom:13px;display:block;animation:swRotateHint 2.2s ease-in-out infinite}
  #rotate-device h2{margin:0 0 8px;color:#f2d9a9;font-size:1.4rem}
  #rotate-device p{margin:0;color:#b9c7d1;font-size:.86rem;line-height:1.5}
}
@keyframes swRotateHint{0%,100%{transform:rotate(0)}50%{transform:rotate(90deg)}}

/* Phones in landscape: dedicated game shell, not the desktop breakpoint. */
@media (orientation:landscape) and (max-height:600px) and (max-width:1000px){
  html,body{width:100%;height:100%;overscroll-behavior:none}
  body{overflow:hidden;background:#050b12}
  .app-shell{height:100dvh;min-height:100dvh;overflow:hidden}
  .sidebar{display:none!important}
  .main{height:100dvh;overflow-y:auto;overflow-x:hidden;padding-left:calc(var(--sw-landscape-nav) + var(--safe-left));scrollbar-width:thin}
  .content{max-width:none;padding:calc(7px + var(--safe-top)) calc(10px + var(--safe-right)) 10px 10px}

  /* Vertical thumb rail leaves the lower edge free for gameplay. */
  .mobile-nav{display:flex!important;position:fixed;z-index:90;left:0;top:0;bottom:0;right:auto;width:calc(var(--sw-landscape-nav) + var(--safe-left));height:100dvh;padding:calc(4px + var(--safe-top)) 5px 4px var(--safe-left);flex-direction:column;justify-content:space-evenly;gap:2px;background:linear-gradient(90deg,#07111cfb,#0b1723f3);border-right:1px solid #c29e6060;border-top:0;box-shadow:10px 0 34px #0009;backdrop-filter:blur(18px)}
  .mobile-nav .nav-btn{display:grid;grid-template-rows:20px auto;place-items:center;align-content:center;gap:2px;min-height:44px;width:100%;padding:3px 1px;border-radius:9px;font-size:.43rem;line-height:1;color:#91a4b3}
  .mobile-nav .nav-btn .ico{width:18px;height:18px}
  .mobile-nav .nav-btn span{display:block;max-width:52px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .mobile-nav .nav-btn.active{color:#f7d99c;background:linear-gradient(90deg,#b88b4936,#8d69351b);box-shadow:inset 2px 0 #efcc88,0 0 16px #d1a25517}

  .topbar{min-height:31px;margin:0 0 7px;gap:8px}
  .topbar .eyebrow{font-size:.5rem;letter-spacing:.12em}
  .topbar .resource-bar{gap:4px}
  .topbar .pill{padding:4px 7px;font-size:.55rem;min-height:25px}
  .section-head{margin-bottom:8px;align-items:center}
  .section-head h2{font-size:1.05rem;margin:2px 0 0}
  .eyebrow{font-size:.54rem}
  .btn{min-height:34px;padding:7px 10px;font-size:.58rem;border-radius:7px}
  .panel-padding{padding:11px}

  /* Home / general pages use horizontal cards and the short viewport intelligently. */
  .hero{min-height:230px;margin-bottom:11px;border-radius:13px;background-position:center 38%}
  .hero-content{max-width:58%;padding:22px 26px}
  .hero h1{font-size:2.15rem;margin:7px 0 8px}
  .hero p{font-size:.73rem;line-height:1.42;margin-bottom:10px}
  .hero-tag{font-size:.53rem}
  .dashboard-grid{grid-template-columns:1.2fr .8fr;gap:10px}
  .featured{grid-template-columns:105px 1fr;min-height:155px;padding:9px;gap:10px}
  .featured-art{height:145px}
  .featured h3{font-size:.78rem}.featured p,.mission p{font-size:.66rem;line-height:1.35}
  .mission-list{gap:7px;margin-top:9px}.mission-item{padding-bottom:6px;font-size:.65rem}
  .home-chapter{grid-template-columns:150px 1fr;min-height:165px;margin-top:10px;border-radius:12px}
  .home-chapter-art{min-height:165px;height:165px}.home-chapter-text{padding:12px 14px;margin:0}
  .home-chapter-text h2{font-size:.94rem;margin:5px 0}.home-chapter-text p{font-size:.66rem;line-height:1.35;margin-bottom:8px}

  /* Starter becomes a 3-card landscape selector. */
  .starter{height:100dvh;min-height:100dvh;padding:10px calc(16px + var(--safe-right)) 10px calc(16px + var(--safe-left));overflow:auto}
  .starter-inner{max-width:900px}
  .starter .eyebrow{font-size:.5rem}.starter h1{font-size:1.8rem;margin:5px auto}.starter-inner>p{font-size:.67rem;margin-bottom:5px}
  .starter .faction-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:9px 0;padding:0;overflow:visible}
  .starter .faction-tile{height:190px;min-width:0;flex:none}.starter .faction-tile .faction-name{font-size:.92rem;bottom:30px}.starter .faction-tile .faction-sub{font-size:.5rem;bottom:10px}
  .starter-note{font-size:.6rem}

  /* Campaign is a horizontal route rather than a tall mobile feed. */
  .chapter-hero{min-height:168px;padding:15px 22px;border-radius:12px;background-position:center 38%}
  .chapter-hero:before{font-size:110px;right:4%;top:-8%}
  .chapter-hero h1{font-size:1.72rem;margin:6px 0}.chapter-hero p{font-size:.67rem;line-height:1.36;max-width:55%;margin-bottom:3px}
  .chapter-progress{margin-top:7px;font-size:.51rem;max-width:260px}
  .chapter-map{display:flex;overflow-x:auto;gap:10px;padding:10px 2px 8px;scroll-snap-type:x mandatory}
  .chapter-card{flex:0 0 min(73vw,520px);display:grid;grid-template-columns:130px 1fr;min-height:180px;scroll-snap-align:center;border-radius:12px}
  .chapter-art{height:auto;min-height:180px}.chapter-copy{padding:11px 12px}.chapter-copy h2{font-size:.88rem;margin:4px 0 2px}.chapter-place{font-size:.56rem}.chapter-copy p{font-size:.59rem;line-height:1.33;margin:6px 0}.chapter-strategy{font-size:.5rem;padding:3px 5px}.chapter-reward{margin-top:6px;padding-top:6px;gap:6px}.chapter-reward img{width:28px;height:37px}.chapter-reward strong{font-size:.45rem}.chapter-reward span{font-size:.52rem}.chapter-actions{margin-top:6px}.chapter-actions .btn{min-width:0;min-height:31px;font-size:.54rem;padding:5px 8px}.chapter-number{bottom:7px;left:7px;padding:4px 5px;font-size:.49rem}.chapter-bottom{margin:0 0 8px;gap:8px}.chapter-bottom p{font-size:.58rem}

  /* Collection / deck building: more cards visible in landscape. */
  .collection-tools{position:sticky;top:2px;z-index:20;display:grid;grid-template-columns:auto minmax(170px,1fr) auto;align-items:center;gap:7px;padding:6px 8px;margin:5px 0 6px;border-radius:10px}
  .search-label{width:auto;font-size:.48rem}.collection-search{min-height:32px;padding:6px 9px;font-size:.68rem}.collection-matches{font-size:.54rem}
  .filters{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:5px;margin-bottom:7px;padding-bottom:2px}.filter{flex:none;min-height:29px;padding:5px 8px;font-size:.53rem}
  .card-grid{grid-template-columns:repeat(auto-fill,minmax(94px,1fr));gap:7px}.card-grid .card-wrap{padding:2px}.card-qty{font-size:.48rem!important}
  .deck-layout{grid-template-columns:minmax(0,1fr) 235px;gap:9px}.deck-sidebar{position:sticky;top:4px;order:initial}.deck-sidebar .panel-padding{padding:10px}
  .pack-layout{grid-template-columns:minmax(0,1fr) 260px;gap:10px}.pack-stage{min-height:260px}.booster{height:225px!important}.reveal-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
  .profile-grid{grid-template-columns:repeat(3,1fr);gap:7px}.stat{padding:8px}.stat strong{font-size:1.15rem}

  /* ---------- LANDSCAPE DUEL ---------- */
  .battle-page{height:100dvh;overflow:hidden;background:#040a11}
  .battle-page .content{position:relative;height:100dvh;overflow:hidden;padding:calc(4px + var(--safe-top)) calc(var(--sw-landscape-actions) + var(--safe-right) + 8px) 4px 6px}
  .battle-page .topbar,.battle-top,.battle-guide,.turn-steps,.mobile-rift,.mobile-log{display:none!important}
  .battle-phase-bar{height:27px;min-height:27px;margin:0 0 4px;padding:4px 8px;border-radius:8px;font-size:.52rem;letter-spacing:.06em}
  .phase-dot{width:7px;height:7px}.phase-counter{gap:5px}.phase-round,.phase-mana{font-size:.5rem}
  .battle-columns{display:block;height:calc(100dvh - var(--safe-top) - 35px)}
  .battle-columns>div:first-child{height:100%;display:flex;flex-direction:column;min-width:0}
  .arena{height:100%;min-height:0;max-height:none;padding:3px 5px 4px;border-radius:12px;overflow:hidden;display:grid;grid-template-rows:30px minmax(55px,1fr) 18px minmax(55px,1fr) 30px 92px;gap:1px;background-position:center 42%!important}
  .arena:before{inset:2px;border-radius:10px}.arena:after{width:120px;height:120px}
  .arena-ornament{font-size:80px}
  .arena-head{min-height:0;height:30px;padding:0 3px;align-items:center}
  .hero-box{min-width:0;max-width:48%;height:28px;padding:2px 5px;gap:5px;border-radius:7px}
  .hero-crest{width:24px;height:24px;border-radius:6px}.hero-box h4{font-size:.44rem;margin:0 0 1px;max-width:135px}.health{font-size:.83rem}.hp-label,.hero-stats{font-size:.42rem}.resource-dots{margin:1px 0;gap:2px}.dot{width:5px;height:5px}
  .arena-lane{min-height:0;max-height:none;height:100%;align-items:center;justify-content:center;gap:5px;padding:3px 0}
  .arena-lane:before{font-size:.36rem;padding:1px 4px}
  .arena-lane .tcg-card,.arena-lane .empty-slot{width:min(8.4vw,60px);max-width:60px}.board-unit{max-width:60px;flex:0 1 60px}.unit-information{width:16px;height:16px;font-size:9px;right:-1px;top:-1px}
  .arena-mid{height:18px;min-height:18px}.arena-mid .rift-status{padding:3px 8px;font-size:.39rem;max-width:72%;letter-spacing:.03em}
  .arena-hand{height:92px;min-height:92px;max-height:92px;padding:0;overflow:hidden;border-top:1px solid #c6a86c2c;background:linear-gradient(0deg,#06101bea,#0b1722a8)}
  .hand-caption{height:19px;padding:1px 6px;font-size:.46rem;display:flex;align-items:center}.hand-view-button{min-height:17px;height:17px;padding:1px 5px;font-size:.43rem;border-radius:5px}
  .hand-scroll{height:72px;min-height:72px;flex-basis:72px;gap:6px;padding:3px 7px 2px;align-items:flex-end;overflow-x:auto}
  .arena-hand .tcg-card{width:48px;flex-basis:48px}.arena-hand .tcg-card.selected{transform:translateY(-3px) scale(1.025)}
  .arena-hand .tcg-card .card-rule,.arena-hand .tcg-card .card-type{display:none}.arena-hand .tcg-card h4{font-size:.39rem}.arena-hand .tcg-card .card-top{padding:2px}.arena-hand .tcg-card .card-cost{width:14px;height:14px;font-size:.43rem}.arena-hand .tcg-card .faction-token{font-size:.31rem;padding:1px 2px}.arena-hand .tcg-card .card-bottom{padding:0 3px 2px}.arena-hand .tcg-card .pt,.arena-hand .tcg-card .rarity-glyph{font-size:.36rem}

  /* Right action rail: selected card above, turn actions below. */
  .mobile-card-inspector{display:flex;position:fixed;z-index:72;top:calc(4px + var(--safe-top));right:calc(5px + var(--safe-right));width:156px;min-height:94px;max-height:150px;margin:0;padding:6px;gap:6px;border-radius:10px;overflow:hidden;background:linear-gradient(145deg,#1a3044f7,#08141ff9);box-shadow:0 12px 34px #000c}
  .mobile-card-inspector:not(.has-card){min-height:49px;align-items:center}.inspector-empty{font-size:.54rem;line-height:1.25}
  .inspector-art{width:40px;height:54px;flex:none}.inspector-copy{min-width:0}.inspector-eyebrow{font-size:.4rem}.inspector-copy h3{font-size:.62rem;margin:1px 0}.inspector-copy p{font-size:.48rem;line-height:1.18;max-height:2.4em;overflow:hidden;margin:0}.inspector-expand{width:25px;min-width:25px;height:33px;padding:0}.mobile-card-inspector .btn{position:absolute;right:5px;bottom:5px;min-width:62px;min-height:28px;padding:4px 6px;font-size:.49rem}
  .combat-dock{display:flex;position:fixed;z-index:71;top:calc(158px + var(--safe-top));right:calc(5px + var(--safe-right));bottom:5px;left:auto;width:156px;max-width:156px;padding:7px;gap:6px;flex-direction:column;border:1px solid #d9b87469;border-radius:10px;background:linear-gradient(180deg,#14283af6,#07131efb);box-shadow:0 12px 34px #000c,inset 0 1px #fff1}
  .dock-meta{display:grid;gap:2px;font-size:.44rem;letter-spacing:.045em;text-align:center}.dock-meta span:last-child{font-size:.42rem}
  .dock-actions{display:flex;flex:1;flex-direction:column;gap:5px;align-items:stretch}.dock-actions .btn{width:100%;min-height:32px;flex:1;padding:5px;font-size:.49rem;letter-spacing:.04em;border-radius:8px}.dock-actions .dock-mini{width:100%;flex:0 0 29px;min-height:29px}
  .battle-side{display:none!important}

  /* Incoming attacks float above the hand without forcing the board taller. */
  .defense-panel{position:fixed;z-index:75;left:calc(var(--sw-landscape-nav) + var(--safe-left) + 8px);right:calc(var(--sw-landscape-actions) + var(--safe-right) + 12px);bottom:5px;margin:0;padding:5px 8px;max-height:72px;overflow:auto;border-radius:9px;box-shadow:0 10px 35px #000d;background:#111e2af5}.defense-panel .small-label{font-size:.46rem}.defense-targets{display:flex;gap:5px;padding:2px 0}.defense-target{width:36px}.defense-target img{height:34px}.defense-target span{font-size:.4rem}

  /* Landscape modals use width instead of tall sheets. */
  .modal-backdrop{padding:7px}.modal{width:min(92vw,760px);max-height:94dvh;padding:13px;border-radius:12px}.modal-card{grid-template-columns:150px 1fr;gap:13px}.modal-card .tcg-card{max-height:78dvh}.modal-desc{font-size:.68rem;line-height:1.4}
  .hand-gallery-backdrop{align-items:center}.hand-gallery-modal{width:min(92vw,900px);max-height:94dvh;border-radius:14px;padding:11px}.gallery-head h2{font-size:1.05rem}.gallery-intro{font-size:.6rem;margin-bottom:6px}.hand-gallery-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}.hand-gallery-item{padding:5px;gap:4px}.hand-gallery-item .tcg-card{max-width:110px}.gallery-description{font-size:.51rem;min-height:2em}.gallery-status{font-size:.46rem;padding:4px}
  .opening-modal{width:min(94vw,850px);max-height:94dvh;padding:10px 12px}.opening-modal h2{font-size:1.02rem;margin:4px 0}.opening-modal>.muted{font-size:.58rem;margin-bottom:4px}.opening-hand{grid-template-columns:repeat(5,1fr);gap:6px;margin:6px 0}.opening-choice{padding:2px;gap:2px}.opening-state{font-size:.4rem}.opening-actions{flex-direction:row;align-items:center}.opening-actions .btn{width:auto;min-height:31px}

  .notification{bottom:7px;right:calc(8px + var(--safe-right));font-size:.62rem;padding:7px 10px;max-width:280px}
}

@media (orientation:landscape) and (max-height:430px) and (max-width:1000px){
  :root{--sw-landscape-nav:58px;--sw-landscape-actions:150px}
  .mobile-nav .nav-btn{min-height:39px;font-size:.39rem}.mobile-nav .nav-btn .ico{width:16px;height:16px}
  .battle-page .content{padding-right:calc(var(--sw-landscape-actions) + var(--safe-right) + 7px)}
  .arena{grid-template-rows:27px minmax(49px,1fr) 16px minmax(49px,1fr) 27px 78px}
  .arena-head{height:27px}.hero-box{height:25px}.hero-crest{width:21px;height:21px}.arena-lane .tcg-card,.arena-lane .empty-slot{width:min(7.8vw,54px)}.board-unit{max-width:54px;flex-basis:54px}
  .arena-hand{height:78px;min-height:78px;max-height:78px}.hand-caption{height:17px}.hand-scroll{height:60px;min-height:60px;flex-basis:60px}.arena-hand .tcg-card{width:41px;flex-basis:41px}
  .mobile-card-inspector{width:143px;max-height:128px;min-height:83px}.inspector-art{width:34px;height:45px}.inspector-copy h3{font-size:.55rem}.inspector-copy p{font-size:.43rem}.mobile-card-inspector .btn{min-height:26px;font-size:.45rem}
  .combat-dock{width:143px;max-width:143px;top:calc(137px + var(--safe-top));padding:5px}.dock-actions .btn{min-height:28px;font-size:.44rem}.dock-actions .dock-mini{flex-basis:25px;min-height:25px}
  .chapter-hero{min-height:145px}.chapter-hero p{display:none}.chapter-card{min-height:160px;grid-template-columns:112px 1fr}.chapter-art{min-height:160px}.chapter-copy p{max-height:2.65em;overflow:hidden}
}