/* Tablet adaptation: touch-sized controls and usable space in both orientations. */
.quick-award{display:none}
html{scroll-padding-block:88px 100px}
html:has(dialog[open]){overflow:hidden;overscroll-behavior:none}
main,.view,.overview-grid>*,.wardrobe-layout>*{min-width:0}
.journey-strip>.text-button{min-width:48px}
.filter-button{min-width:64px}
.modal,.celebration{
  position:fixed;top:calc(var(--visible-top,0px) + var(--visible-height,100dvh)/2);
  bottom:auto;margin:0 auto;transform:translateY(-50%);
  max-height:calc(var(--visible-height,100dvh) - 32px);
}
.modal input:not([type=checkbox],[type=radio],[type=file]),.modal textarea{font-size:16px}
.modal textarea{scroll-margin:20px}
.medal-stepper{display:flex;align-items:center;gap:4px;flex-shrink:0;background:#0b1520;border:1px solid #425065;border-radius:8px;padding:3px}
.medal-stepper button{display:grid;place-items:center;width:48px;height:48px;border-radius:5px;background:#1c2c3d;color:var(--gold-bright)}
.medal-stepper button:disabled{opacity:.3;cursor:default}
.medal-stepper button:active:not(:disabled){background:#39463f}
.modal .more-medals input[type=number]{width:58px;flex:0 0 58px;border:0;background:transparent;margin:0;min-height:48px;padding:5px;text-align:center;appearance:textfield;-moz-appearance:textfield;font:20px Cinzel,serif}
.medal-stepper input::-webkit-inner-spin-button,.medal-stepper input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.more-medals{margin-bottom:18px}
.more-medals>label{margin:0;font-size:14px}
.more-medals>label>span{display:block;margin-top:2px}
#award-dialog{padding:0;overflow:hidden;width:min(640px,calc(100vw - 32px))}
#award-form{display:flex;flex-direction:column;max-height:calc(var(--visible-height,100dvh) - 34px)}
#award-form>.modal-heading{flex-shrink:0;padding:26px 28px 18px;margin:0;border-bottom:1px solid var(--line)}
#award-form>.modal-heading .icon-button{margin-top:-5px;margin-right:-8px}
.award-fields{min-height:0;overflow:auto;overscroll-behavior:contain;padding:20px 28px 0;scroll-padding:20px;touch-action:pan-y pinch-zoom}
#award-form .form-footer{flex-shrink:0;display:flex;flex-direction:row;align-items:center;justify-content:space-between;padding:18px 28px;margin:0;gap:18px;border-top:1px solid var(--line);background:#182535}
#award-form .form-footer>span{font-size:12px;order:0}
#award-submit{min-height:54px;min-width:190px;font-size:16px}
#award-form .form-error:empty{display:none}
.celebration{overflow:hidden;padding:28px 30px 22px}
.celebration-content{display:flex;flex-direction:column;max-height:calc(var(--visible-height,100dvh) - 84px)}
.celebration-story{min-height:0;overflow:auto;overscroll-behavior:contain;padding:12px 12px 0;scroll-padding:12px;touch-action:pan-y pinch-zoom}
.celebration-story>p{font-size:14px;color:#c2cddd;margin:12px auto 20px;max-width:40ch;overflow-wrap:anywhere}
.celebration-content>.button{flex-shrink:0;align-self:center;min-height:54px;font-size:16px;margin-top:16px}
.celebration-content>.ceremony-saved{flex-shrink:0;margin:10px auto 0}
dialog.admission{top:var(--visible-top,0px);bottom:auto;height:var(--visible-height,100dvh);overscroll-behavior:contain;scroll-padding-block:24px}
.admission-header{padding-top:max(24px,env(safe-area-inset-top));padding-left:max(24px,env(safe-area-inset-left));padding-right:max(24px,env(safe-area-inset-right))}
.admission-footer{padding-bottom:max(24px,env(safe-area-inset-bottom))}

/* A compact rail gives landscape iPads room for the artwork and equipment. */
@media (min-width:761px) and (max-width:1366px) and (any-pointer:coarse), (min-width:761px) and (max-width:1100px){
  :root{--tablet-rail:96px}
  .sidebar{width:var(--tablet-rail);padding:22px 8px 18px;overflow-y:auto}
  .academy-brand{gap:0}.academy-brand .brand-name{display:none}
  .academy-crest{width:45px!important;height:50px!important}
  .sidebar-rule{margin:20px 10px}
  .nav-item{flex-direction:column;justify-content:center;gap:5px;padding:12px 4px;font-size:12px;min-height:76px;text-align:center}
  .nav-count,.sidebar-bottom .house-seal,.local-note{display:none}
  .sidebar-bottom{padding-top:16px}
  .app-shell{margin-left:var(--tablet-rail)}
  .topbar{position:sticky;top:0;z-index:15;min-height:76px;padding:10px 28px;background:#0a111bf5}
  .topbar-title{font-size:14px}.topbar-title>.desktop-only{display:none}
  .topbar-actions{gap:10px}.profile-button{font-size:14px;max-width:230px}
  #profile-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:150px}
  .profile-button>svg{display:none}
  .quick-award{display:inline-flex;min-height:50px;padding:10px 17px;font-size:15px}
  main{padding:28px 32px 36px}
  .page-heading h1{font-size:32px}.page-heading p{font-size:15px}
  .date-label{font-size:13px}
  .castle-scene{min-height:340px}.scene-copy{padding:32px}
  .scene-copy h2{font-size:34px;line-height:1.6}.scene-copy>p{font-size:15px}
  .year-tag,.scene-footnote{font-size:12px}.award-trigger{font-size:16px;min-height:56px}
  .journey-strip{gap:24px;min-height:88px;margin-bottom:28px}
  .journey-strip>div{font-size:13px}.journey-strip strong{font-size:25px}
  .journey-strip>.text-button{font-size:13px;gap:8px;padding-inline:8px}
  .overview-grid{grid-template-columns:minmax(240px,.85fr) minmax(280px,1.15fr);gap:28px}
  .section-line h2{font-size:21px}.section-line .text-button{font-size:14px}
  .portrait-frame{height:350px}.wizard-caption h3{font-size:26px}.wizard-caption p{font-size:13px}
  .level-progress>div,.level-progress p,.level-progress>div>span:last-child{font-size:13px}
  .skills-list{grid-template-columns:1fr}
  .journey-level{padding:12px 0;gap:14px}.journey-level h3{font-size:16px}
  .journey-level p,.journey-level>span{font-size:13px}
  .skills-note{font-size:13px;line-height:1.8;margin:14px 0}
  .next-unlock{padding:16px;gap:12px}.next-unlock h3{font-size:14px}.next-unlock p{font-size:13px}
  .next-unlock>.unlock-icon{flex-shrink:0}.next-unlock>span:last-child{font-size:13px}
  .recent-award h3{font-size:16px}.recent-award p,.recent-empty{font-size:14px}
  .wardrobe-layout{grid-template-columns:minmax(230px,.8fr) minmax(320px,1.2fr);gap:28px}
  .wardrobe-portrait{position:sticky;top:98px;height:min(650px,calc(100dvh - 140px))}
  .wardrobe-toolbar{gap:8px}.filter-button{font-size:15px;min-height:54px;padding-inline:12px}
  .gear-grid{grid-template-columns:1fr;gap:16px}
  .gear-card{display:grid;grid-template-columns:98px minmax(0,1fr);gap:0 18px;padding:20px}
  .gear-card .gear-art,.gear-card .gear-symbol{width:98px;height:126px;grid-row:span 3;margin:0}
  .gear-card h3{font-size:17px}.gear-card p{font-size:13px;min-height:0}
  .gear-card .button{font-size:14px;min-height:50px;padding:10px;margin-top:12px}
  .equipped-items span{font-size:13px}
  .badge-card h2{font-size:21px}.badge-card p{font-size:14px}.badge-status{font-size:13px}
  .journal-summary>div{font-size:14px}.journal-note{font-size:16px;line-height:1.9}.journal-meta{font-size:14px}
  .journal-body .text-button{font-size:14px;padding-inline:8px}
  .reward-card>p,.wallet>p{font-size:14px}.reward-bottom{flex-wrap:wrap}
  .reward-bottom .button{font-size:15px;min-height:52px}
  .modal label,.modal legend{font-size:15px}.modal-heading p{font-size:14px}
  .modal-heading h2{font-size:28px}.modal .house-options label{font-size:15px;min-height:56px}
  .medal-picker{gap:12px}.medal-picker button{min-height:116px}
  .more-medals>label{font-size:15px}.modal .more-medals input[type=number]{width:64px;flex-basis:64px}
  .award-preview{font-size:15px;padding:18px}
  .app-footer{padding:22px 32px;font-size:12px}.toast{left:calc(50% + 48px);font-size:15px;max-width:min(540px,calc(100vw - 130px))}
  .admission-header .text-button{font-size:14px;padding-inline:12px}
  .admission-stage>p{font-size:17px}.admission-action{min-height:58px;font-size:17px}
  .admission-stage{padding:24px 0}
  .house-choice{min-height:205px}.house-choice>span:last-child{font-size:11px}
  .wand-choice p{font-size:14px}.wand-choice>span{font-size:11px}
  .admission-back{font-size:15px}.admission-summary{font-size:15px;max-width:50ch}
  .acceptance-letter>p{font-size:17px}.acceptance-letter label{font-size:14px}
  .admission-import .text-button{font-size:14px}
}

/* Portrait and Split View share a reachable five-destination bottom bar. */
@media (max-width:1023px), (max-width:1100px) and (orientation:portrait){
  .sidebar{position:fixed;inset:auto 0 0;width:100%;height:auto;z-index:20;padding:0 max(12px,env(safe-area-inset-right)) env(safe-area-inset-bottom) max(12px,env(safe-area-inset-left));border:0;border-top:1px solid #3b4553;background:#0d1621;overflow:visible;backdrop-filter:none}
  .academy-brand,.sidebar-rule,.sidebar-bottom{display:none}
  .main-nav{display:flex;flex-direction:row;gap:8px;justify-content:space-around;padding:5px 0}
  .nav-item{flex:1;min-width:0;width:auto;min-height:72px;display:flex;flex-direction:column;justify-content:center;padding:9px 6px;gap:5px;font-size:13px;border-radius:8px;text-align:center}
  .nav-item svg{width:24px;height:24px}.nav-count{display:none}
  .nav-item.active{background:#28291f;color:var(--gold-bright);box-shadow:inset 0 2px var(--gold)}
  .app-shell{margin-left:0;padding-bottom:calc(92px + env(safe-area-inset-bottom))}
  .topbar{position:sticky;top:0;z-index:15;background:#0a111bf5}
  main{padding-inline:30px}.topbar{padding-inline:30px}
  .overview-grid{grid-template-columns:minmax(230px,.9fr) minmax(270px,1.1fr);gap:26px}
  .castle-scene{min-height:356px}
  .journey-strip{gap:18px}.journey-strip>.text-button{display:none}
  .journey-strip>div{flex:1;justify-content:center;border-right:1px solid var(--line);padding-right:10px}
  .journey-strip>div:nth-child(3){border:0}
  .badge-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 22px}
  .toast{left:50%;bottom:calc(108px + env(safe-area-inset-bottom));width:max-content;max-width:calc(100vw - 48px)}
  .app-footer{padding-inline:30px}
  .wardrobe-portrait{top:94px;height:490px}
}
@media (max-width:760px){
  main{padding-inline:20px}.topbar{padding:8px 20px;min-height:72px}
  .topbar-title{display:none}.topbar-actions{width:100%;gap:8px}.quick-award{display:inline-flex;min-height:48px;padding:10px 16px;font-size:14px}
  #sound-toggle{margin-left:auto}.profile-button{max-width:48%}#profile-name{max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .main-nav{gap:3px}.nav-item{font-size:11px;min-height:65px;padding-inline:3px}.nav-item svg{width:22px;height:22px}
  .app-shell{padding-bottom:calc(86px + env(safe-area-inset-bottom))}
  .overview-grid{grid-template-columns:minmax(140px,.86fr) minmax(175px,1.14fr);gap:18px}
  .badge-grid{grid-template-columns:1fr 1fr;gap:0 18px}
  .wardrobe-portrait{height:385px;top:0}
  .journey-strip>div{padding-right:0}.app-footer{padding-inline:20px}
  #award-dialog{width:calc(100vw - 24px)}
  #award-form>.modal-heading{padding:20px 22px 14px}.award-fields{padding:18px 22px 0}
  #award-form .form-footer{padding:14px 22px;gap:10px;flex-direction:column-reverse}
  #award-submit{width:100%;min-height:52px}#award-form .form-footer>span{font-size:11px}
  .medal-stepper{gap:1px}.medal-stepper button{width:46px;height:46px}
  .modal .more-medals input[type=number]{width:50px;flex-basis:50px}
  .celebration{padding:20px 16px 16px}.celebration-content{max-height:calc(var(--visible-height,100dvh) - 70px)}
  .celebration-story{padding-inline:4px}.grand-medal{margin-bottom:22px}
  .admission-header{padding-top:max(16px,env(safe-area-inset-top));padding-inline:20px}
}
@media (min-width:540px) and (max-width:760px){
  .page-heading h1{font-size:30px}.page-heading p{font-size:14px;max-width:46ch}
  .overview-grid{grid-template-columns:minmax(200px,.9fr) minmax(240px,1.1fr);gap:24px}
  .portrait-frame{height:350px}.journey-level h3{font-size:15px}.journey-level p,.journey-level>span{font-size:12px}
  .skills-note,.next-unlock p{font-size:12px}.next-unlock h3{font-size:13px}
  .section-line h2{font-size:20px}.nav-item{font-size:13px}.topbar-title{display:block;white-space:nowrap;font-size:13px}.topbar-actions{width:auto;margin-left:auto}
  .gear-card h3{font-size:16px}.gear-card p{font-size:13px}.gear-card .button{font-size:14px}
  .admission-wands{max-width:520px}.house-choice strong{font-size:21px}
}
@media (max-height:600px){
  #award-form>.modal-heading{padding-block:14px 10px}.modal-heading h2{font-size:23px}
  #award-form>.modal-heading p{display:none}
  #award-form .form-footer{padding-block:10px;flex-direction:row;gap:12px}
  #award-form .form-footer>span{display:none}#award-submit{width:100%;min-height:48px}
  .admission-stage[data-stage=arrival]{padding-block:25px}
  .admission-header,.admission-footer{padding-block:12px}
}
@media (max-width:380px){
  main,.topbar,.app-footer{padding-inline:14px}
  .overview-grid{grid-template-columns:minmax(125px,.86fr) minmax(145px,1.14fr);gap:12px}
}
@media (hover:none){
  .button:hover:not(:disabled){transform:none}
  .button.gold:hover:not(:disabled){background:linear-gradient(115deg,#e5c78b,#c3a064)}
  .nav-item:hover:not(.active),.icon-button:hover{background:transparent;color:var(--muted)}
  .text-button:hover{text-decoration:none}
  .button:active:not(:disabled),.house-choice:active,.wand-choice:active{filter:brightness(1.12)}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}