/* YH17 1.0 — hammered chrome, torn labels, clear controls. */
:root{--gold:#d8eb5c;--silver:#eef1ef;--muted:#a5b0b4;--body:Arial,Helvetica,sans-serif}
body{background:#08090b;color:var(--silver);font-family:var(--body);text-transform:none}
button{font-family:var(--body);font-weight:700;letter-spacing:.04em}button:focus-visible{outline:3px solid #e5f976;outline-offset:3px}
#app{max-width:1800px;padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}
.topline{min-height:48px;height:auto;border-bottom:1px solid #ffffff12}.topline button,.bottomline button{min-height:44px;color:#d5dcdf;font-size:11px}.artist-link{color:#aeb9c0;text-decoration:none;font:700 11px var(--body);letter-spacing:.18em;white-space:nowrap}.artist-link b{margin-left:8px;color:#e8efeb}
.console{background:#08090b;border:0!important;border-image:none!important;box-shadow:none!important;border-radius:0;overflow:hidden}
.monitor{background:#08090b;border:0!important;box-shadow:none!important}.monitor:after,.controller:before{display:none!important}.viewport{box-shadow:none!important}
.hud{height:55px;background:linear-gradient(170deg,#3e454b25,#121517 55%);border:0;box-shadow:none;padding:7px 12px}.crest{font-family:YH17,serif;color:#d8dfe1;text-shadow:0 -1px #fff,0 2px #42494d}.location strong{font:800 19px var(--body);letter-spacing:.04em}.location span,.wealth span{font-size:10px}.wealth strong{font:800 23px var(--body);color:#d8eb5c}.vitals>span{font:10px var(--body)}
.menu{padding:22px 36px;overflow:auto;background:linear-gradient(90deg,#08090bee,#08090be6 42%,#08090b20 83%)}
.wordmark{font-family:YH17,serif;font-size:76px;line-height:1.08;letter-spacing:-.03em;background:linear-gradient(177deg,#faffff 0%,#899397 24%,#f7ffff 40%,#303a40 43%,#f3ffff 60%,#8e979c 73%,#fff 90%);background-clip:text;-webkit-background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(3px 4px #000);transform:rotate(-3deg);transform-origin:left bottom}
.menu-tagline{font:900 22px var(--body);color:#e0ed74;letter-spacing:.09em;margin:10px 0 18px;transform:rotate(-1deg)}.menu-tagline span{display:block;font:10px var(--body);letter-spacing:.23em;color:#bdc6c9;margin-top:7px}
.menu-items{display:grid;grid-template-columns:1fr 1fr;max-width:470px;gap:7px}.menu-item{font:700 13px var(--body);min-height:45px;padding:12px 13px;background:#171c20c9;border:1px solid #78858e75;clip-path:polygon(6px 0,100% 0,calc(100% - 5px) 100%,0 100%);color:#edf0ef;transition:background .15s}.menu-item.featured{grid-column:1/-1;background:#d8eb5c;color:#161a10;border:0;box-shadow:none;transform:rotate(-1deg);font-weight:900}.menu-item:hover,.menu-item:focus-visible{background:#b8c6cc;color:#0d151b;transform:translateX(2px)}.menu-tools{display:contents}.menu-tools .menu-item{width:auto}.menu-foot{position:static;margin-top:18px;max-width:470px;font:10px var(--body);letter-spacing:.08em}.load-meter{width:100%}
.controller{background:linear-gradient(179deg,#3c444a33,#121518 70%);border-top:1px solid #74808944;min-height:168px;padding:5px 18px}.center-crest{display:none}.center-console{gap:4px}.slot,.use{background:linear-gradient(170deg,#4a545c,#10171d 45%,#252e34);border-color:#9daeb4;color:#d7dee0}.slot.selected{border-color:#d8eb5c;color:#e7f591;background:linear-gradient(170deg,#5a6346,#141e13)}.selected-caption{font:10px var(--body)}.control-label,.action span{font:700 11px var(--body)}.charge-row{min-height:38px}.bottomline{min-height:48px;gap:8px}.bottomline #hint{font:10px var(--body);max-width:45%;color:#9da9af}
.panel{background:#070a0df2;padding:14px}.panel-content{border:1px solid #81939a!important;border-image:none!important;background:linear-gradient(155deg,#242c32,#10151a 45%);max-width:900px;padding:20px 24px;box-shadow:8px 9px 0 #0006}.panel h1{font:900 clamp(22px,3vw,35px) var(--body);color:#e3eadc;letter-spacing:-.02em}.panel h2{font:800 20px var(--body)}.panel p{font:14px/1.55 var(--body);text-transform:none;color:#d0d8db}.panel button{min-height:44px}.panel-buttons button,.item-purchase{font:700 12px var(--body);min-height:44px}.panel button.primary{background:#d8eb5c;color:#151c0b;border-color:#e5fa70}.panel .eyebrow{font:11px var(--body);letter-spacing:.14em;color:#a9b9c0}.chapter-grid button{height:44px}.dialogue-scene .story-line{font:17px/1.6 var(--body)}
.commerce-shell{max-height:100%;min-height:0}.commerce-heading h1{font-size:27px}.commerce-body{min-height:0}.shop-layout{grid-template-columns:minmax(160px,34%) minmax(0,1fr);align-items:start;gap:20px}.gear-preview{position:sticky;top:0;padding:12px;background:radial-gradient(ellipse at 50% 60%,#39474c99,#11171d);border:1px solid #71838c66;min-width:0}.gear-preview canvas{display:block;width:100%;height:auto!important;max-height:310px;object-fit:contain;aspect-ratio:3/4;image-rendering:pixelated}.gear-totals{display:flex;flex-wrap:wrap;justify-content:space-around;gap:8px;font-size:10px}.commerce-footer{background:#11171d;border-top:1px solid #85949d55}.commerce-tabs button,.shop-tabs button{font:700 11px var(--body);min-height:44px}.item-detail p{font-size:13px}.item-chip{min-height:48px}.compact-item-list{max-height:132px}.setting-grid label{min-height:46px;font:12px var(--body)}
.loading{background:radial-gradient(ellipse at 50% 40%,#2b333a,#070a0e 65%)}.loading strong{font-family:YH17,serif;font-size:85px;color:#c5d2da;transform:rotate(-5deg);text-shadow:2px 2px #526270,-1px -1px #fff}.loading span{font:700 12px var(--body);letter-spacing:.15em}.loading i{background:#d8eb5c}
#rotate-phone{display:none;position:fixed;inset:0;z-index:10000;background:radial-gradient(ellipse,#343a40,#08090c 70%);align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:24px}.rotate-device{font:110px var(--body);color:#d8eb5c}#rotate-phone strong{font:900 44px/.95 var(--body);transform:rotate(-5deg);color:#e5edf0;text-shadow:3px 4px #677379}#rotate-phone p{font:15px/1.6 var(--body);margin-top:30px;color:#adb9c3}#rotate-phone small{font:10px var(--body);letter-spacing:.22em}
#player-dock{margin-left:auto;max-width:48%;font-size:10px}#player-dock .yp-dock{padding:0;gap:4px;background:none;border:0}#player-dock .yp-live,#player-dock .yp-mark,#player-dock .yp-account-button{display:none}#player-dock .yp-music-button{font:700 10px var(--body);max-width:230px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}#player-dock .yp-player{position:fixed;right:16px;bottom:58px;z-index:40;width:min(350px,90vw);box-shadow:0 10px 50px #000;background:#151c22}
.studio{position:absolute;inset:0;z-index:28;background:#0b1014;padding:14px 22px;display:flex;flex-direction:column;gap:8px;overflow:auto;font-family:var(--body)}.studio-head{display:flex;justify-content:space-between;align-items:center;gap:12px}.studio h1{margin:2px 0;font:900 24px var(--body)}.studio small{font-size:9px;color:#d8eb5c;letter-spacing:.18em}.studio button{min-height:44px;padding:8px 12px;border:1px solid #7a8b94;background:#222e35;color:#edf3f1}.studio button[aria-pressed=true],.studio [data-studio-start]{background:#d8eb5c;color:#101911}.studio-sessions{display:flex;gap:6px;overflow-x:auto;flex-shrink:0}.studio-sessions button{font-size:10px;flex:1;white-space:nowrap}.studio-stage{position:relative;flex:1;min-height:90px;max-height:240px;background:#0f171c;overflow:hidden}.studio-stage canvas{width:100%;height:100%;object-fit:contain}.studio-rec{position:absolute;top:12px;left:15px;font:700 10px monospace;color:#a1aeb3}.studio-rec.live{color:#fb6f71}.studio-syllable{position:absolute;left:54%;top:8%;padding:8px 20px;background:#e5f479;color:#141912;transform:rotate(-9deg);border:3px solid #070908;box-shadow:4px 4px #000;font:900 24px var(--body);clip-path:polygon(0 0,100% 3%,94% 80%,35% 80%,12% 100%,16% 75%,0 70%)}.studio-tip{font:12px/1.3 var(--body);margin:0;color:#d4e2e7;min-height:17px}.studio-rhythm.rhythm{position:relative!important;inset:auto!important;width:100%;height:100px;min-height:100px;transform:none!important;flex:none}.studio-rhythm .audience-feedback,.studio-rhythm .rhythm-feedback{display:none}.studio-rhythm .rhythm-stats{font-size:10px}.studio-rhythm .rhythm-track{height:68px}.studio-rhythm .rhythm-track canvas{height:68px;width:100%}.studio-foot{display:flex;align-items:center;gap:8px;justify-content:space-between;font:11px var(--body)}.studio-foot button{font-size:11px}.studio-controls{display:flex;justify-content:center;gap:12px}.studio-controls button{width:56px;font-size:24px}
@media(hover:hover) and (pointer:fine){.controller{min-height:74px;height:74px;grid-template-columns:1fr;padding:5px 18px}.movement,.actions{display:none}.center-console{display:grid;grid-template-columns:auto minmax(160px,1fr) auto;align-items:center;gap:18px}.inventory .slot,.inventory .use{height:52px;min-height:44px}.slot canvas{height:30px;width:45px}.selected-caption{display:none}.charge-row{max-width:260px;min-width:200px}.ally-controls{max-width:300px}.studio-controls{display:none}}
@media(max-height:650px){.topline{min-height:40px}.topline button{font-size:9px}.hud{height:42px}.location strong{font-size:16px}.menu{padding:12px 20px}.wordmark{font-size:43px}.menu-tagline{font-size:15px;margin:6px 0 9px}.menu-tagline span{display:none}.menu-items{gap:4px;max-width:420px}.menu-item{min-height:44px;font-size:11px;padding:8px 12px}.menu-foot{margin:10px 0}.bottomline #hint{display:none}.bottomline{min-height:44px}.panel{padding:6px}.panel-content{padding:12px}.panel h1{font-size:23px}.gear-preview canvas{max-height:230px}.studio{padding:8px 12px;gap:4px}.studio h1{font-size:18px}.studio-sessions button{font-size:9px}.studio-stage{max-height:160px}.studio-tip{font-size:10px}.studio-rhythm.rhythm{height:90px;min-height:90px}.studio-foot button{font-size:10px}}
@media(pointer:coarse) and (orientation:landscape) and (max-height:600px){#app{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}.topline{min-height:36px}.topline button{padding:4px 6px}.artist-link{padding-left:8px;font-size:9px}.controller{min-height:100px;height:100px;grid-template-columns:128px 1fr 175px;padding:2px 8px;gap:5px}.stick{width:94px;height:94px}.stick-knob{width:54px;height:54px;margin:-27px}.control-label{display:none}.actions{transform:scale(.58);transform-origin:right center;height:180px;align-self:center}.slot{width:42px;height:44px}.slot canvas{width:32px;height:26px}.slot span,.use span{font-size:8px}.use{width:65px;height:44px}.inventory{gap:4px}.selected-caption,.charge-row,.ally-controls{font-size:8px}.charge-row{min-height:25px;padding:2px}.selected-caption{display:none}.bottomline{min-height:30px}.bottomline button{min-height:30px;font-size:9px}.center-console{gap:1px}.hud{height:36px}.hero-status{min-width:150px}.crest{font-size:26px}.meter{width:95px}.location span{font-size:8px}.wealth{min-width:90px}.wealth strong{font-size:19px}.menu{padding:10px 18px}.wordmark{font-size:32px}.menu-tagline{font-size:12px}.menu-items{grid-template-columns:repeat(3,1fr);max-width:510px}.menu-item.featured{grid-column:auto}.menu-item{min-height:44px;font-size:10px}.menu-foot{font-size:8px;margin:8px 0}.studio-controls{position:sticky;bottom:0;background:#0b1014}.studio-controls button{width:62px}}
@media(max-width:700px) and (orientation:portrait) and (pointer:coarse){#rotate-phone{display:flex}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
/* The compact player dock must not reserve a full standalone portal row. */
#player-dock .yp-root{margin:0;padding:0;width:auto}
#player-dock .yp-dock{min-height:44px}
#player-dock .yp-music-button{min-width:110px;max-width:none}
@media(pointer:coarse) and (orientation:landscape) and (max-height:600px){
  .console{position:relative}.monitor{min-height:0}.topline{height:44px;min-height:44px}.topline #pause{height:40px;min-height:40px}.hud{padding:3px 10px}
  .bottomline{height:44px;min-height:44px}.bottomline button{min-height:44px}.bottomline #player-dock{max-width:none}
  .controller{position:absolute;left:0;right:0;bottom:0;height:108px;min-height:108px;margin:0;border:0;padding:3px 8px;grid-template-rows:100px;grid-template-columns:110px minmax(0,1fr) 160px;background:transparent;pointer-events:none;z-index:5}
  .movement{grid-column:1;grid-row:1}.actions{grid-column:3;grid-row:1;align-self:center;transform-origin:right center;margin:0}.center-console{grid-column:2;grid-row:1;align-self:end;height:auto;gap:0;opacity:.92}.movement,.actions,.center-console button{pointer-events:auto}
  .center-console .charge-row,.ally-controls{display:none!important}.center-console .inventory{padding-bottom:2px}.slot,.use{height:44px}.slot b{font-size:9px}.use .control-sprite{width:22px;height:22px}
  .console:has(.menu:not([hidden])) .controller,.console:has(.panel:not([hidden])) .controller,.console:has(.studio:not([hidden])) .controller{visibility:hidden}
  .menu,.panel,.studio{position:fixed;inset:44px 0 44px;z-index:50;width:auto;height:auto;max-height:none;overflow:auto}
  .menu{padding:10px max(20px,env(safe-area-inset-left));background:linear-gradient(100deg,#08090bf5,#08090bdd 65%,#08090ba8)}
  .menu-items{max-width:620px;grid-template-columns:repeat(4,1fr)}.menu-tagline{margin-bottom:8px}.menu-foot{margin:7px 0}.menu .wordmark{font-size:34px}
  .panel{padding:8px max(10px,env(safe-area-inset-left));align-items:stretch}.panel-content{max-width:100%;max-height:100%;padding:10px 14px}.dialogue-stage{grid-template-columns:minmax(130px,25%) 1fr!important;gap:14px}.dialogue-portrait canvas{max-height:160px!important}.dialogue-scene .story-line{font-size:14px;line-height:1.5}.dialogue-scene header h1{font-size:20px}.panel .dialogue-scene header{margin-bottom:3px}.dialogue-scene footer .pad-hint{display:none}
  .shop-layout{grid-template-columns:minmax(140px,25%) 1fr;gap:12px}.gear-preview canvas{max-height:210px}.commerce-heading h1{font-size:20px}.commerce-tabs button,.shop-tabs button{min-height:44px}.compact-item-list{max-height:80px}
  .studio{inset:0;z-index:60;display:grid;grid-template-columns:minmax(220px,36%) minmax(0,1fr);grid-template-rows:44px 44px minmax(90px,1fr) 48px;gap:6px;padding:8px max(12px,env(safe-area-inset-left));overflow:hidden}
  .studio-head{grid-column:1/-1;grid-row:1}.studio-sessions{grid-column:1/-1;grid-row:2}.studio-stage{grid-column:1;grid-row:3;min-height:0;max-height:none;align-self:stretch}.studio-stage canvas{height:100%;object-fit:contain}.studio-tip{grid-column:1;grid-row:3;align-self:end;z-index:1;padding:4px;background:#0b1014e8;font-size:10px;line-height:1.3}.studio-rhythm.rhythm{grid-column:2;grid-row:3;align-self:center;height:110px;min-height:110px}.studio-rhythm .rhythm-track,.studio-rhythm .rhythm-track canvas{height:80px}.studio-foot{grid-column:1;grid-row:4;gap:5px}.studio-foot button{padding:5px 8px;flex-shrink:0;font-size:9px;max-width:145px}.studio-result{font-size:9px}.studio-controls{grid-column:2;grid-row:4;position:static;gap:12px}.studio-controls button{width:62px;min-height:46px;padding:4px}.studio-syllable{font-size:19px;padding:6px 13px}.studio-sessions button{padding:5px;font-size:9px}
  .objective{max-width:72%;bottom:54px;font-size:9px;padding:4px 7px}
}
@media(pointer:coarse) and (orientation:landscape) and (max-height:600px){
  #app:has(#studio:not([hidden]))>.bottomline{visibility:hidden}
  .menu .menu-tagline{display:block!important}.menu .menu-tagline span{display:none}
}
.studio-rhythm .rhythm-track canvas{height:auto!important;aspect-ratio:10/1}
/* The mannequin has its own fitted column; only the product text scrolls. */
.commerce-body:has(.shop-layout){display:flex;overflow:hidden;min-height:100px}
.shop-layout{width:100%;height:100%;min-height:0;align-items:stretch}
.shop-layout .gear-preview{position:relative;top:auto;display:flex;flex-direction:column;height:100%;min-height:0;overflow:hidden;padding:8px}
.shop-layout .gear-preview canvas{flex:1;min-height:0;width:100%;height:0!important;max-height:none;aspect-ratio:auto;object-fit:contain}
.shop-layout .fitting-label{flex:none;margin:0 0 4px;padding:3px 0}
.shop-layout .gear-totals{flex:none;margin:4px 0 0;padding:4px 0;gap:4px;font-size:9px}
.shop-layout .shop-selection{min-height:0;overflow:auto;overscroll-behavior:contain;padding:0 6px 6px 0}
@media(pointer:coarse) and (orientation:landscape) and (max-height:600px){
  .panel:has(.commerce-shell){inset:0;z-index:60}.commerce-body:has(.shop-layout){min-height:100px}.shop-layout .gear-totals{display:none}.shop-layout .gear-preview{padding:5px}
  #app:has(.commerce-shell)>.bottomline{visibility:hidden}
}
/* Recording uses the viewport, not the smaller combat-canvas crop. */
.studio{position:fixed;inset:48px 12px;z-index:60;max-width:1100px;margin:0 auto}
.studio-head,.studio-tip,.studio-foot,.studio-controls{flex-shrink:0}
#app:has(#studio:not([hidden]))>.bottomline,.console:has(#studio:not([hidden]))>.controller{visibility:hidden}
@media(min-height:601px){.studio-rhythm.rhythm{height:145px;min-height:145px}.studio-rhythm .rhythm-track{height:auto}}
@media(pointer:coarse) and (orientation:landscape) and (max-height:600px){.studio{inset:0;max-width:none}}

/* Audio remains one persistent element, expanded only inside the music modal. */
#player-dock .yp-dialog .yp-player{position:static;width:auto;margin:0 30px 24px;box-shadow:none;border:1px solid #444c52}
@media(max-width:650px){#player-dock .yp-dialog .yp-player{margin:0 14px 18px}}
.yp-dialog audio:focus-visible{outline:3px solid #dcff54;outline-offset:3px}

/* A 24px visual music rail inside existing 44px footer hit targets. */
#player-dock{flex:0 1 350px;min-width:170px}
#player-dock .yp-dock{height:44px;gap:0;background:linear-gradient(180deg,#242b30,#12171b) center/100% 24px no-repeat;border:0;box-shadow:none}
#player-dock .yp-dock .yp-mini-control{flex:0 0 44px;width:44px;min-height:44px;padding:0;border:0;background:transparent;color:#dce7e8;font:700 15px Arial,sans-serif;letter-spacing:-1px}
#player-dock .yp-dock .yp-mini-control:hover{color:#dcff54}
#player-dock .yp-dock .yp-music-button{flex:1;min-width:0;max-width:none;min-height:44px;padding:0 5px;border:0;background:transparent;font-size:9px;gap:5px}
#player-dock .yp-music-button>span:first-child{font-size:13px}
@media(pointer:coarse) and (orientation:landscape) and (max-height:600px){#player-dock{flex-basis:340px;min-width:160px}}

/* The loading title uses the same chrome mark and acid label as the menu. */
.loading .loading-title{font:900 clamp(15px,3.5vw,27px) var(--body);letter-spacing:.12em;color:#d8eb5c;transform:rotate(-2deg);margin-top:-15px}.loading{gap:22px}.loading strong{font-size:clamp(46px,9vw,85px)}

/* A dedicated Web Audio gain control works on touch browsers as well. */
.yp-music-volume{display:flex;align-items:center;gap:10px;font:12px Arial,sans-serif;min-height:44px;color:#dce7e8}.yp-music-volume span{flex:1}.yp-music-volume input{width:130px;min-height:44px;accent-color:#dcff54}.yp-music-volume output{min-width:34px;text-align:right}.yp-gain-audio audio::-webkit-media-controls-volume-slider,.yp-gain-audio audio::-webkit-media-controls-mute-button{display:none}