/* Shared presentation for the local UI candidate; state and effects remain in existing controllers. */
body.ui-refresh {
  --bg:#fffdf7; --surface:#fffdf7; --surface-strong:#fff; --ink:#152d31;
  --muted:#556366; --line:#d8ded8; --accent:#12616c; --accent-soft:#e8f2ef;
  --own:#152d31; --borrowed:#c82f2c; --borrowed-soft:#fff4f2; --special:#931b2c;
  --interface-width:720px; --interface-edge:20px; --interface-gap:36px;
  --font-ui:"Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",sans-serif;
  --font-display:"Hiragino Maru Gothic ProN","Yu Gothic",sans-serif;
  background:var(--bg); color:var(--ink); font-size:16px; line-height:1.7;
}
.ui-refresh button { line-height:1.5; border-radius:999px; box-shadow:none; }
.ui-refresh button:disabled { cursor:default; }
.ui-refresh :is(button,a,input,summary):focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
.ui-refresh .secondary-button { border:1px solid #ccd7d2; background:transparent; color:var(--accent); font-weight:600; }
.ui-refresh .modal { padding:24px 16px; background:rgba(21,45,49,.30); backdrop-filter:blur(3px); }
.ui-refresh .modal-card { max-height:calc(100dvh - 48px); overflow-y:auto; overscroll-behavior:contain; border:1px solid var(--line); border-radius:22px; background:var(--bg); padding:28px; box-shadow:0 18px 60px rgba(21,45,49,.14); }
.ui-refresh .modal-card p { font-weight:400; line-height:1.8; }
.ui-refresh .modal-card h2 { font-size:24px; line-height:1.5; }
.ui-refresh .modal-card .section-kicker { font-size:12px; font-weight:600; }
.ui-refresh .modal-card input { min-height:48px; border-radius:12px; border:1px solid #b8c8c6; background:#fff; font-size:16px; }
.ui-refresh .modal-card .modal-actions { gap:12px; }
/* One wordmark for every site header; only its size changes with the screen. */
body.ui-refresh .interface-brand { position:relative; display:inline-flex; align-items:center; flex:none; min-height:44px; margin:0; color:var(--ink); font-family:var(--font-display); font-size:var(--interface-brand-size,18px); font-weight:900; font-synthesis:none; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; letter-spacing:-.065em; line-height:1.4; white-space:nowrap; text-decoration:none; }
body.ui-refresh .interface-brand::before { content:""; position:absolute; width:.225em; height:.225em; left:.645em; top:calc(50% - .7em); border-radius:50%; background:var(--borrowed); }
.ui-refresh :is(.app-legal-links,.landing-legal-links) { border-top:1px solid var(--line); padding-top:24px; font-size:12px; line-height:1.8; }
.ui-refresh :is(.app-legal-links,.landing-legal-links) a { color:var(--muted); }
.ui-refresh .landing-name-modal-card { width:min(480px,100%); }
.ui-refresh .landing-name-modal-card .landing-save-name { min-height:52px; margin-top:24px; }
.ui-refresh .landing-name-modal-card .landing-name-field { gap:12px; }
@media(max-width:359px) { body.ui-refresh { --interface-edge:16px; } .ui-refresh .modal { padding:16px 12px; } .ui-refresh .modal-card { padding:22px 18px; max-height:calc(100dvh - 32px); } }
@media(prefers-reduced-motion:reduce) { .ui-refresh { scroll-behavior:auto; } }

/* Dismiss controls share the reading dialog's labelled capsule. Progress actions
   deliberately do not use this class; their existing handlers remain unchanged. */
body.ui-refresh .modal button.modal-close-button {
  display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto;
  width:auto; min-width:80px; min-height:44px; padding:8px 16px;
  border:1px solid #ccd7d2; border-radius:999px;
  background:var(--bg); color:var(--accent);
  font-family:var(--font-ui); font-size:14px; font-weight:600; line-height:1.5;
  white-space:nowrap; text-decoration:none; box-shadow:none; transform:none;
}
body.ui-refresh .modal button.modal-close-button:is(:hover,:focus-visible):not(:disabled) {
  background:var(--accent-soft); border-color:#a6beb6; color:var(--accent); filter:none;
}
/* Keep the heading and dismissal in the scrollport, including long records. */
body.ui-refresh .modal .modal-close-header {
  position:sticky; top:calc(-1 * var(--close-header-y,28px)); z-index:5;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  margin:calc(-1 * var(--close-header-y,28px)) calc(-1 * var(--close-header-x,28px)) 24px;
  padding:var(--close-header-y,28px) var(--close-header-x,28px) 16px;
  background:var(--bg); border-bottom:1px solid var(--line); text-align:left;
}
body.ui-refresh .modal .modal-close-header > :first-child { min-width:0; }
body.ui-refresh .modal .modal-close-header h2 { margin:0; font-size:clamp(18px,5vw,24px); }
body.ui-refresh .modal .modal-close-header .modal-close-button { position:static; margin:0; }
body.ui-refresh :is(.result-card,.post-game-top-ten-card,.previous-close-ranking-card) { --close-header-x:32px; }
@media(max-width:600px) {
  body.ui-refresh :is(.onboarding-card,.gift-sheet,.recovery-sheet) { --close-header-y:24px; --close-header-x:20px; }
}
@media(max-width:599px) {
  body.ui-refresh :is(.result-card,.post-game-top-ten-card,.previous-close-ranking-card) { --close-header-y:22px; --close-header-x:20px; }
}
@media(max-width:359px) {
  body.ui-refresh :is(.landing-name-modal-card,.support-modal-card) { --close-header-y:22px; --close-header-x:18px; }
}

body.ui-refresh .modal #resultDoneButton.modal-close-button { display:flex; width:fit-content; }