/* Kitchen Kizuna — design system: tokens, paper/cork/ink components, buttons, focus, motion.
   Everything is sized in rem; the root font-size scales with the viewport like a game canvas
   (16px at 1920x1080, 10.7px at 1280x720, 32px at 4K). */

:root {
  --ink: #2b1b33;
  --ink-2: #4a3552;
  --ink-soft: rgba(43, 27, 51, .55);
  --paper: #fff8ec;
  --paper-2: #fbefd9;
  --paper-3: #f3e2c4;
  --cork: #b98552;
  --pink: #ff4f87;
  --pink-2: #ff8fb3;
  --pink-3: #ffd6e4;
  --orange: #ff8636;
  --yellow: #ffd23f;
  --gold: #e9b43a;
  --green: #4fb06a;
  --green-2: #b7e4a6;
  --blue: #3f8cff;
  --blue-2: #a9d1ff;
  --navy: #1f2b5c;
  --navy-2: #2d3d7a;
  --lav: #9f8cff;
  --lav-2: #d9d0ff;
  --red: #e23a4e;
  --team0: #ff6a3d;
  --team1: #5b5cf0;
  --shadow: 0.38rem 0.38rem 0 var(--ink);
  --shadow-sm: 0.22rem 0.22rem 0 var(--ink);
  --shadow-lg: 0.6rem 0.6rem 0 var(--ink);
  --ol: 0.19rem solid var(--ink);
  --ol-thick: 0.26rem solid var(--ink);
  --r: 0.6rem;
  --f-ui: 'M PLUS Rounded 1c', 'Hiragino Maru Gothic ProN', system-ui, sans-serif;
  --f-title: 'Permanent Marker', 'Yusei Magic', 'M PLUS Rounded 1c', cursive;
  --f-manga: 'Bangers', 'Permanent Marker', Impact, sans-serif;
  --f-hand: 'Kalam', 'Yusei Magic', 'Comic Sans MS', cursive;
  --f-jp: 'Yusei Magic', 'M PLUS Rounded 1c', sans-serif;
  --ease-pop: cubic-bezier(.34, 1.56, .64, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --paper-tex: url('../assets/ui/textures/paper.jpg');
  color-scheme: light;
}

* { box-sizing: border-box; }
html {
  /* fit a 120rem x 67.5rem (16:9) layout inside any viewport; never clip */
  font-size: max(6px, min(1.481vh, 0.8333vw));
  -webkit-text-size-adjust: 100%;
}
/* Squarer than about 3:2 (4:3 tablets, foldables, anything held upright) the 120rem width would shrink everything:
   those get a 100rem-wide canvas, with the extra height going to the screens (tall-aspect rules in touch.css).
   16:9 and wider are unaffected. */
@media (max-aspect-ratio: 29/20) { html { font-size: max(6px, min(1.481vh, 1vw)); } }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  background: #2b1b33;
  color: var(--ink);
  font-family: var(--f-ui);
  font-weight: 700;
  -webkit-font-smoothing: antialiased;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
img { -webkit-user-drag: none; user-select: none; }
button { font: inherit; color: inherit; }
body.kbd-nav * { cursor: none !important; }

#stage { position: fixed; inset: 0; z-index: 0; }
#ui { position: fixed; inset: 0; z-index: 10; }
#overlay { position: fixed; inset: 0; z-index: 30; pointer-events: none; }
#overlay > * { pointer-events: auto; }
#toasts { position: fixed; right: 1.5rem; top: 1.5rem; z-index: 50; display: flex; flex-direction: column; gap: .7rem; pointer-events: none; }
body.in-match #ui { pointer-events: none; }

/* ---------- screens ---------- */
.screen {
  position: absolute; inset: 0; overflow: hidden;
  display: flex; flex-direction: column;
  background: var(--cork) center/cover no-repeat;
}
.screen.is-leaving { pointer-events: none; }
.screen > .scroll { flex: 1; min-height: 0; overflow: auto; }
.bg-pinboard { background-image: linear-gradient(rgba(255,236,210,.13), rgba(255,236,210,.13)), url('../assets/ui/bg/pinboard.jpg'), radial-gradient(circle at 30% 30%, #d3a26b, #a8743f); }
.bg-night { background-image: linear-gradient(180deg, rgba(25,16,52,.35), rgba(25,16,52,.55)), url('../assets/ui/bg/night-market.jpg'), linear-gradient(#2b2059, #6a3a6e); }
.bg-dojo { background-image: linear-gradient(180deg, rgba(255,240,220,.08), rgba(43,27,51,.25)), url('../assets/ui/bg/dojo.jpg'), linear-gradient(#e9cfa3, #b88a5a); }
.bg-keyart { background-image: url('../assets/ui/title/keyart.jpg'), linear-gradient(#ffb36b, #8f6bd6); background-position: center bottom; }

/* cork grain overlay so even the CSS fallback reads as cork */
.cork-grain::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .06; mix-blend-mode: multiply;
  background-image: radial-gradient(rgba(60,30,10,.7) 1px, transparent 1.4px), radial-gradient(rgba(60,30,10,.5) 1px, transparent 1.3px);
  background-size: 7px 7px, 11px 11px; background-position: 0 0, 3px 5px;
}

/* ---------- paper ---------- */
.paper {
  position: relative;
  background: var(--paper) var(--paper-tex);
  background-size: 32rem;
  border: var(--ol);
  border-radius: 0.35rem;
  box-shadow: var(--shadow);
}
.paper.torn { border-radius: 0.2rem; clip-path: polygon(0 1.5%, 3% 0, 12% 1%, 25% 0, 40% .8%, 55% 0, 70% 1%, 85% 0, 97% .6%, 100% 2%, 99.4% 20%, 100% 45%, 99.5% 70%, 100% 97%, 96% 100%, 80% 99.3%, 60% 100%, 40% 99.2%, 20% 100%, 4% 99.4%, 0 98%, .6% 75%, 0 50%, .5% 25%); }
.paper.kraft { background-color: #e9d2a8; }
.paper.pinkp { background-color: #ffe4ec; }
.paper.navy { background: linear-gradient(160deg, #24306a, #1a2252); color: #fff; }
.tilt-l { transform: rotate(-1.6deg); }
.tilt-r { transform: rotate(1.4deg); }
.tilt-l2 { transform: rotate(-3deg); }
.tilt-r2 { transform: rotate(3deg); }

/* washi tape: add <i class="tape"></i> inside any positioned element */
.tape {
  position: absolute; z-index: 3; width: 6.5rem; height: 1.7rem; pointer-events: none;
  background: var(--tape, rgba(255, 143, 179, .82));
  background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.28) 0 .4rem, transparent .4rem .9rem), var(--tape-img, none);
  /* zig-zag torn ends */
  -webkit-mask: conic-gradient(from -45deg at left, #0000 25%, #000 0) left/51% .32rem repeat-y, conic-gradient(from 135deg at right, #0000 25%, #000 0) right/51% .32rem repeat-y;
  mask: conic-gradient(from -45deg at left, #0000 25%, #000 0) left/51% .32rem repeat-y, conic-gradient(from 135deg at right, #0000 25%, #000 0) right/51% .32rem repeat-y;
  box-shadow: 0 .1rem .2rem rgba(0,0,0,.12);
  filter: saturate(1.05);
}
.tape.t-tl { top: -.7rem; left: -1.6rem; transform: rotate(-35deg); }
.tape.t-tr { top: -.7rem; right: -1.6rem; transform: rotate(35deg); }
.tape.t-bl { bottom: -.6rem; left: -1.6rem; transform: rotate(35deg); }
.tape.t-br { bottom: -.6rem; right: -1.6rem; transform: rotate(-35deg); }
.tape.t-top { top: -.85rem; left: 50%; transform: translateX(-50%) rotate(-2deg); }
.tape.blue { --tape: rgba(120, 186, 255, .82); }
.tape.mint { --tape: rgba(140, 220, 170, .85); }
.tape.yellow { --tape: rgba(255, 216, 92, .85); }
.tape.lav { --tape: rgba(185, 160, 255, .82); }
.tape.dots { --tape-img: radial-gradient(rgba(255,255,255,.75) .18rem, transparent .2rem); background-size: auto, .9rem .9rem; }
.tape.check { --tape-img: repeating-linear-gradient(45deg, rgba(255,255,255,.35) 0 .3rem, transparent .3rem .6rem); }

/* push pin */
.pin { position: absolute; z-index: 4; width: 1.5rem; height: 1.5rem; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 35% 30%, #fff 0 .14rem, var(--pin, #ff4f87) .2rem, color-mix(in srgb, var(--pin, #ff4f87), #000 35%) 100%);
  box-shadow: .18rem .3rem .2rem rgba(0,0,0,.35); }

/* handwritten sticky note */
.note {
  position: absolute; padding: .9rem 1.1rem; font-family: var(--f-hand); color: #7b3a2a; line-height: 1.15;
  background: #fff4c9 var(--paper-tex); background-size: 20rem; box-shadow: .2rem .3rem .5rem rgba(0,0,0,.25);
  font-size: 1.15rem; pointer-events: none; white-space: pre-line;
}
.note.jp { font-family: var(--f-jp); color: #5b2433; writing-mode: horizontal-tb; }
.note.pink { background-color: #ffdbe7; }
.note.green { background-color: #e1f4d2; }
.note.blue { background-color: #dbeeff; }

/* stickers (generated die-cuts) */
.sticker { position: absolute; pointer-events: none; filter: drop-shadow(.15rem .25rem .15rem rgba(0,0,0,.3)); }

/* ---------- typography ---------- */
.title-marker {
  font-family: var(--f-title); font-weight: 400; letter-spacing: .02em; line-height: 1; color: var(--ink);
  text-transform: uppercase;
}
.brush-underline { position: relative; display: inline-block; }
.brush-underline::after {
  content: ''; position: absolute; left: 4%; right: 2%; bottom: -.25em; height: .22em; border-radius: 99px;
  background: linear-gradient(90deg, var(--pink), var(--pink-2) 80%, transparent); transform: rotate(-1deg);
}
.manga { font-family: var(--f-manga); letter-spacing: .04em; font-weight: 400; }
.outline-text { -webkit-text-stroke: .12em var(--ink); paint-order: stroke fill; }
.jp { font-family: var(--f-jp); }
.muted { color: var(--ink-soft); }
.num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; }

/* ---------- buttons ---------- */
.btn {
  --c: var(--paper); --c2: var(--ink);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: .75rem 1.6rem; min-height: 3.4rem;
  background: var(--c); color: var(--c2);
  border: var(--ol-thick); border-radius: .7rem;
  box-shadow: var(--shadow);
  font-family: var(--f-ui); font-weight: 900; font-size: 1.35rem; letter-spacing: .02em; text-transform: uppercase;
  cursor: pointer; outline: none;
  transition: transform .14s var(--ease-pop), box-shadow .14s var(--ease-out), background-color .2s, filter .2s;
}
.btn:hover, .btn.is-focus { transform: translate(-.15rem, -.2rem) rotate(-.6deg); box-shadow: .55rem .6rem 0 var(--ink); }
.btn:active, .btn.is-press { transform: translate(.3rem, .3rem); box-shadow: .08rem .08rem 0 var(--ink); transition-duration: .05s; }
.btn.pink { --c: var(--pink); --c2: #fff; }
.btn.blue { --c: var(--blue); --c2: #fff; }
.btn.green { --c: var(--green); --c2: #fff; }
.btn.yellow { --c: var(--yellow); }
.btn.navy { --c: var(--navy); --c2: #fff; }
.btn.ghost { --c: rgba(255,248,236,.85); }
.btn.small { font-size: 1rem; padding: .45rem 1rem; min-height: 2.5rem; box-shadow: var(--shadow-sm); border-width: .19rem; }
.btn.small:hover, .btn.small.is-focus { box-shadow: .35rem .4rem 0 var(--ink); }
.btn[disabled], .btn.is-disabled { filter: grayscale(.8) brightness(.95); opacity: .7; cursor: not-allowed; }
.btn .glyph { font-size: .8em; }

/* focus ring shared by every navigable element */
.focusable { outline: none; }
.focusable.is-focus, .focusable:focus-visible { z-index: 5; }
.focus-ring { position: relative; }
.focus-ring.is-focus::after, .focus-ring:focus-visible::after {
  content: ''; position: absolute; inset: -.55rem; border-radius: inherit; pointer-events: none;
  border: .28rem solid var(--pink); box-shadow: 0 0 0 .2rem #fff, 0 0 1.4rem .3rem rgba(255, 79, 135, .65);
  animation: ring-pulse 1.1s ease-in-out infinite;
}
@keyframes ring-pulse { 50% { box-shadow: 0 0 0 .2rem #fff, 0 0 2rem .6rem rgba(255, 79, 135, .85); } }

/* pointer hand that bounces next to focused menu items */
.cursor-hand {
  position: absolute; left: -3.4rem; top: 50%; width: 2.8rem; height: 2.8rem; transform: translateY(-50%); opacity: 0;
  transition: opacity .15s; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='26' fill='%23ffd23f' stroke='%232b1b33' stroke-width='5'/%3E%3Cg fill='%232b1b33'%3E%3Ccircle cx='24' cy='22' r='4'/%3E%3Ccircle cx='40' cy='22' r='4'/%3E%3Ccircle cx='32' cy='34' r='4'/%3E%3Ccircle cx='22' cy='44' r='4'/%3E%3Ccircle cx='42' cy='44' r='4'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;
}
.is-focus > .cursor-hand { opacity: 1; animation: hand-bob .6s ease-in-out infinite alternate; }
@keyframes hand-bob { from { transform: translate(-.3rem, -50%) rotate(-12deg); } to { transform: translate(.3rem, -50%) rotate(12deg); } }

/* ---------- tags, stamps, chips ---------- */
.tag {
  display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .9rem; border: .16rem solid var(--ink); border-radius: 99px;
  background: var(--paper); font-weight: 900; font-size: .95rem; text-transform: uppercase; letter-spacing: .04em;
}
.brush-tag {
  display: inline-block; padding: .2rem 1.6rem .3rem 1.2rem; color: #fff; font-family: var(--f-title); font-size: 1.9rem; text-transform: uppercase;
  background: var(--tag, var(--pink));
  clip-path: polygon(2% 12%, 12% 0, 40% 6%, 70% 0, 98% 8%, 100% 40%, 96% 70%, 100% 96%, 70% 100%, 40% 94%, 10% 100%, 0 80%, 3% 45%);
}
.stamp {
  display: inline-grid; place-items: center; padding: .3rem .8rem; border: .22rem solid var(--red); color: var(--red); border-radius: .4rem;
  font-family: var(--f-manga); font-size: 1.4rem; letter-spacing: .06em; transform: rotate(-8deg); opacity: .9;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.2 1.9'/%3E%3C/filter%3E%3Crect width='60' height='60' filter='url(%23n)'/%3E%3C/svg%3E");
}
.kbd {
  display: inline-grid; place-items: center; min-width: 1.9rem; height: 1.9rem; padding: 0 .45rem; border-radius: .45rem;
  background: #fff; border: .16rem solid var(--ink); box-shadow: 0 .18rem 0 var(--ink); font-size: .95rem; font-weight: 900; color: var(--ink);
  font-family: var(--f-ui); line-height: 1;
}
.kbd.pad { border-radius: 50%; width: 1.9rem; padding: 0; color: #fff; }
.kbd.pad.a { background: #3fae5a; } .kbd.pad.b { background: #e8414f; } .kbd.pad.x { background: #3f7fff; } .kbd.pad.y { background: #f2b630; }
.kbd.pad.bumper { border-radius: .45rem; width: auto; padding: 0 .4rem; background: var(--ink); }

/* footer hint bar */
.hints {
  position: absolute; left: 50%; bottom: 1.1rem; transform: translateX(-50%); z-index: 20;
  display: flex; gap: 1.6rem; align-items: center; padding: .55rem 1.4rem; border-radius: 99px;
  background: rgba(43,27,51,.82); color: #fff; font-size: 1rem; font-weight: 800; white-space: nowrap;
  box-shadow: 0 .3rem 1rem rgba(0,0,0,.25);
}
.hints span { display: inline-flex; gap: .5rem; align-items: center; }

/* ---------- bars & gauges ---------- */
.statbar { position: relative; height: 1.15rem; border-radius: 99px; background: #d8cfc4; border: .14rem solid var(--ink); overflow: hidden; }
.statbar > i { position: absolute; inset: 0 auto 0 0; width: calc(var(--v) * 10%); border-radius: 99px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--bar, var(--pink)), #fff 35%), var(--bar, var(--pink)) 55%);
  transition: width .5s var(--ease-out); }
.statbar > i::after { content: ''; position: absolute; inset: .12rem .3rem auto .3rem; height: .22rem; border-radius: 99px; background: rgba(255,255,255,.55); }

/* ---------- toast ---------- */
.toast { padding: .8rem 1.2rem; display: flex; gap: .8rem; align-items: center; min-width: 18rem; max-width: 30rem; font-size: 1.05rem;
  animation: toast-in .5s var(--ease-pop) both; }
.toast.out { animation: toast-out .35s ease-in both; }
.toast img { width: 3rem; height: 3rem; object-fit: contain; }
.toast b { display: block; font-size: 1.15rem; }
@keyframes toast-in { from { transform: translateX(120%) rotate(6deg); } }
@keyframes toast-out { to { transform: translateX(130%) rotate(6deg); opacity: 0; } }

/* ---------- screen transition: see styles/motion.css (washi-tape wipe) ---------- */
#wipe { position: fixed; inset: 0; z-index: 40; pointer-events: none; overflow: hidden; }

/* staged entrance for children: give them style="--i:n" */
.kk-enter > *, .kk-enter-each { animation: pop-in .55s var(--ease-pop) both; animation-delay: calc(var(--i, 0) * 45ms + 120ms); }
@keyframes pop-in { from { opacity: 0; transform: translateY(1.6rem) scale(.92) rotate(var(--rot-in, -2deg)); } }
@keyframes drop-in { from { opacity: 0; transform: translateY(-3rem) rotate(-6deg); } }
@keyframes slide-l { from { opacity: 0; transform: translateX(-4rem); } }
@keyframes slide-r { from { opacity: 0; transform: translateX(4rem); } }
@keyframes float { 50% { transform: translateY(-.6rem); } }
@keyframes wobble { 0%,100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }
@keyframes shine { from { background-position: -200% 0; } to { background-position: 200% 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes blink { 50% { opacity: .25; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
body.reduced-flash .flashy { animation: none !important; }

/* small screens: let screens scroll instead of clipping */
/* taller-than-16:9 screens (4:3, 16:10): the layout fits the width; let panels breathe vertically */

/* dev: ?still=1 settles every animation instantly for screenshot comparisons */
html.still *, html.still *::before, html.still *::after { animation-delay: -10s !important; animation-play-state: paused !important; transition: none !important; }
html.still #wipe { display: none; }

/* save state + fps */
.save-ribbon { position: fixed; left: 50%; top: .8rem; z-index: 60; transform: translate(-50%, -150%); display: flex; align-items: center; gap: 1rem; max-width: min(70rem, 94vw); padding: .6rem .8rem .6rem 1.2rem; border: .2rem solid var(--ink); border-radius: .6rem; box-shadow: var(--shadow); font-size: 1.05rem; font-weight: 900; transition: transform .35s var(--ease-pop); }
.save-ribbon.show { transform: translate(-50%, 0); }
.save-ribbon.error { background: #ffe1e4; } .save-ribbon.warn { background: #fff3c4; }
.save-ribbon button { flex: none; width: 2rem; height: 2rem; border-radius: 50%; border: .16rem solid var(--ink); background: #fff; cursor: pointer; font-weight: 900; }
.save-dot { position: fixed; right: 1rem; bottom: 1rem; z-index: 60; width: 2.2rem; height: 2.2rem; opacity: 0; transition: opacity .2s; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='28' fill='%23ffd23f' stroke='%232b1b33' stroke-width='4'/%3E%3Cg fill='%232b1b33'%3E%3Ccircle cx='24' cy='20' r='4'/%3E%3Ccircle cx='40' cy='20' r='4'/%3E%3Ccircle cx='32' cy='33' r='4'/%3E%3Ccircle cx='20' cy='42' r='4'/%3E%3Ccircle cx='44' cy='42' r='4'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat; }
.save-dot.on { opacity: 1; animation: spin .6s linear infinite; }
.fps-meter { position: fixed; left: .6rem; top: .6rem; z-index: 70; padding: .15rem .5rem; border-radius: .3rem; background: rgba(0,0,0,.65); color: #9fffa0; font: 700 12px/1.3 ui-monospace, Menlo, monospace; pointer-events: none; }
.glyph-pair { display: inline-flex; gap: .2rem; }
.kbd.pad.face { color: #fff; border-radius: 50%; width: 1.9rem; padding: 0; text-shadow: 0 0 .1rem var(--ink), 0 0 .1rem var(--ink), 0 .06rem 0 var(--ink); } /* settings-audit: white Y on yellow was 1.8:1 */ .kbd.pad.fam-nintendo.face, .kbd.pad.fam-generic.face { background: #4a4a55; }
.kbd.pad.fam-playstation.face { font-size: 1.05rem; }

/* menu text size (Settings → Accessibility): scales reading text without breaking fixed layouts */
/* settings-audit: zoom only the OUTERMOST match, so help text inside a toggle isn't scaled twice (130% became 169%) */
body.text-large :is(p, small, .tag, .toggle-text, .set-label, .slider-label, .modal-body, .menu-feature-desc, .sc-sp-desc, .rs-lines, .dj-t, .ct-pv-mood, .cd-blurb, .fr-choice small, .hints, .op-trow, .lb-name, .ach, .stat-name, .rl-label, .ctl-table, .settings .seg-opt):not(:is(p, small, .tag, .toggle-text, .set-label, .slider-label, .modal-body, .menu-feature-desc, .sc-sp-desc, .rs-lines, .dj-t, .ct-pv-mood, .cd-blurb, .fr-choice, .hints, .op-trow, .lb-name, .ach, .stat-name, .rl-label, .ctl-table) *) { zoom: var(--ts, 1); }
[hidden] { display: none !important; }
/* KK-040: the empty save ribbon's shadow peeked in at top-centre; fully hide it when not showing */
.save-ribbon:not(.show) { visibility: hidden; transform: translate(-50%, -250%); transition: transform .35s var(--ease-pop), visibility 0s linear .35s; }
/* multi-tab cover: explicit choice, never silent read-only play */
.tab-cover { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: rgba(30,20,45,.72); backdrop-filter: blur(4px); }
.tab-cover-card { position: relative; width: min(52rem, 92vw); padding: 2.6rem 3rem 2rem; text-align: center; animation: pop-in .35s var(--ease-pop) both; }
.tab-cover-icon { font-size: 4.4rem; line-height: 1; }
.tab-cover-card h2 { font-size: 2.6rem; margin: .8rem 0 .6rem; }
.tab-cover-card p { font-size: 1.3rem; line-height: 1.45; margin: 0 0 1.4rem; }
.tab-cover-card .modal-actions { justify-content: center; }
/* KK-039: toasts slide in under the profile card (top-right) so FP / Ki stay visible */
#toasts { top: 13.6rem; }
body.in-match #toasts { top: 1.5rem; }