/* Result and notebook presentation. Controllers, records and scoring stay shared. */
body.ui-refresh :is(.result-card,.my-note-sheet,.post-game-top-ten-card,.previous-close-ranking-card) {
  --result-section-gap:32px;
  background:#fffdf6;
  color:var(--ink);
  text-align:left;
}
body.ui-refresh :is(#gameOverModal,#postGameTopTenModal,#previousCloseRankingModal) { padding:20px 16px; }
body.ui-refresh .result-card {
  width:min(640px,100%);
  max-height:calc(100dvh - 40px);
  padding:28px 32px 32px;
  border:1px solid var(--line);
  border-radius:20px;
}
body.ui-refresh .result-interface-header { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:24px; }
body.ui-refresh .result-interface-header h2 { margin:0; font-size:24px; }
body.ui-refresh .result-interface-close { flex-shrink:0; min-width:44px; min-height:44px; padding:6px 0 6px 12px; background:transparent; color:var(--muted); font-size:12px; box-shadow:none; }
body.ui-refresh .result-card > .result-retry-message { justify-content:flex-start; width:100%; gap:16px; margin:28px 0 10px; }
body.ui-refresh .result-card > .result-retry-message .result-character { position:relative; flex:0 0 68px; width:68px; height:60px; margin:0; overflow:visible; }
body.ui-refresh .result-card > .result-retry-message .result-character img { transform:none; width:100%; height:100%; }
body.ui-refresh .result-card > .result-retry-message .gojuo-name-tag { bottom:-7px; font-size:9px; }
body.ui-refresh :where(#gameOverModal,#myNoteModal,#sharedResultContent) .result-retry-speech { flex:1; padding:14px 18px; font-family:var(--font-ui); font-size:14px; font-weight:700; line-height:1.8; color:var(--ink); border-color:var(--line); }
body.ui-refresh .result-card .result-summary { justify-items:center; gap:8px; text-align:center; }
body.ui-refresh .result-card .result-summary-title .section-kicker { display:block; margin:0; color:var(--muted); font-size:12px; letter-spacing:0; font-weight:500; }
body.ui-refresh .result-card .result-score-hero { justify-content:center; gap:8px; }
body.ui-refresh :where(#gameOverModal,#myNoteModal,#sharedResultContent) .result-score-hero strong { font-size:clamp(46px,12vw,62px); font-weight:800; line-height:1.2; }
body.ui-refresh :where(#gameOverModal,#myNoteModal,#sharedResultContent) .result-score-hero > span { font-size:18px; font-weight:500; }
body.ui-refresh .result-card .result-summary > #gameOverReason { display:block; margin:6px 0 0; font-size:11px; line-height:1.7; color:var(--muted); font-weight:400; }
body.ui-refresh .result-card .result-daily-status { display:flex; justify-content:center; flex-wrap:wrap; gap:8px 24px; margin:12px 0 0; }
body.ui-refresh :where(#gameOverModal,#myNoteModal,#sharedResultContent) .result-daily-status > span { font-size:11px; font-weight:400; }
body.ui-refresh :where(#gameOverModal,#myNoteModal,#sharedResultContent) .result-daily-status > span:first-child { display:none; }
body.ui-refresh :where(#gameOverModal,#myNoteModal,#sharedResultContent) .result-daily-status strong { font-size:12px; font-weight:500; }
body.ui-refresh :where(#gameOverModal,#myNoteModal,#sharedResultContent) .result-red-progress { margin:20px 0 0; padding:0 0 24px; border:0; border-bottom:1px solid var(--line); border-radius:0; background:transparent; }
body.ui-refresh :where(#gameOverModal,#myNoteModal,#sharedResultContent) .result-red-progress > div:first-child { justify-content:flex-start; gap:10px; font-size:11px; color:var(--muted); font-weight:500; }
body.ui-refresh :where(#gameOverModal,#myNoteModal,#sharedResultContent) .result-red-progress strong { color:var(--borrowed); font-size:14px; }
body.ui-refresh :where(#gameOverModal,#myNoteModal,#sharedResultContent) .result-red-progress-track { height:3px; margin-top:10px; }
body.ui-refresh :is(.result-card,.note-saved-detail) .result-best-word-section { margin-top:32px; }
body.ui-refresh .result-card .result-section-label { display:block; padding:0; min-height:0; background:transparent; font-size:16px; font-weight:600; line-height:1.6; }
body.ui-refresh :where(#gameOverModal,#myNoteModal,#sharedResultContent) .result-best-word-heading { margin-bottom:12px; }
body.ui-refresh :where(#gameOverModal,#myNoteModal,#sharedResultContent) .result-best-word-heading :is(h3,h4) { color:var(--muted); font-size:13px; font-weight:500; }
body.ui-refresh :where(#gameOverModal,#myNoteModal,#sharedResultContent) .result-best-word-heading strong { margin:0; padding:0; background:transparent; color:var(--ink); font-size:18px; font-weight:650; }
body.ui-refresh :where(#gameOverModal,#myNoteModal,#sharedResultContent) .result-best-word { margin:12px 0 22px; line-height:1.7; }
body.ui-refresh :where(#gameOverModal,#myNoteModal,#sharedResultContent) .result-best-word .built-letter { font-size:clamp(25px,6.2vw,32px); }
body.ui-refresh :is(.result-card,.note-saved-detail) .result-board { width:100%; max-width:510px; margin:0 auto; gap:3px; }
body.ui-refresh :where(#gameOverModal,#myNoteModal,#sharedResultContent) .result-board-cell { min-width:0; border-radius:3px; font-size:clamp(13px,3.5vw,20px); }
body.ui-refresh :where(#gameOverModal,#myNoteModal,#sharedResultContent) .result-history-section { margin-top:32px; }
body.ui-refresh :where(#gameOverModal,#myNoteModal,#sharedResultContent) .result-answer { padding:20px 0; border-bottom:1px solid var(--line); }
body.ui-refresh :where(#gameOverModal,#myNoteModal,#sharedResultContent) .result-answer:first-child { padding-top:12px; }
body.ui-refresh :where(#gameOverModal,#myNoteModal,#sharedResultContent) .result-answer .result-history-row { padding:0; border:0; grid-template-columns:18px minmax(0,1fr) auto; gap:8px; }
body.ui-refresh :where(#gameOverModal,#myNoteModal,#sharedResultContent) .result-answer .result-history-index { color:var(--muted); font-size:11px; font-weight:400; }
body.ui-refresh :where(#gameOverModal,#myNoteModal,#sharedResultContent) .result-answer .result-history-word { font-size:18px; line-height:1.8; }
body.ui-refresh :where(#gameOverModal,#myNoteModal,#sharedResultContent) .result-answer .result-history-letter { font-size:inherit; line-height:1.8; }
body.ui-refresh :where(#gameOverModal,#myNoteModal,#sharedResultContent) .result-answer .result-answer-score { color:var(--ink); font-size:16px; font-weight:650; white-space:nowrap; }
body.ui-refresh :where(#gameOverModal,#myNoteModal,#sharedResultContent) .result-answer-score small { margin-left:3px; font-size:11px; font-weight:400; }
body.ui-refresh :where(#gameOverModal,#myNoteModal,#sharedResultContent) .result-answer .result-history-meta { justify-content:flex-start; margin:12px 0 0 26px; gap:8px 16px; text-align:left; }
body.ui-refresh :where(#gameOverModal,#myNoteModal,#sharedResultContent) .result-answer .result-chip { border:0; background:transparent; padding:0; min-height:0; font-size:12px; font-weight:500; line-height:1.7; }
body.ui-refresh :where(#gameOverModal,#myNoteModal,#sharedResultContent) .result-answer .result-chip.red { color:var(--borrowed); }
body.ui-refresh :where(#gameOverModal,#myNoteModal,#sharedResultContent) .result-answer .result-chip.black { color:var(--ink); }
body.ui-refresh :where(#gameOverModal,#myNoteModal,#sharedResultContent) .result-answer .result-chip.red-special { padding:1px 5px; background:var(--special); color:var(--special-ink); }
body.ui-refresh :where(#gameOverModal,#myNoteModal,#sharedResultContent) .result-answer .result-chip.yellow { padding:0 3px; background:#fff0bf; color:#64531b; }
body.ui-refresh :where(#gameOverModal,#myNoteModal,#sharedResultContent) .result-answer-board { margin:8px 0 0 26px; border:0; padding:0; background:transparent; }
body.ui-refresh :where(#gameOverModal,#myNoteModal,#sharedResultContent) .result-answer-board summary { display:flex; align-items:center; gap:8px; min-height:44px; width:max-content; max-width:100%; cursor:pointer; list-style:none; color:var(--accent); font-size:12px; font-weight:600; }
body.ui-refresh :where(#gameOverModal,#myNoteModal,#sharedResultContent) .result-answer-board summary::before { content:'＋'; }
body.ui-refresh :where(#gameOverModal,#myNoteModal,#sharedResultContent) .result-answer-board[open] summary::before { content:'−'; }
body.ui-refresh :where(#gameOverModal,#myNoteModal,#sharedResultContent) .result-answer-board summary::-webkit-details-marker { display:none; }
body.ui-refresh :where(#gameOverModal,#myNoteModal,#sharedResultContent) .result-answer-topic { margin:0 0 14px; color:var(--muted); font-size:12px; line-height:1.8; }
body.ui-refresh :where(#gameOverModal,#myNoteModal,#sharedResultContent) .result-world-ranking-section { border-block:1px solid var(--line); padding:12px 0; }
body.ui-refresh :is(.result-world-ranking-section,.result-speed-ranking-panel,.post-game-ranking-details) > summary { display:flex; align-items:center; min-height:44px; gap:8px; color:var(--ink); font-size:14px; font-weight:600; cursor:pointer; }
body.ui-refresh :is(.result-world-ranking-section,.result-speed-ranking-panel,.post-game-ranking-details) > summary::before { content:'＋'; }
body.ui-refresh :is(.result-world-ranking-section,.result-speed-ranking-panel,.post-game-ranking-details)[open] > summary::before { content:'−'; }
body.ui-refresh :is(.result-world-ranking-section,.result-speed-ranking-panel,.post-game-ranking-details) > summary::-webkit-details-marker { display:none; }
body.ui-refresh :is(.result-world-ranking-section,.result-speed-ranking-panel) > summary small { color:var(--muted); font-size:11px; font-weight:400; }
body.ui-refresh :where(#gameOverModal,#myNoteModal,#sharedResultContent) .result-footer { display:block; margin:28px 0 0; padding:0; background:transparent; }
body.ui-refresh #resultNoteSaveSection { border:0; padding:0; background:transparent; }
body.ui-refresh #resultNoteSaveSection > div:first-child { margin-bottom:16px; }
body.ui-refresh #resultNoteSaveSection h3 { font-size:14px; }
body.ui-refresh :where(#gameOverModal,#myNoteModal,#sharedResultContent) .result-share-entry { display:block; border:0; margin:20px 0 0; }
body.ui-refresh :where(#gameOverModal,#myNoteModal,#sharedResultContent) .result-share-choices { border-block:1px solid var(--line); padding:24px 0; }
body.ui-refresh :where(#gameOverModal,#myNoteModal,#sharedResultContent) .result-share-choices > h3 { margin:0 0 12px; color:var(--accent); font-family:var(--font-ui); font-size:21px; font-weight:700; text-align:center; }
body.ui-refresh :where(#gameOverModal,#myNoteModal,#sharedResultContent) .result-share-invitation { margin:16px 0 10px; color:var(--borrowed); text-align:center; font-size:15px; font-weight:800; line-height:1.8; }
body.ui-refresh .result-share-invitation.is-revealed { animation:share-invitation-greeting 700ms ease-out 1; }
@keyframes share-invitation-greeting {
  0%,100% { transform:translateY(0); }
  40% { transform:translateY(-3px); }
  70% { transform:translateY(1px); }
}
@media(prefers-reduced-motion:reduce) {
  body.ui-refresh .result-share-invitation.is-revealed { animation:none; }
}
body.ui-refresh #resultNoteSaveButton { border-color:#bccfc5; background:var(--accent-soft); color:var(--accent); }
body.ui-refresh #resultNoteSaveButton:hover:not(:disabled) { background:#dcece5; }
/* Keep the platform palettes readable after the shared secondary-button reset. */
body.ui-refresh :where(.result-share-option) .result-social-share-button { border-color:var(--social-share-background); background:var(--social-share-background); color:#fff; }
body.ui-refresh :where(.result-share-option) .result-image-primary-action { border-color:#6d28d9; background:linear-gradient(135deg,#6d28d9 0%,#be185d 100%); color:#fff; }
body.ui-refresh :where(.result-share-option) .result-image-save-action { border-color:#9b4bb5; background:#fff; color:#742d8f; }
body.ui-refresh .result-card .result-retry-section:has(> .hidden) { display:none; }
body.ui-refresh :where(#gameOverModal,#myNoteModal,#sharedResultContent) .result-share-preview { margin:20px 0; background:#fff; border-color:var(--line); }
body.ui-refresh :where(#gameOverModal,#myNoteModal,#sharedResultContent) .result-retry-section { justify-items:stretch; padding:0; margin:28px 0 0; background:transparent; }
body.ui-refresh :where(#gameOverModal,#myNoteModal,#sharedResultContent) .result-done-button { margin:14px auto 0; min-height:44px; font-size:13px; }
/* One row vocabulary covers current, saved and previous-close rankings. */
body.ui-refresh :is(.result-ranking-row,.result-ranking-top-row,.post-game-top-ten-row,.speed-ranking-row,.note-saved-ranking li) { border-bottom:1px solid var(--line); color:var(--ink); background:transparent; padding:14px 8px; margin-block:0; font-weight:500; }
body.ui-refresh :is(.result-ranking-around,.result-ranking-top,.post-game-top-ten-list,.speed-ranking-list,.note-saved-ranking) { row-gap:0; }
body.ui-refresh .result-ranking-gap-row { margin-top:0; }
body.ui-refresh :is(.result-ranking-row.current,.result-ranking-current-row,.result-ranking-self-row,.post-game-top-ten-row.is-current,.speed-ranking-row.is-current,.note-saved-self) { border-left:3px solid var(--accent); border-bottom-color:transparent; border-radius:8px; background:#eef5ef; color:var(--ink); }
/* Keep the separator before and after player highlights visible between rows. */
body.ui-refresh :is(.result-ranking-row,.result-ranking-top-row,.post-game-top-ten-row,.speed-ranking-row,.note-saved-ranking li):not(:last-child) { border-bottom:1px solid var(--line); }
/* Give every public ranking the same readable name size, including saved results. */
body.ui-refresh :is(.result-ranking-name,.result-ranking-top-name,.post-game-top-ten-person b,.speed-ranking-row b,.note-saved-ranking li > span:nth-child(2)) { min-width:0; font-size:16px; line-height:1.6; white-space:normal; overflow-wrap:anywhere; }
body.ui-refresh .post-game-top-ten-person { flex-wrap:wrap; }
body.ui-refresh .result-ranking-row.current .result-ranking-score { color:var(--ink); font-size:16px; }
body.ui-refresh .result-card .result-ranking-row:not(.current) .result-ranking-score { font-size:13px; }
body.ui-refresh .result-ranking-you { margin-left:7px; color:var(--accent); font-size:10px; font-style:normal; font-weight:600; white-space:nowrap; }
body.ui-refresh :is(.post-game-top-ten-card,.previous-close-ranking-card) { width:min(640px,100%); padding:28px 32px; border:1px solid var(--line); border-radius:20px; max-height:calc(100dvh - 40px); }
body.ui-refresh :is(.post-game-top-ten-header,.previous-close-ranking-header) { text-align:left; }
body.ui-refresh :is(.post-game-top-ten-header,.previous-close-ranking-header) h2 { font-size:24px; }
body.ui-refresh :is(.post-game-top-ten-tabs,.previous-close-ranking-tabs,.result-ranking-period-tabs) { margin-top:20px; border-bottom:1px solid var(--line); gap:0; background:transparent; }
body.ui-refresh :is(.post-game-top-ten-tabs,.previous-close-ranking-tabs,.result-ranking-period-tabs) > button { min-height:48px; border:0; border-bottom:3px solid transparent; border-radius:0; background:transparent; color:var(--muted); font-size:13px; font-weight:600; }
body.ui-refresh :is(.post-game-top-ten-tabs,.previous-close-ranking-tabs,.result-ranking-period-tabs) > button[aria-selected='true'] { color:var(--accent); border-bottom-color:var(--accent); background:transparent; }
body.ui-refresh .post-game-top-ten-person em { margin-left:7px; color:var(--accent); font-size:10px; font-style:normal; }
body.ui-refresh .post-game-top-ten-score { color:var(--ink); font-size:20px; }
body.ui-refresh :is(.post-game-top-ten-close,.previous-close-ranking-close) { min-height:44px; padding:8px 12px; }
body.ui-refresh .post-game-top-ten-row.is-pending .post-game-top-ten-score { font-size:12px; color:var(--muted); }

/* Podium ranks use a light tint; the current player's green highlight stays primary. */
body.ui-refresh .ranking-podium-gold { --ranking-podium-bg:#fff8e8; --ranking-name-color:#8a641d; }
body.ui-refresh .ranking-podium-silver { --ranking-podium-bg:#f1f4f6; --ranking-name-color:#526675; }
body.ui-refresh .ranking-podium-bronze { --ranking-podium-bg:#fbf0e8; --ranking-name-color:#925c3e; }
body.ui-refresh :is(.ranking-podium-gold,.ranking-podium-silver,.ranking-podium-bronze) { --ranking-font-weight:700; }
body.ui-refresh :is(
  .result-ranking-rank,.result-ranking-name,.result-ranking-name b,.result-ranking-row .result-ranking-score,
  .result-ranking-top-rank,.result-ranking-top-name,.result-ranking-top-row > strong,
  .post-game-top-ten-rank,.post-game-top-ten-person b,.post-game-top-ten-score,
  .speed-ranking-row small,.speed-ranking-row b,.speed-ranking-row strong,
  .note-saved-ranking li > span:first-child,.note-saved-ranking li > span:nth-child(2),.note-saved-ranking li b,.note-saved-ranking li > strong
) { font-weight:var(--ranking-font-weight,500); }
body.ui-refresh :is(.result-ranking-name,.result-ranking-name b,.result-ranking-top-name,.post-game-top-ten-person b,.speed-ranking-row b,.note-saved-ranking li > span:nth-child(2),.note-saved-ranking li b) { color:var(--ranking-name-color,var(--ink)); }
body.ui-refresh :is(.ranking-podium-gold,.ranking-podium-silver,.ranking-podium-bronze):not([aria-current="true"]) {
  background:var(--ranking-podium-bg); border-radius:8px;
}
body.ui-refresh .ranking-medal {
  display:inline-block; flex:none; margin-right:4px; font-size:14px; line-height:1; vertical-align:-1px;
}
body.ui-refresh .result-ranking-row { grid-template-columns:52px minmax(0,1fr) auto; }
body.ui-refresh .result-ranking-top-row .result-ranking-top-person { grid-template-columns:52px minmax(0,1fr) auto; }
/* The next game is the decision; records and utilities follow beneath it. */
body.ui-refresh #postGameScreen { align-items:start; min-height:100dvh; padding:24px 24px 56px; background:#fffdf6; }
body.ui-refresh :where(#postGameScreen) .post-game-card { width:min(760px,100%); padding:0; background:transparent; text-align:left; }
body.ui-refresh :where(#postGameScreen) .post-game-card .landing-top-links { display:flex; align-items:center; gap:14px; margin:0 0 36px; }
body.ui-refresh :where(#postGameScreen) .post-game-brand { margin-right:auto; }
body.ui-refresh :where(#postGameScreen) .post-game-card .landing-tips-link { margin:0; color:var(--muted); font-size:12px; }
body.ui-refresh :where(#postGameScreen) .post-game-card .gift-entry { margin:0; }
body.ui-refresh :where(#postGameScreen) .post-game-card > .section-kicker { text-align:center; margin:0 0 10px; color:var(--muted); font-size:12px; font-weight:500; letter-spacing:0; }
body.ui-refresh :where(#postGameScreen) .post-game-card h1 { margin:0; font-family:var(--font-ui); font-size:clamp(25px,5vw,34px); text-align:center; font-weight:600; line-height:1.55; }
body.ui-refresh :where(#postGameScreen) .post-game-card h1 :is(.post-game-gift-title,.post-game-remaining-count) { font-weight:800; }
body.ui-refresh :where(#postGameScreen) .post-game-remaining-count { color:inherit; }
body.ui-refresh :where(#postGameScreen) .post-game-dialogue { display:flex; align-items:center; gap:18px; margin:28px 0 32px; }
body.ui-refresh :where(#postGameScreen) .post-game-character { flex:0 0 76px; width:76px; height:66px; margin:0; }
body.ui-refresh :where(#postGameScreen) .post-game-lead { flex:1; margin:0; padding:16px 20px; border:1px solid var(--line); border-radius:14px; background:#fff; color:var(--ink); text-align:left; font-family:var(--font-ui); font-size:14px; font-weight:700; line-height:1.8; }
body.ui-refresh :where(#postGameScreen) .post-game-dialogue:has(.post-game-lead:empty) { display:none; }
body.ui-refresh :where(#postGameScreen) .post-game-actions { display:grid; grid-template-columns:minmax(0,1fr); gap:20px; margin:0 0 20px; }
body.ui-refresh :where(#postGameScreen) .post-game-actions > button { margin:0; min-height:78px; width:100%; border-radius:14px; padding:18px; box-shadow:none; }
body.ui-refresh :where(#postGameScreen) .post-game-actions > button strong { font-size:16px; font-weight:700; }
body.ui-refresh :where(#postGameScreen) .post-game-actions > button small { font-size:12px; line-height:1.7; font-weight:400; opacity:1; }
body.ui-refresh #postGamePayPayButton { display:grid; grid-template-columns:minmax(0,1fr); grid-column:1 / -1; justify-items:center; gap:16px; border:1px solid #c91f35; background:#e32940; color:#fff; box-shadow:none; }
body.ui-refresh #postGamePayPayButton .post-game-paypay-copy :is(strong,small) { color:#fff; }
body.ui-refresh #postGamePayPayButton:hover:not(:disabled) { border-color:#b3192e; background:#cf2238; filter:none; }
body.ui-refresh #postGamePayPayButton:focus-visible { outline:3px solid var(--accent); outline-offset:4px; }
body.ui-refresh #postGamePayPayButton .post-game-paypay-mark { width:min(100%,336px); height:auto; padding:0; border:0; border-radius:0; background:transparent; opacity:1; filter:none; box-shadow:none; transform:none; }
body.ui-refresh #postGamePayPayButton:hover:not(:disabled) .post-game-paypay-mark { box-shadow:none; transform:none; }
body.ui-refresh #postGamePayPayButton:disabled { border-color:#a95d67; background:#a95d67; opacity:1; filter:none; cursor:default; }
/* Once payment is granted, this control starts a game instead of a purchase. */
body.ui-refresh #postGamePayPayButton.post-game-start-button { border-color:#356f9f; background:#356f9f; }
body.ui-refresh #postGamePayPayButton.post-game-start-button:hover:not(:disabled) { border-color:#2b5f89; background:#2b5f89; }
body.ui-refresh #postGamePayPayButton.post-game-start-button:disabled { border-color:#6e8599; background:#6e8599; }
body.ui-refresh :where(#postGameScreen) .post-game-record { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px 24px; margin-top:36px; padding:26px 28px; border:1px solid #d5ded4; border-radius:16px; background:#f2f5ec; }
body.ui-refresh :where(#postGameScreen) .post-game-summary { display:grid; grid-template-columns:minmax(160px,auto) minmax(0,1fr); align-items:center; gap:24px; flex:1; margin:0; padding:0; border:0; background:transparent; }
body.ui-refresh :where(#postGameScreen) .post-game-summary div { padding:0; }
body.ui-refresh :where(#postGameScreen) .post-game-summary div + div { margin:0; padding:0 0 0 24px; border:0; border-left:1px solid #d5ded4; min-width:0; }
body.ui-refresh :where(#postGameScreen) .post-game-summary dt { color:var(--muted); font-size:12px; font-weight:600; }
body.ui-refresh :where(#postGameScreen) .post-game-summary dd { margin:6px 0 0; color:var(--ink); font-family:var(--font-ui); font-size:32px; font-weight:800; overflow-wrap:anywhere; }
body.ui-refresh #postGameScore { white-space: nowrap; overflow-wrap: normal; }
body.ui-refresh :where(#postGameScreen) .post-game-summary div + div dd { font-size:18px; font-weight:700; line-height:1.7; }
body.ui-refresh :where(#postGameScreen) .post-game-record-links { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:stretch; gap:14px; margin-top:24px; }
body.ui-refresh :where(#postGameScreen) .post-game-record-links > button { display:grid; grid-template-columns:minmax(0,1fr) auto; align-content:center; gap:4px 8px; width:100%; margin:0; padding:18px 16px; min-height:88px; border:0; border-radius:14px; background:var(--accent-soft); color:#15444b; font-family:var(--font-ui); font-size:15px; font-weight:700; text-align:left; text-decoration:none; }
body.ui-refresh :where(#postGameScreen) .post-game-record-links > button > span:first-child { grid-column:1; }
body.ui-refresh :where(#postGameScreen) .post-game-record-links > button > span[aria-hidden] { grid-column:2; grid-row:1 / 3; align-self:center; font-size:22px; }
body.ui-refresh :where(#postGameScreen) .post-game-record-links > button small { grid-column:1; font-size:10px; font-weight:400; }
body.ui-refresh :where(#postGameScreen) .post-game-record-links > button:hover { background:#dcece5; filter:none; text-decoration:none; }
body.ui-refresh :where(#postGameScreen) .post-game-ranking-details:not(:has(.post-game-current-ranking:not(.hidden))) { display:none; }
body.ui-refresh #postGameGiftButton { background:#6842a0; background-image:linear-gradient(115deg,#6740a9 0%,#ac3779 50%,#3566b0 100%); border-color:#6447ac; color:#fff; filter:none; }
body.ui-refresh #postGameGiftButton:is(:hover,:focus,:focus-visible,:active):not(:disabled) { background:#6842a0; background-image:linear-gradient(115deg,#5a3597 0%,#9d2e6c 50%,#2b59a1 100%); color:#fff; filter:none; }
body.ui-refresh #postGameGiftButton:disabled { background:#e8e6e1; background-image:none; border-color:#d8d6d1; color:#716e68; }
body.ui-refresh #giftModal .gift-donor { font-family:var(--font-ui); font-weight:800; }
body.ui-refresh #giftModal .gift-use-guide { align-items:center; gap:18px; }
body.ui-refresh #giftModal .support-guide-message > p { font-family:var(--font-ui); font-weight:700; }
body.ui-refresh #giftModal .gift-use-guide > p { position:relative; flex:1; padding:16px 20px; border:1px solid var(--line); border-radius:14px; background:#f0f4ed; color:var(--ink); }
body.ui-refresh #giftModal .gift-use-guide > p::before { content:''; position:absolute; left:-7px; top:calc(50% - 6px); width:12px; height:12px; border-left:1px solid var(--line); border-bottom:1px solid var(--line); background:#f0f4ed; transform:rotate(45deg); }
body.ui-refresh :where(#postGameScreen) .post-game-ranking-details { margin-top:24px; border-bottom:1px solid var(--line); }
body.ui-refresh :where(#postGameScreen) .post-game-ranking-details summary { color:var(--muted); font-size:12px; font-weight:500; }
body.ui-refresh :where(#postGameScreen) .post-game-current-ranking { margin:8px 0 22px; border:0; background:transparent; padding:0; }
body.ui-refresh :where(#postGameScreen) .post-game-utility-links { justify-content:flex-start; margin-top:28px; gap:12px 24px; }
body.ui-refresh :where(#postGameScreen) .post-game-utility-links button { font-size:12px; font-weight:400; color:var(--muted); }
body.ui-refresh :where(#postGameScreen) .post-game-tomorrow-preview { margin:28px 0; padding:24px; background:#fff; border-color:var(--line); text-align:left; }
body.ui-refresh :where(#postGameScreen) .post-game-service-links { justify-content:flex-start; margin-top:32px; }
/* My Note uses quiet black record values, open rows and restrained separators. */
body.ui-refresh .my-note-sheet { width:min(760px,100%); }
body.ui-refresh .my-note-header { background:#fffdf6; border-color:var(--line); padding:24px 28px 0; }
body.ui-refresh .my-note-header .my-note-tabs { gap:24px; margin-top:20px; }
body.ui-refresh .my-note-header .my-note-tabs button { flex:0 0 auto; min-height:48px; padding:10px 4px 12px; border:0; border-bottom:3px solid transparent; border-radius:0; background:transparent; color:var(--muted); font-family:var(--font-ui); font-size:14px; font-weight:600; }
body.ui-refresh .my-note-header .my-note-tabs button[aria-selected="true"] { border-bottom-color:var(--accent); color:var(--accent); font-weight:700; }
body.ui-refresh .my-note-header .my-note-tabs button:hover { background:#f0f4ed; filter:none; }
body.ui-refresh .my-note-intro { padding:24px 28px; }
body.ui-refresh .my-note-intro img { width:56px; height:auto; }
body.ui-refresh .my-note-intro p { font-family:var(--font-ui); font-size:13px; font-weight:700; line-height:1.8; }
body.ui-refresh .note-first-day { margin-top:0; font-size:12px; }
body.ui-refresh .note-section { border-color:var(--line); padding:28px 0; }
body.ui-refresh .note-section h3 { font-size:16px; }
body.ui-refresh .note-bests { grid-template-columns:1.3fr 1fr 1fr; gap:18px 20px; align-items:center; }
body.ui-refresh .note-best { border:0; border-radius:14px; background:transparent; padding:12px 0; }
body.ui-refresh .note-best:is(.note-score,.note-longest) { background:transparent; padding:12px 0; }
body.ui-refresh .note-best.note-longest { padding-bottom:20px; border-bottom:1px solid var(--line); border-radius:0; }
body.ui-refresh .note-history time { font-family:var(--font-ui); font-weight:700; }
body.ui-refresh .note-best > span { font-size:12px; font-weight:500; }
body.ui-refresh .note-best > strong { color:#222; font-size:23px; }
body.ui-refresh .note-best:is(.note-score,.note-longest) > strong { font-size:32px; }
body.ui-refresh .note-best.note-longest > strong { font-size:28px; }
body.ui-refresh .note-best p { font-size:11px; }
body.ui-refresh .note-word-count { margin-top:24px; padding-top:22px; border-top:1px solid var(--line); border-radius:0; }
body.ui-refresh .note-word-count > strong { font-size:24px; }
body.ui-refresh .note-streak { justify-content:flex-start; gap:12px 24px; margin-top:24px; padding:16px 0 0; border:0; border-top:1px solid var(--line); background:transparent; border-radius:0; font-size:12px; }
body.ui-refresh .note-kana-list li > strong { border:0; background:transparent; width:28px; }
body.ui-refresh .note-saved-list { gap:0; }
body.ui-refresh .my-note-sheet [data-saved-back] { display:inline-flex; align-items:center; min-height:44px; margin:16px 0; padding:8px 12px; border:1px solid var(--line); border-radius:8px; background:#fff; color:var(--accent); font-family:var(--font-ui); font-size:14px; font-weight:600; }
body.ui-refresh .my-note-sheet [data-saved-back]:hover:not(:disabled) { background:var(--accent-soft); filter:none; }
body.ui-refresh .note-saved-item { padding:22px 28px 22px 4px; border:0; border-bottom:1px solid var(--line); border-radius:0; background:transparent; }
body.ui-refresh .note-saved-item strong { font-size:26px; color:#222; }
body.ui-refresh .note-saved-item:hover { background:#f7f5eb; }
body.ui-refresh .note-saved-score { font-size:clamp(40px,10vw,52px); color:#222; }
body.ui-refresh .note-saved-facts { gap:12px 24px; }
body.ui-refresh .note-saved-facts > div { display:flex; align-items:baseline; gap:10px; }
body.ui-refresh .note-saved-facts dd { margin:0; font-size:12px; font-weight:500; }
body.ui-refresh .note-saved-ranking li { min-width:0; grid-template-columns:48px minmax(0,1fr) auto; gap:8px; }
body.ui-refresh .note-saved-ranking .result-ranking-you { display:inline-block; }
body.ui-refresh .note-recovery-footer { border-top:1px solid var(--line); background:transparent; }
@media(max-width:599px) {
  body.ui-refresh :is(#gameOverModal,#postGameTopTenModal,#previousCloseRankingModal) { padding:8px; }
  body.ui-refresh :is(.result-card,.post-game-top-ten-card,.previous-close-ranking-card) { max-height:calc(100dvh - 16px); padding:22px 20px 28px; border-radius:16px; }
  body.ui-refresh #postGameScreen { padding:20px 24px 40px; }
  body.ui-refresh :where(#postGameScreen) .post-game-card .landing-top-links { margin-bottom:30px; }
  body.ui-refresh :where(#postGameScreen) .post-game-dialogue { gap:14px; }
  body.ui-refresh :where(#postGameScreen) .post-game-character { flex-basis:60px; width:60px; height:54px; }
  body.ui-refresh :where(#postGameScreen) .post-game-lead { padding:14px 16px; font-size:13px; }
  body.ui-refresh :where(#postGameScreen) .post-game-actions { grid-template-columns:1fr; gap:14px; }
  body.ui-refresh :where(#postGameScreen) .post-game-record { flex-direction:column; align-items:stretch; gap:16px; margin-top:32px; padding:22px 20px; }
  body.ui-refresh :where(#postGameScreen) .post-game-summary { grid-template-columns:1fr; gap:18px; }
  body.ui-refresh :where(#postGameScreen) .post-game-summary div + div { border-left:0; padding-left:0; }
  body.ui-refresh :where(#postGameScreen) .post-game-record-links { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  body.ui-refresh :where(#postGameScreen) .post-game-record-links > button { min-width:0; min-height:76px; padding:14px 12px; font-size:14px; }
  body.ui-refresh #giftModal .gift-use-guide { gap:12px; }
  body.ui-refresh #giftModal .gift-use-guide > p { padding:14px 16px; font-size:13px; }
  body.ui-refresh .my-note-header { padding:20px 20px 0; }
  body.ui-refresh .my-note-intro { padding:24px 20px; }
  body.ui-refresh #myNoteContent { padding:0 20px 28px; }
  body.ui-refresh .note-bests { grid-template-columns:1fr 1fr; gap:18px; }
  body.ui-refresh .note-kana-list { grid-template-columns:1fr 1fr; gap:10px 14px; }
  body.ui-refresh .note-kana-list li { gap:6px; }
  body.ui-refresh .note-kana-list li > span:last-child { min-width:29px; }
  body.ui-refresh .post-game-top-ten-score { font-size:18px; }
  body.ui-refresh .result-ranking-top-row .result-ranking-top-person { grid-template-columns:52px minmax(0,1fr); }
  body.ui-refresh .result-ranking-top-person .result-ranking-you { grid-column:2; justify-self:start; margin-left:0; }
  body.ui-refresh .speed-ranking-row > span { display:grid; grid-template-columns:42px minmax(0,1fr); gap:4px 8px; }
  body.ui-refresh .speed-ranking-row em { grid-column:2; justify-self:start; }
  body.ui-refresh :is(.result-ranking-name,.note-saved-ranking) .result-ranking-you { display:block; width:fit-content; margin-left:0; }
}
@media(max-width:359px) {
  body.ui-refresh :where(#gameOverModal,#myNoteModal,#sharedResultContent) .result-answer .result-history-row { grid-template-columns:15px minmax(0,1fr); gap:6px; }
  body.ui-refresh :where(#gameOverModal,#myNoteModal,#sharedResultContent) .result-answer .result-answer-score { grid-column:2; }
  body.ui-refresh :where(#gameOverModal,#myNoteModal,#sharedResultContent) .result-answer .result-history-meta,body.ui-refresh :where(#gameOverModal,#myNoteModal,#sharedResultContent) .result-answer-board { margin-left:21px; }
  body.ui-refresh .result-card > .result-retry-message { gap:12px; }
  body.ui-refresh .result-card > .result-retry-message .result-character { flex-basis:52px; width:52px; height:48px; }
  body.ui-refresh :where(#gameOverModal,#myNoteModal,#sharedResultContent) .result-retry-speech { padding:12px 14px; font-size:13px; }
  body.ui-refresh .note-kana-list { grid-template-columns:1fr; }
  body.ui-refresh .note-bests { gap:12px; }
  body.ui-refresh .note-best:is(.note-score,.note-longest) { padding:12px 0; }
  body.ui-refresh .post-game-top-ten-score { font-size:16px; }
}

/* One viewport calculation: the sheet fills the space inside the modal padding.
   Using dvh on the container keeps its bottom inside Safari's visible viewport. */
body.ui-refresh #myNoteModal {
  bottom:auto; height:100dvh; grid-template-rows:minmax(0,1fr);
  padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
}
body.ui-refresh #myNoteModal .my-note-sheet {
  height:100%; max-height:100%; min-height:0; overscroll-behavior:contain;
}
@media(max-width:599px) {
  body.ui-refresh #myNoteModal {
    padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));
  }
}