/* Layout fixes found in QA (2026-10-14). Loaded last. */
/* Portrait game: landscape phones get a rotate prompt instead of a squashed 390px-tall playfield. */
#rotate-hint{display:none}
@media (orientation:landscape) and (max-height:500px) and (pointer:coarse){
 #rotate-hint{display:grid;position:fixed;inset:0;z-index:2147483600;place-items:center;align-content:center;gap:12px;background:#201638;color:#f4e8ff;font:600 18px/1.4 system-ui,sans-serif;text-align:center;padding:24px}
 #rotate-hint span{font-size:44px;display:block;transform:rotate(90deg)}
 .shell,#ad-banner-slot{visibility:hidden}
}
/* HUD money pills: the text follows the pill (container), not the real viewport height. */
.hud .wallet strong,.hud .premium{font-size:clamp(10px,3.8cqw,17px)!important;line-height:1.05}
/* Skill panels on short playfields (small phones with a banner): rows keep their content and the list scrolls. */
@container (max-height:640px){
 .skill-panel .panel-body{grid-template-rows:repeat(5,minmax(max-content,1fr));overflow-y:auto;overscroll-behavior:contain;padding-bottom:3cqh}
 .skill-panel .skill-row{min-height:max-content}
 .skill-panel .buy small{position:static;display:block}
}
/* Two invitations must not fly on top of each other. */
#game .floating-invite.second{animation-delay:-11s}
.reduce-motion #game .floating-invite.second{left:61%;top:47%}
@media(prefers-reduced-motion:reduce){#game .floating-invite.second{left:61%;top:47%}}
/* Minimum touch target for dialog close buttons; darker secondary text for contrast. */
#overlay .close{min-width:32px;min-height:32px}
#overlay .secondary{color:#7a4a7e}
/* Story reader: previous-line button (the original dialogue window had one). */
.manga-footer .story-back{flex:0 0 auto;width:44px;min-width:44px;height:40px;padding:6px;display:grid;place-items:center}
.manga-footer .story-back .ui-icon{width:24px;height:24px}
.manga-footer .story-back:disabled{opacity:.35}
.manga-footer .manga-progress{flex:1;text-align:center}

/* Japanese / Chinese: CJK web font (i18n.js loads it only for those languages) */
html:is([data-lang=ja],[data-lang=zh]),html:is([data-lang=ja],[data-lang=zh]) :is(button,input,select,textarea){font-family:"Nunito Sans",var(--cjk),system-ui,sans-serif}
#language{appearance:none;-webkit-appearance:none;min-height:36px;padding:6px 34px 6px 12px;border:2px solid #c99ad6;border-radius:12px;background:#fff url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 12 8%27%3E%3Cpath d=%27M1 1l5 5 5-5%27 fill=%27none%27 stroke=%27%23a45fb8%27 stroke-width=%272%27/%3E%3C/svg%3E") no-repeat right 12px center/12px 8px;color:#5a3d6b;font:inherit;font-size:max(12px,3.4cqw);font-weight:700;cursor:pointer}
#language:focus-visible{outline:3px solid #7c3fd0;outline-offset:2px}
/* HUD numbers: centred in the free part of the bar (right of the star), on the vertical middle. */
#game .hud .wallet strong{position:absolute;left:22%;right:3%;top:0;bottom:0;display:flex;align-items:center;justify-content:center;line-height:1;padding-top:.08em;white-space:nowrap}
#game .hud .wallet strong>b{left:-45.33%;width:48%;top:-35.5%;height:155%}
#game .hud .premium #gold{line-height:1;padding-top:.08em}