@import url('touch.css');
@import url('domain.css');
/* Project Resonance P1 visual layer. Original layout/navigation contracts remain in ui.css. */
.iw-ui, .iw-hud, .iw-hud-over {
  --k: #17263b; --k2: #1f334a; --k3: #2b4258; --muted: #bdcbd4;
  --pr-cream: #f7f4ea; --pr-navy: #17263b; --pr-coral: #ff725f; --pr-cyan: #65d9e9;
  --spring: cubic-bezier(.22,.85,.24,1); --spring2: cubic-bezier(.22,.85,.24,1);
}
.iw-ui *, .iw-hud *, .iw-hud-over * { font-family: 'Rubik', system-ui, sans-serif; }
.iw-display { font-weight: 900; letter-spacing: -.045em; -webkit-text-stroke: 0; text-shadow: none; }
.iw-scrim-left { background: linear-gradient(90deg,rgba(247,244,234,.97),rgba(247,244,234,.92) 38%,rgba(247,244,234,.22) 65%,transparent 82%); }
.iw-scrim-full, .iw-dimbg { background: rgba(17,34,52,.82); backdrop-filter: blur(5px); }
.iw-panel { background: rgba(23,38,59,.96); border: 1px solid rgba(173,207,220,.2); border-radius: 5px; box-shadow: 0 8px 24px #14223722; }
.iw-panel::before { background: none; }
.iw-btn { border-radius: 4px; font-weight: 800; transform: none; background: var(--bg, #17263b); box-shadow: inset 0 0 0 1px #b2d1e42a; letter-spacing: .015em; }
.iw-btn__blob { border-radius: 0; }
.iw-btn__blob::after { background: none; }
.iw-btn--primary { --bg: var(--pr-coral); --fill: var(--pr-cream); --fill-ink: var(--pr-navy); color: var(--pr-navy); }
.iw-btn--primary::before { background: none; }
.iw-btn.is-focus { transform: translateX(3px); box-shadow: inset 0 0 0 2px var(--pr-cyan), 0 4px 12px #14223722; }
.iw-btn.is-focus .iw-btn__icon { transform: none; }
.iw-btn__icon svg { filter: none; }
.iw-cursor__ring { border: 2px solid var(--pr-cyan); box-shadow: 0 0 0 2px var(--pr-navy); animation: none; }
.iw-ui button:focus-visible, .iw-ui input:focus-visible { outline: 3px solid var(--pr-cyan); outline-offset: 3px; }
.iw-btn__live { font-weight: 800; border-radius: 3px; }
.iw-head__title .iw-display { color: var(--pr-cream); font-size: calc(var(--u) * 3.5); letter-spacing: -.045em; }
.iw-head__title { padding: .1em .35em; background: var(--pr-navy); }
.iw-head__blob { display: none; } /* Redundant decorative tile; title has its own solid contrast surface. */
.iw-head__sub { color: var(--pr-cream); background: var(--pr-navy); border-radius: 2px; padding: .45em .65em; }
.iw-backbtn, .iw-prompts { border-radius: 4px; background: #17263be8; box-shadow: none; }
.iw-head__title, .iw-prompts, .iw-profile, .iw-kitcard, .iw-name { transform: none; }
.iw-corner { color: var(--pr-cream); background: #17263be8; padding: .4em .6em; border-radius: 2px; }
.pr-dev-label { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); z-index: 4; padding: 4px 8px; background: #17263bef; color: #f7f4ea; border: 1px solid #f7f4ea3b; font-size: 10px; font-weight: 600; letter-spacing: .06em; pointer-events: none; white-space: nowrap; }
.iw-ui:not(.is-active) .pr-dev-label { top: auto; bottom: 7px; opacity: .72; }
.iw-logo { color: var(--pr-navy); align-items: flex-start; gap: .08em; }
.iw-logo__word { font-family: 'Rubik', system-ui, sans-serif; font-weight: 900; letter-spacing: -.075em; line-height: .95; padding-right: .08em; }
.pr-logo-mark { width: .95em; height: .66em; margin-bottom: .04em; }
.iw-logo--xl { font-size: calc(var(--u) * 8.2); }
.iw-logo--md { font-size: calc(var(--u) * 5.8); }
.iw-logo--sm { font-size: calc(var(--u) * 3.55); }
.iw-logo__sub { font-size: .19em; font-weight: 800; letter-spacing: .18em; margin-top: .2em; }
.iw-logo__sub span { background: none; color: inherit; box-shadow: none; padding: 0; transform: none; border-radius: 0; }
.iw-logo--sm .iw-logo__sub { font-size: .24em; }
.iw-title__scrim { background: linear-gradient(110deg,rgba(247,244,234,.94),rgba(247,244,234,.78) 52%,rgba(247,244,234,.06)); }
.iw-title__logo { left: 8%; top: 24%; transform: none; }
.iw-title__shock { display: none; }
.iw-title__press { color: var(--pr-navy); }
.iw-title__presstext { -webkit-text-stroke: 0; text-shadow: none; font-weight: 800; animation: none; }
.iw-title__presssub { color: var(--pr-navy); }
.iw-loading { background: var(--pr-cream); color: var(--pr-navy); }
.iw-bgblob { border-radius: 0; transform: rotate(45deg); opacity: .08; }
.iw-progress__track { border-radius: 3px; }
.iw-main__logo { top: calc(var(--u) * 2.5); }
.iw-main__menu { top: 58%; gap: calc(var(--u) * .65); }
.iw-main__menu .iw-btn--xl { height: calc(var(--u) * 6); font-size: calc(var(--u) * 2.9); }
.iw-main__menu .iw-btn--menu:not(.iw-btn--xl) { height: calc(var(--u) * 3.65); font-size: calc(var(--u) * 1.65); }
.iw-main__menu .iw-btn--online { height: calc(var(--u) * 5.5) !important; }
.iw-main__desc { display: none; } /* Descriptions remain in each destination; avoids collision with restored seven-item navigation. */
.iw-profile__avatar, .iw-profile__avblob { border-radius: 6px; }
.iw-profile__name, .iw-kitcard__name, .iw-lvl { font-weight: 800; }
.iw-chip, .iw-tag, .iw-beta, .iw-res__tag { border-radius: 3px; transform: none; }
.iw-wcard, .iw-mode, .iw-rule, .iw-hubcard, .iw-ss__frame, .iw-mcard { border-radius: 5px; transform: none; }
.iw-wcard__blob, .iw-mode__splat { opacity: .35; }
.iw-wcard__name, .iw-mode__tape { font-weight: 800; }
.iw-wcard__ink { border-radius: 4px; }
.iw-ltag__blob, .iw-lspin > i { animation: none; }
.iw-ltag .iw-name { transform: none; }
.pr-looks .iw-locker__body { top: calc(var(--u) * 11.5); width: calc(var(--u) * 56); gap: calc(var(--u) * .65); }
.pr-hero-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: calc(var(--u) * .7); }
.pr-hero-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; height: calc(var(--u) * 9.9); min-height: 96px; padding: calc(var(--u) * .8); border: 1px solid #17263b30; border-radius: 4px; color: #17263b; background: #fffcf6ed; text-align: left; cursor: pointer; box-shadow: 0 3px 12px #17263b0c; }
.pr-hero-card.is-selected { color: #f7f4ea; background: #17263b; border-color: var(--look); box-shadow: inset 0 -3px var(--look); }
.pr-hero-card.is-focus { outline: 2px solid #13798a; outline-offset: 2px; }
.pr-hero-card__top { display: flex; justify-content: space-between; width: 100%; font-size: 10px; font-weight: 700; letter-spacing: .08em; opacity: .75; }
.pr-hero-card__top i { width: 12px; height: 12px; opacity: 0; }
.pr-hero-card.is-selected .pr-hero-card__top i { opacity: 1; }
.pr-hero-card__emblem { position: absolute; width: calc(var(--u) * 4.3); height: calc(var(--u) * 4.3); top: 15%; right: 8%; color: var(--look); }
.pr-hero-card__emblem svg { width: 100%; height: 100%; }
.pr-hero-card > b { position: relative; margin-top: auto; font-size: max(16px,calc(var(--u) * 1.45)); font-weight: 800; }
.pr-hero-card__element { margin-top: 3px; font-size: 10px; font-weight: 600; letter-spacing: .13em; }
.pr-hero-detail { color: #17263b; padding: 8px 10px; background: #fffcf6e8; border-left: 3px solid #65d9e9; border-radius: 2px; }
.pr-hero-detail > b { font-size: 16px; font-weight: 800; margin-right: 12px; }
.pr-hero-detail > span { font-size: 12px; font-weight: 600; }
.pr-hero-detail p { font-size: 12px; margin: 4px 0; }
.pr-hero-detail small { display: block; font-size: 11px; line-height: 1.35; color: #4a6074; }
.pr-hero-status { color: #225668; font-size: 11px; font-weight: 700; }
.pr-hero-scope { color: #45596b; font-size: 11px; line-height: 1.4; margin: 0; }
.pr-hero-foot { display: flex; gap: 10px; justify-content: space-between; margin-top: 3px; }
.pr-hero-foot .iw-btn { min-height: 34px; font-size: 14px; }
.pr-hero-preview { top: calc(var(--u) * 11.5); width: calc(var(--u) * 28); }
.pr-looks .iw-lspin { color: #f7f4ea; background: #17263bd9; border-radius: 3px; padding: 7px 10px; }
.iw-news__card { border-radius: 6px; }
.iw-news__title { font-size: calc(var(--u) * 3.5); }
.iw-news__frame { border-radius: 4px; background: #17263b; }
.iw-news__fb svg { width: 70%; height: 70%; margin: auto; color: var(--nc); }
.iw-news__tapebit, .iw-drip, .iw-timer__drip { display: none; }
.iw-burst__drop { border-radius: 0; }
.iw-res__title { color: #17263b; font-size: calc(var(--u) * 5.2); font-weight: 900; rotate: 0deg !important; }
.iw-res__head.is-lose .iw-res__title { color: #17263b; }
.iw-results .iw-res__scrim { background: linear-gradient(180deg,#f7f4eafa, #f7f4ead9 18%,#17263b00 35%,#17263bed 60%,#17263bfa); }
.iw-res__splat { opacity: .15; }
.iw-res__splat svg { animation: none; }
.iw-res__meta { background: #17263b; border-radius: 3px; }
.iw-ttable, .iw-prow, .iw-cover, .iw-xp { border-radius: 4px; }
.iw-prow { background: #21364bdd; }
.iw-prow.is-self { box-shadow: inset 0 0 0 2px var(--ta); }
.iw-cover { box-shadow: 0 0 0 2px #f7f4ea; border-radius: 3px; }
.iw-cover__names { font-weight: 800; }
.iw-res__medalcap { border-radius: 3px; }
.iw-timer__blob { border-radius: 4px; background: #17263bf2; box-shadow: 0 0 0 1px #f7f4ead9; }
.iw-timer__txt { font-weight: 800; letter-spacing: .025em; }
.iw-sq__shape .o { stroke-width: 3; }
.iw-sq__shape .f { stroke-width: 1.5; }
.iw-sq__shape .g { display: none; }
.iw-sq__w { top: 24%; bottom: 24%; }
.iw-turf, .iw-feed__item, .iw-sp__ready, .iw-kcard, .iw-spl__card, .iw-map { border-radius: 4px; }
.iw-turf b, .iw-sp__ready, .iw-spl__by, .iw-bn__text { font-weight: 800; }
.iw-sp__bub { display: none; }
.iw-sp__wave, .iw-sp__wave2 { animation: none; }
.iw-turf, .iw-feed__item { background: #17263bec; }
.iw-spl__by { font-size: calc(var(--u) * 2.2); }
.iw-spl__splat { opacity: .6; }
.iw-cred__logo .iw-logo { color: #f7f4ea; }
.iw-cred__sec a { color: #65d9e9; }
@media (max-height: 600px) {
  .pr-looks .iw-locker__body { top: calc(var(--u) * 10.7); gap: 4px; }
  .pr-hero-card { height: calc(var(--u) * 9.3); min-height: 0; }
  .pr-hero-detail { padding: 4px 7px; }
  .pr-hero-detail small, .pr-hero-scope { font-size: 10px; }
  .pr-hero-foot .iw-btn { min-height: 29px; }
}
@media (prefers-reduced-motion: reduce) {
  .pr-hero-card, .iw-btn, .iw-timer { animation: none; transition: none; }
}
/* Readability fixes from the first1280x720 browser inspection. */
.pr-hero-foot .iw-btn--ghost { --bg: #17263b; --fill: #65d9e9; --fill-ink: #17263b; color: #f7f4ea; }
.iw-ui .iw-logo__word { font-weight: 800; letter-spacing: -.055em; word-spacing: .09em; }
.iw-ui .iw-head__title .iw-display { font-weight: 800; }
.iw-btn:not(.iw-btn--primary):not(.iw-btn--online):not(.iw-btn--danger) { --bg: #17263b; }
.iw-btn--online { background-image: none; }
/* Remove inherited squid-repeat textures throughout private-room screens. */
.iw-ui {
  --tex-squids: linear-gradient(135deg,transparent 48%,#ffffff07 49%,#ffffff07 51%,transparent 52%) 0 0 / 36px 36px;
  --tex-squids-k: linear-gradient(135deg,transparent 48%,#17263b0b 49%,#17263b0b 51%,transparent 52%) 0 0 / 36px 36px;
  --tex-grain: linear-gradient(transparent,transparent);
  --hv: #65d9e9; --hv-deep: #185563; --hv-dark: #3ba5b7;
  --stk: 0 0 0 1px #9bbbc975, 0 5px 18px #07172b33;
  --stk-k: 0 0 0 1px #17263b75, 0 3px 10px #07172b22;
}
.iw-lob__status, .iw-lset__panel, .iw-rc__ticket, .iw-rc__copy, .iw-lob__mode, .iw-lob__tl, .iw-lock, .iw-lchip, .iw-wchip { rotate: 0deg; border-radius: 4px; }
.iw-lob__status, .iw-lset__panel { background: #17263bef; }
.iw-rc__back i { background: #f7f4ea; mask: none; -webkit-mask: none; border-radius: 4px; animation: none; }
.iw-rc__back { filter: none; }
.iw-rc__tile { font-weight: 700; box-shadow: none; border: 1px solid #17263b40; border-radius: 3px; transform: none; }
.iw-rc__copy { background: #65d9e9; font-weight: 700; }
.iw-lob__mode, .iw-lset__label { font-weight: 700; -webkit-text-stroke: 0; }
.iw-lob__mode { font-size: calc(var(--u) * 1.7); }
.iw-lob__count b { -webkit-text-stroke: 0; font-weight: 800; }
.iw-lob__pips i { rotate: 0deg !important; }
.iw-lob__band::after { background: linear-gradient(135deg,#ffffff04 25%,transparent 25%) 0 0 / 28px 28px; }
.iw-lset__drips { display: none; }
.iw-wchip, .iw-lchip { background: #17263bef; }

/* Keep result characters clear; the title carries its own contrast surface. */
.iw-results .iw-res__scrim { background: linear-gradient(180deg,#17263b22,#17263b11 36%,#17263bed 60%,#17263bfa); }
.iw-res__title { background: #f7f4eaf5; padding: .06em .18em .1em; border-radius: 3px; }

/* Main-menu icons must clear native cutouts, just like the existing corner labels. */
.iw-main__menu { left: calc(var(--u) * 3.8 + max(env(safe-area-inset-left,0px),var(--safe-area-inset-left,0px))); }

/* User-sheet portraits stay separate from the optional in-engine model preview. */
.pr-sheet-portrait { inset: 0; overflow: hidden; border-radius: inherit; animation: none; display: grid; place-items: center; background: #17263b; }
.pr-sheet-portrait img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
.pr-hero-card__portrait { position: absolute; right: 8px; top: 10px; width: auto; height: auto; max-width: 48%; max-height: 54px; object-fit: contain; border-radius: 3px; }
.pr-hero-card__top { position: relative; z-index: 1; }
.pr-hero-card__top i { background: #17263b; color: #fff; border-radius: 2px; }
.pr-roster-art { position: absolute; right: calc(var(--u) * 3.4 + var(--sar)); top: calc(var(--u) * 18.5); bottom: calc(var(--u) * 6.8 + var(--sab)); width: 34%; display: flex; flex-direction: column; align-items: stretch; background: #f7f4eaf7; border: 1px solid #17263b25; border-radius: 4px; overflow: hidden; }
.pr-roster-standing { width: auto; height: auto; max-width: 100%; max-height: calc(100% - 60px); min-height: 0; flex: 0 1 auto; object-fit: contain; padding: 8px; align-self: center; }
.pr-roster-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px; background: #f7f4eaf2; color: #17263b; flex-shrink: 0; margin-top: auto; }
.pr-roster-caption { font-size: 11px; line-height: 1.3; }
.pr-preview-toggle { flex-shrink: 0; min-height: 44px; padding: 8px 12px; border: 1px solid #17263b40; border-radius: 3px; background: #17263b; color: #fff; font: inherit; font-size: 12px; cursor: pointer; }
.pr-preview-toggle.is-focus, .pr-preview-toggle:focus-visible { outline: 2px solid #13798a; outline-offset: 2px; }
.pr-roster-art.is-3d { background: transparent; border-color: transparent; pointer-events: none; }
.pr-roster-art.is-3d .pr-roster-standing { visibility: hidden; }
.pr-roster-art.is-3d .pr-roster-toolbar { pointer-events: auto; }

/* Short landscape WebViews need physical-size controls, not height-scaled buttons. */
@media (max-height: 500px) and (orientation: landscape) {
  .iw-backbtn { min-width: 44px; min-height: 44px; font-size: 12px; }
  .iw-main__menu { top: 100px; bottom: 24px; width: min(54vw,480px); transform: none; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); grid-auto-rows: 44px; gap: 8px; align-content: start; overflow-y: auto; padding: 3px; }
  .iw-main__menu .iw-btn { min-height: 44px; height: 44px !important; margin: 0; font-size: 15px !important; }
  .iw-main__menu .iw-btn__sub { font-size: 11px; }
  .pr-looks .iw-locker__body { top: 80px; bottom: 54px; width: 57vw; overflow-y: auto; padding: 3px; gap: 6px; }
  .pr-hero-grid, .pr-hero-detail, .pr-hero-status, .pr-hero-scope { flex-shrink: 0; }
  .pr-hero-foot { position: sticky; bottom: 0; z-index: 2; flex-shrink: 0; padding: 6px 0 0; background: #f7f4eaf5; }
  .pr-hero-foot .iw-btn { min-height: 44px; }
  .pr-hero-card { min-height: 90px; height: 90px; }
  .pr-hero-card__portrait { max-height: 36px; }
  .pr-roster-art { top: 125px; bottom: 54px; width: 33%; }
  .pr-roster-toolbar { padding: 3px 5px; gap: 4px; }
  .pr-roster-caption { font-size: 10px; }
  .iw-news__stage { padding: 14px; overflow-y: auto; }
  .iw-news__card { grid-template-columns: .7fr 1.4fr; width: min(94vw,960px); max-height: calc(100dvh - 28px); padding: 12px 16px; gap: 20px; rotate: 0deg; overflow-y: auto; }
  .iw-news__title, .iw-news__title.is-one { font-size: 22px; margin: 5px 0; rotate: 0deg; }
  .iw-news__kicker { font-size: 10px; letter-spacing: .12em; rotate: 0deg; }
  .iw-news__lede { font-size: 12px; line-height: 1.25; max-width: none; margin-bottom: 6px; }
  .iw-news__list { gap: 4px; margin-bottom: 8px; }
  .iw-news__list li { font-size: 12.5px; line-height: 1.25; padding: 5px; }
  .iw-news__btns .iw-btn { min-height: 44px; height: 44px; font-size: 14px; }
  .iw-news__foot { margin-top: 6px; }
}