/* Trophies as keepsakes (version 1.4): the trophy moment, the shelves of the Trophy Room, a trophy's story.
   The pictures are the real catalogue objects (HomeKit.thumb). Nothing here flashes; calm mode and reduced motion get no sparkle at all. */

/* ---------------------------------------------------------------- the trophy moment (docked at the top; it never covers the page) */
.trophy-moment { position: fixed; z-index: 110; left: 0; right: 0; top: calc(var(--safe-t, 0px) + 8px); display: flex; justify-content: center; padding: 0 8px; pointer-events: none; }
.tm-card { pointer-events: none; position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "pic txt" "act act"; align-items: center; gap: 4px 14px; width: min(calc(560px * var(--k, 1)), 100%); padding: 12px 44px 12px 12px; border-radius: 26px; color: #1b2450;
  background: linear-gradient(180deg, #fffdf3, #fff2c4); border: 4px solid #ffc21a; box-shadow: 0 6px 0 #c98a00, 0 18px 40px rgba(8, 14, 40, .38); animation: tm-in .45s cubic-bezier(.2, .9, .3, 1.2) both; }
/* only its buttons take taps: a tap on the card itself goes to the page under it (a game board, a button) — and the card then steps aside */
.tm-card button, .tm-card a, .tm-card .kbtn { pointer-events: auto; }
.tm-pic { grid-area: pic; position: relative; width: calc(104px * var(--k, 1)); height: calc(104px * var(--k, 1)); display: grid; place-items: center; border-radius: 22px; background: radial-gradient(circle at 50% 40%, #ffffff 0, #fff3c9 55%, #ffe08a 100%); box-shadow: inset 0 0 0 3px #ffd766; }
.tm-pic .tr-pic { width: 92%; height: 92%; }
.tm-txt { grid-area: txt; min-width: 0; }
.tm-new { display: block; font-size: calc(12.5px * var(--k, 1) * var(--tx, 1)); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #a66a00; }
.tm-name { display: block; font-size: calc(22px * var(--k, 1) * var(--tx, 1)); font-weight: 800; line-height: 1.15; color: #1b2450; overflow-wrap: break-word; }
.tm-why { margin: 4px 0 0; font-size: calc(15.5px * var(--k, 1) * var(--tx, 1)); line-height: 1.35; color: #2b3566; }
.tm-more { margin: 6px 0 0; font-size: calc(13px * var(--k, 1) * var(--tx, 1)); color: #4b5585; } .tm-more span { white-space: nowrap; font-weight: 700; }
.tm-acts { grid-area: act; display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; align-items: center; margin-top: 6px; }
.tm-acts .kbtn { min-height: 46px; margin: 0; } .tm-acts .tm-go { flex: 1 1 auto; max-width: 100%; }
.tm-x { position: absolute; top: 6px; right: 6px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: #5a4a12; font-size: 18px; font-weight: 800; cursor: pointer; }
.tm-x:hover, .tm-x:focus-visible { background: rgba(160, 110, 0, .16); }
.tm-spark { position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px; pointer-events: none; opacity: 0; background: radial-gradient(circle, #fff 0 18%, #ffd84a 22% 48%, transparent 52%);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); transform: rotate(calc(var(--i) * 60deg)) translateY(calc(-54px * var(--k, 1))); animation: tm-spark 2.4s ease-in-out calc(var(--i) * .22s) 3; }
@keyframes tm-in { from { opacity: 0; transform: translateY(-18px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes tm-spark { 0%, 100% { opacity: 0; scale: .5; } 45% { opacity: 1; scale: 1.15; } }
.trophy-moment.still .tm-card { animation: none; } .trophy-moment.still .tm-spark { display: none; }
body.calm .tm-card { animation: none; } body.calm .tm-spark { display: none; }
@media (prefers-reduced-motion: reduce) { .tm-card { animation: none; } .tm-spark { display: none; } }
@media (max-width: 520px) { .tm-card { padding: 10px 40px 10px 10px; gap: 4px 10px; border-radius: 22px; } .tm-pic { width: 84px; height: 84px; } .tm-name { font-size: calc(19px * var(--k, 1) * var(--tx, 1)); } .tm-why { font-size: calc(14.5px * var(--k, 1) * var(--tx, 1)); } }
@media (max-height: 460px) { .tm-card { padding: 8px 44px 8px 10px; } .tm-pic { width: 64px; height: 64px; border-radius: 16px; } .tm-acts { margin-top: 2px; } .tm-name { font-size: calc(18px * var(--k, 1) * var(--tx, 1)); } .tm-why { font-size: 14px; margin-top: 2px; } .tm-acts .kbtn { min-height: 44px; } }

/* ---------------------------------------------------------------- pictures of trophies */
.tr-pic { display: block; width: var(--px, 96px); height: var(--px, 96px); max-width: 100%; object-fit: contain; }
span.tr-pic.tr-emoji { display: grid; place-items: center; line-height: 1; }

/* ---------------------------------------------------------------- the Trophy Room: stars, then shelves */
.tr-top { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.tr-top .num { flex: none; width: calc(84px * var(--k)); height: calc(84px * var(--k)); border-radius: 50%; display: grid; place-items: center; font-size: calc(30px * var(--k) * var(--tx, 1)); font-weight: 800; color: #2a1a00; background: radial-gradient(circle at 35% 30%, #fff6c9, #ffcb3d 55%, #f2a100); box-shadow: 0 4px 0 #b97700; }
.tr-top .tr-stars { flex: 1 1 220px; min-width: 0; } .tr-top h2 { margin: 0; } .tr-top p { margin: 2px 0 8px; }
.tr-top .tr-soft { margin: 8px 0 0; font-size: calc(13.5px * var(--k) * var(--tx, 1)); opacity: .85; }

.tr-room { margin-top: 16px; display: grid; gap: 18px; }
.tr-group { --px: calc(100px * var(--k)); --plank: 8px; --lab: calc(40px * var(--k)); border-radius: 24px; padding: 14px 14px 10px; color: #fff;
  background: radial-gradient(120% 90% at 50% 0, rgba(255, 255, 255, .14), transparent 60%), linear-gradient(180deg, #24327a, #17215a); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .12), 0 8px 22px rgba(8, 14, 40, .25); }
body[data-band="early"] .tr-group { --px: calc(112px * var(--k)); }
.tr-room .tr-group > h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: calc(18px * var(--k) * var(--tx, 1)); color: #fff !important; text-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
.tr-group > h3 .e { font-size: 1.25em; } .tr-group > h3 small { margin-left: auto; font-weight: 600; opacity: .8; font-size: .72em; }
/* one plank under every row of trophies, however many fit on a row */
.tr-shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--px) + 22px), 1fr)); row-gap: 10px; column-gap: 0; padding: 4px 6px 0;
  --row: calc(var(--px) + var(--plank) + var(--lab) + 10px);
  --t0: calc(var(--px) * .66); --t1: calc(var(--px) * .93); --t2: calc(var(--px) * .93 + 11px);   /* the shelf seen a little from above, like the trophies: its top (t0–t1), its front edge (t1–t2), its shadow */
  background-image: linear-gradient(180deg, transparent 0, transparent var(--t0), #c9935a var(--t0), #e2ad70 var(--t1), #a5672f var(--t1), #7d4a1f var(--t2), rgba(0, 0, 0, .34) var(--t2), transparent calc(var(--t2) + 10px));
  background-size: 100% var(--row); background-repeat: repeat-y; background-position: 0 4px; border-radius: 6px; }
.tr-item { display: grid; grid-template-rows: var(--px) var(--plank) var(--lab); justify-items: center; min-width: 0; height: calc(var(--row) - 10px); padding: 0 3px; margin: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; border-radius: 16px; -webkit-tap-highlight-color: transparent; }
/* the weight of a trophy shows: a first try is a little smaller, a big milestone a little bigger (they all stand on the same shelf: the picture grows from its foot) */
.tr-item { --sz: 1; } .tr-item[data-size="s"] { --sz: .86; } .tr-item[data-size="l"] { --sz: 1.1; }
.tr-item .tr-pic { width: var(--px); height: var(--px); transition: transform .18s ease; transform-origin: 50% 90%; transform: scale(var(--sz)); filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .28)); }
.tr-item:hover .tr-pic, .tr-item:focus-visible .tr-pic { transform: scale(calc(var(--sz) * 1.08)); }
.tr-item:focus-visible { outline: 3px solid #ffd84a; outline-offset: 2px; }
.tr-item .tr-plate { grid-row: 3; align-self: start; margin-top: 5px; max-width: 100%; padding: 2px 8px; border-radius: 9px; font-size: calc(12.5px * var(--k) * var(--tx, 1)); font-weight: 700; line-height: 1.2; text-align: center; color: #1b2450; background: linear-gradient(180deg, #fff3c4, #ffd766); box-shadow: 0 2px 0 rgba(0, 0, 0, .25); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
body.calm .tr-item .tr-pic { transition: none; } body.calm .tr-item:hover .tr-pic, body.calm .tr-item:focus-visible .tr-pic { transform: scale(var(--sz)); }
.tr-item.new .tr-plate { box-shadow: 0 0 0 3px #fff, 0 2px 0 rgba(0, 0, 0, .25); }
.tr-empty { text-align: center; padding: 26px 14px; border-radius: 24px; color: #fff; background: linear-gradient(180deg, #24327a, #17215a); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .12); }
.tr-empty .tr-plankrow { height: 14px; margin: 10px auto 14px; max-width: 420px; border-radius: 4px; background: linear-gradient(180deg, #f0b56c, #c98645 30%, #9a602b); box-shadow: 0 6px 8px rgba(0, 0, 0, .28); }
.tr-empty b { display: block; font-size: calc(19px * var(--k) * var(--tx, 1)); } .tr-empty p { margin: 6px auto 0; max-width: 460px; opacity: .92; }
.tr-more { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.tr-ideas, .tr-diary { margin-top: 12px; }
.tr-ideas .krow .main small { display: block; opacity: .8; }

/* a trophy's story (opened from a shelf) */
.tr-story { text-align: center; }
.tr-story .tr-stage { width: min(190px, 60%); aspect-ratio: 1; margin: 0 auto 10px; display: grid; place-items: center; border-radius: 28px; background: radial-gradient(circle at 50% 38%, #ffffff 0, #fff3c9 55%, #ffe08a 100%); box-shadow: inset 0 0 0 4px #ffd766, 0 8px 0 #c98a00; }
.tr-story .tr-stage .tr-pic { width: 90%; height: 90%; }
.tr-story h3 { margin: 6px 0 4px; font-size: calc(24px * var(--k) * var(--tx, 1)); justify-content: center; }
.tr-story .tr-why { margin: 0 auto; max-width: 440px; font-size: calc(17px * var(--k) * var(--tx, 1)); line-height: 1.45; }
.tr-story .tr-when { margin: 8px 0 0; font-size: calc(14px * var(--k) * var(--tx, 1)); opacity: .8; }
.tr-story .row { justify-content: center; margin-top: 14px; }

@media (max-width: 520px) { .tr-group { --px: calc(76px * var(--k)); padding: 12px 8px 8px; border-radius: 20px; } body[data-band="early"] .tr-group { --px: calc(84px * var(--k)); } .tr-shelf { padding: 4px 2px 0; } .tr-item .tr-plate { font-size: calc(11.5px * var(--k) * var(--tx, 1)); padding: 2px 6px; } }
/* the moment moves to the bottom when it would cover the page's main button at the top */
.trophy-moment.low { top: auto; } .trophy-moment.low .tm-card { animation-name: tm-up; }
@keyframes tm-up { from { opacity: 0; transform: translateY(18px) scale(.96); } to { opacity: 1; transform: none; } }
/* on a child's own background loose words get a plate of the page's color (area-look.css): the shelves are their own dark cabinet, so their words stay as they are */
body.has-backdrop #view :is(.tr-group, .tr-empty) :is(h3, p, b, small) { background: none !important; padding: 0 !important; width: auto !important; border-radius: 0 !important; }
body.has-backdrop #view .tr-empty p { margin-inline: auto !important; }

/* ================================================================ the Trophy Room as a room of the child's home (trophyroom.js) */
.tr-roombox { margin-bottom: 16px; }
.tr-all { display: flex; align-items: center; gap: 8px; margin: 22px 4px 0; font-size: calc(22px * var(--k) * var(--tx, 1)); }
.trm { border-radius: 28px; padding: 10px; background: linear-gradient(180deg, #fff8dc, #ffe9a6); box-shadow: inset 0 0 0 3px #ffd766, 0 8px 0 #d9a520, 0 16px 34px rgba(8, 14, 40, .22); }
.trm-stage { position: relative; height: clamp(280px, calc(58 * var(--vh, 1vh)), 640px); border-radius: 20px; overflow: hidden; background: linear-gradient(180deg, #9cc8f0, #d8ecfb); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .55); touch-action: none; }
.trm[data-style="cellar"] .trm-stage, .trm[data-style="secret"] .trm-stage { background: linear-gradient(180deg, #5b4337, #c99873); }
.trm[data-style="space"] .trm-stage, .trm[data-night="1"] .trm-stage { background: linear-gradient(180deg, #0a0c2a, #2a2f6e); }
.trm-view { position: absolute; inset: 0; }
.trm-canvas { display: block; width: 100%; height: 100%; touch-action: none; outline-offset: -4px; cursor: grab; }
.trm-canvas:active { cursor: grabbing; }
.trm[data-holding="1"] .trm-canvas { cursor: copy; }
.trm-cam { position: absolute; right: 8px; top: 8px; display: grid; grid-template-columns: 1fr; gap: 6px; z-index: 3; }
.trm-ic { width: 46px; height: 46px; border: 0; border-radius: 15px; font-size: 21px; line-height: 1; cursor: pointer; color: #1b2450; background: rgba(255, 255, 255, .92); box-shadow: 0 3px 0 rgba(20, 30, 80, .28), 0 6px 14px rgba(8, 14, 40, .2); -webkit-tap-highlight-color: transparent; }
.trm-ic:hover { background: #fff; } .trm-ic:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(20, 30, 80, .28); }
.trm-ic:focus-visible { outline: 3px solid #ffb020; outline-offset: 2px; }
.trm-ic.on, .trm-ic[aria-pressed="true"] { background: #ffe07a; }
body.calm .trm-ic:active { transform: none; }
.trm-over { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 2; }
.trm-spark { position: absolute; width: 16px; height: 16px; margin: -8px; opacity: 0; background: radial-gradient(circle, #fff 0 18%, #ffd84a 22% 48%, transparent 52%); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); transform: rotate(calc(var(--i) * 72deg)) translateY(-26px); animation: trm-spark 1s ease-out calc(var(--i) * .06s) 1; }
@keyframes trm-spark { 0% { opacity: 0; scale: .4; } 35% { opacity: 1; scale: 1.2; } 100% { opacity: 0; scale: .7; translate: 0 -10px; } }
body.calm .trm-spark { display: none; } @media (prefers-reduced-motion: reduce) { .trm-spark { display: none; } }
.trm-loading { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; color: #1b2450; background: rgba(255, 255, 255, .55); z-index: 4; }
.trm-say { min-height: calc(30px * var(--k)); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 8px 2px; font-size: calc(16px * var(--k) * var(--tx, 1)); font-weight: 700; color: #3b2a00; }
.trm-say:empty { min-height: 6px; padding: 0; }
.trm-say .kbtn { margin: 0; min-height: 44px; }
.trm-hand, .trm-box { margin: 8px 2px 2px; border-radius: 20px; background: #fffdf3; box-shadow: inset 0 0 0 3px #ffd766; color: #1b2450; }
.trm-handrow { display: flex; align-items: center; gap: 12px; padding: 10px 12px; flex-wrap: wrap; }
.trm-handpic { flex: none; width: calc(72px * var(--k)); height: calc(72px * var(--k)); border-radius: 18px; display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, #fff 0, #fff3c9 55%, #ffe08a 100%); box-shadow: inset 0 0 0 3px #ffd766; }
.trm-handpic .tr-pic { width: 90%; height: 90%; }
.trm-handtxt { flex: 1 1 180px; min-width: 0; display: grid; gap: 2px; } .trm-handtxt b { font-size: calc(19px * var(--k) * var(--tx, 1)); } .trm-handtxt span { font-size: calc(15px * var(--k) * var(--tx, 1)); }
.trm-handacts { display: flex; gap: 8px; flex-wrap: wrap; } .trm-handacts .kbtn { margin: 0; min-height: 46px; }
.trm-boxin { padding: 10px 12px 12px; } .trm-boxin h3 { margin: 0; font-size: calc(19px * var(--k) * var(--tx, 1)); display: flex; gap: 8px; align-items: center; }
.trm-boxsay { margin: 2px 0 8px; font-size: calc(15px * var(--k) * var(--tx, 1)); }
.trm-boxrow { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 8px; scrollbar-width: thin; }
.trm-new { flex: none; display: grid; justify-items: center; gap: 2px; width: calc(92px * var(--k)); min-height: 76px; padding: 6px 4px; border: 0; border-radius: 16px; cursor: pointer; font: inherit; color: #1b2450; background: linear-gradient(180deg, #fff7d6, #ffe59a); box-shadow: 0 3px 0 #d9a520; -webkit-tap-highlight-color: transparent; }
.trm-new .tr-pic { width: calc(60px * var(--k)); height: calc(60px * var(--k)); }
.trm-new .nm { font-size: calc(12px * var(--k) * var(--tx, 1)); font-weight: 700; line-height: 1.15; text-align: center; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.trm-new:focus-visible { outline: 3px solid #2f8fff; outline-offset: 2px; }
.trm-two { display: flex; flex-wrap: wrap; gap: 10px; } .trm-two .kbtn { margin: 0; flex: 1 1 0; min-width: min(100%, 330px); min-height: 48px; white-space: normal; line-height: 1.15; text-align: center; } .trm-two .kbtn.ghost { flex: 0 1 auto; min-width: 0; }
.trm-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 10px 2px 2px; } .trm-bar .kbtn { margin: 0; min-height: 48px; } .trm-bar .kbtn.big { flex: 1 1 260px; }

/* the first visit and “Move my Trophy Room”: where should it be? */
.trm-first { border-radius: 28px; padding: 16px 14px 18px; background: linear-gradient(180deg, #fff8dc, #ffe9a6); box-shadow: inset 0 0 0 3px #ffd766, 0 8px 0 #d9a520; color: #1b2450; }
.trm-q { margin: 0; font-size: calc(26px * var(--k) * var(--tx, 1)); text-align: center; color: #1b2450 !important; } .trm-qsub { margin: 4px 0 12px; text-align: center; font-size: calc(16px * var(--k) * var(--tx, 1)); color: #3b2a00; }
.trm-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(200px * var(--k))), 1fr)); gap: 12px; }
.trm-card { position: relative; display: grid; grid-template-rows: auto 1fr; padding: 0; border: 0; border-radius: 20px; overflow: hidden; cursor: pointer; font: inherit; text-align: left; color: #1b2450; background: #fff; box-shadow: 0 4px 0 rgba(20, 30, 80, .22), 0 8px 18px rgba(8, 14, 40, .14); -webkit-tap-highlight-color: transparent; }
.trm-card .pic { display: grid; place-items: center; aspect-ratio: 3 / 2; background: linear-gradient(180deg, #cfe6fb, #eef6ff); } .trm-card .pic img { width: 100%; height: 100%; object-fit: cover; display: block; } .trm-card .pic .e { font-size: 54px; }
.trm-card .nm { display: grid; gap: 2px; padding: 8px 12px 10px; } .trm-card .nm b { font-size: calc(17px * var(--k) * var(--tx, 1)); line-height: 1.2; } .trm-card .nm small { font-size: calc(13px * var(--k) * var(--tx, 1)); opacity: .8; line-height: 1.25; }
.trm-card.on { outline: 5px solid #2f8fff; outline-offset: 0; box-shadow: 0 4px 0 #1f5fbf, 0 10px 22px rgba(47, 143, 255, .35); }
.trm-card:focus-visible { outline: 4px solid #ffb020; outline-offset: 2px; }
.trm-card .here { position: absolute; left: 8px; top: 8px; padding: 3px 9px; border-radius: 10px; font-size: 12.5px; font-weight: 800; color: #1b2450; background: #ffe07a; box-shadow: 0 2px 0 rgba(0, 0, 0, .2); }
.trm-yes { display: flex; justify-content: center; margin-top: 14px; } .trm-yes .kbtn { min-width: min(100%, 300px); min-height: 52px; margin: 0; }
.trm-move .trm-movesay { margin: 0 0 12px; }

@media (max-width: 620px) { .trm { padding: 7px; border-radius: 22px; } .trm-stage { border-radius: 16px; height: clamp(260px, calc(52 * var(--vh, 1vh)), 560px); } .trm-ic { width: 44px; height: 44px; font-size: 19px; border-radius: 13px; } .trm-cam { gap: 4px; left: 6px; right: 6px; top: 6px; grid-template-columns: repeat(auto-fit, 44px); justify-content: end; }   /* on a phone the buttons stand in a row over the sky, not in a column over the shelves */
  .trm-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; } .trm-card .nm { padding: 6px 9px 8px; } .trm-card .nm b { font-size: calc(15px * var(--k) * var(--tx, 1)); } .trm-q { font-size: calc(21px * var(--k) * var(--tx, 1)); } }
/* a phone on its side: the picture takes the height that is there, the camera buttons stand in two columns */
@media (max-height: 520px) { .trm-stage { height: clamp(220px, calc(78 * var(--vh, 1vh)), 420px); } .trm-cam { left: auto; right: 6px; grid-template-columns: 44px 44px; } .trm-cards { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } }

/* ---- ages 4–6 (version 1.4, fix round): a friendly number of stars and nothing to chase — no “Star level”, no number in a ring, no bar toward a next one.
   (The trophies page writes them for every age; for the youngest they are not shown and not read out.) */
body[data-band="early"] .tr-top .num, body[data-band="early"] .tr-top .tr-stars > p:not(.tr-soft), body[data-band="early"] .tr-top .kbar { display: none; }

/* ---- larger letters (a child's own setting) reach the buttons of the Trophy Room and of the trophy card too: the Lab's round buttons have one fixed size,
   so here they follow --tx (1 · 1.12 · 1.25). With the largest letters a long button may break into two lines instead of pushing the page wide. */
.trm .kbtn, .trm-bar .kbtn, .trm-two .kbtn, .trm-handacts .kbtn, .trm-say .kbtn, .trm-yes .kbtn, .tm-acts .kbtn, .tr-roombox .kbtn { font-size: calc(15.5px * var(--k, 1) * var(--tx, 1)); }
.trm .kbtn.big, .trm-bar .kbtn.big, .trm-two .kbtn.big, .trm-yes .kbtn.big, .tr-roombox .kbtn.big { font-size: calc(19px * var(--k, 1) * var(--tx, 1)); }
.trm .kbtn.sm, .trm-bar .kbtn.sm, .tm-acts .kbtn.sm { font-size: calc(13.5px * var(--k, 1) * var(--tx, 1)); }
body.text-xl .trm-bar .kbtn, body.text-xl .trm-yes .kbtn, body.text-xl .tm-acts .kbtn { white-space: normal; line-height: 1.15; text-align: center; }

/* 12.8: over a game, the card becomes a small strip: name only, no big button that a tap meant for the game could hit */
.trophy-moment.mini .tm-why, .trophy-moment.mini .tm-more, .trophy-moment.mini .tm-acts { display: none; } .trophy-moment.mini .tm-pic { width: 44px; height: 44px; flex: 0 0 44px; } .trophy-moment.mini .tm-pic > * { max-width: 44px; max-height: 44px; } .trophy-moment.mini .tm-card { padding-block: 8px; }

/* ================================================================ Graphics V3 (html[data-gfx=v3] only; Classic V1 keeps everything above):
   the cream and daytime parts of the trophy moment and the Trophy Room become night glass with a gold rim — colors only, same sizes */
html[data-gfx=v3] .tm-card { color: var(--v3-ink); background: radial-gradient(120% 90% at 20% 0, rgba(255, 200, 74, .18), transparent 60%), linear-gradient(160deg, var(--v3-glass-1), var(--v3-glass-2)), #071430; border-color: var(--v3-gold); box-shadow: 0 0 0 1px rgba(255, 240, 200, .35), 0 0 26px rgba(255, 200, 74, .38), 0 18px 40px rgba(0, 0, 0, .5); }
html[data-gfx=v3] .tm-pic, html[data-gfx=v3] .tr-story .tr-stage, html[data-gfx=v3] .trm-handpic { background: radial-gradient(circle at 50% 42%, rgba(255, 220, 140, .42) 0, rgba(255, 200, 74, .14) 45%, transparent 72%), linear-gradient(160deg, #13285c, #070f2c); box-shadow: inset 0 0 0 2px var(--v3-gold), 0 0 18px rgba(255, 200, 74, .32); }
html[data-gfx=v3] .tm-new { color: var(--v3-gold); }
html[data-gfx=v3] .tm-name { color: #fff; }
html[data-gfx=v3] .tm-why { color: var(--v3-ink); }
html[data-gfx=v3] .tm-more { color: var(--v3-sub); }
html[data-gfx=v3] .tm-x { color: var(--v3-ink); } html[data-gfx=v3] .tm-x:hover, html[data-gfx=v3] .tm-x:focus-visible { background: rgba(255, 255, 255, .14); }
html[data-gfx=v3] .tr-group, html[data-gfx=v3] .tr-empty { background: radial-gradient(120% 90% at 50% 0, color-mix(in srgb, var(--v3-a) 16%, transparent), transparent 60%), linear-gradient(160deg, var(--v3-glass-1), var(--v3-glass-2)); box-shadow: inset 0 0 0 1px var(--v3-edge), 0 14px 34px rgba(0, 0, 0, .4), var(--v3-glow); }
html[data-gfx=v3] .trm, html[data-gfx=v3] .trm-first { color: var(--v3-ink); background: radial-gradient(120% 70% at 50% 0, rgba(255, 200, 74, .14), transparent 60%), linear-gradient(160deg, var(--v3-glass-1), var(--v3-glass-2)); box-shadow: inset 0 0 0 1px var(--v3-edge), inset 0 1px 0 rgba(255, 255, 255, .14), 0 18px 44px rgba(0, 0, 0, .42), var(--v3-glow); }
html[data-gfx=v3] .trm-stage { background: radial-gradient(90% 70% at 70% 0, color-mix(in srgb, var(--v3-a) 26%, transparent), transparent 65%), linear-gradient(180deg, #071a44, #0d2a63 60%, #123678); box-shadow: inset 0 0 0 1px var(--v3-edge); }
html[data-gfx=v3] .trm[data-style="cellar"] .trm-stage, html[data-gfx=v3] .trm[data-style="secret"] .trm-stage { background: linear-gradient(180deg, #2a1c18, #5b4337); }
html[data-gfx=v3] .trm[data-style="space"] .trm-stage, html[data-gfx=v3] .trm[data-night="1"] .trm-stage { background: linear-gradient(180deg, #050720, #1d2260); }
html[data-gfx=v3] .trm-ic { color: var(--v3-ink); background: linear-gradient(160deg, var(--v3-glass-1), var(--v3-glass-2)), #0a1a40; box-shadow: inset 0 0 0 1px var(--v3-edge), 0 6px 14px rgba(0, 0, 0, .4); }
html[data-gfx=v3] .trm-ic:hover { background: linear-gradient(160deg, color-mix(in srgb, var(--v3-a) 30%, #0b2a5c), #071634); }
html[data-gfx=v3] .trm-ic.on, html[data-gfx=v3] .trm-ic[aria-pressed="true"] { color: #2a1700; background: linear-gradient(180deg, #fff2bf, #ffd15c 50%, #f0a400); box-shadow: 0 0 16px rgba(255, 200, 74, .55); }
html[data-gfx=v3] .trm-loading { color: var(--v3-ink); background: rgba(4, 12, 34, .62); }
html[data-gfx=v3] .trm-say, html[data-gfx=v3] .trm-qsub { color: var(--v3-sub); }
html[data-gfx=v3] .trm-q { color: #fff !important; text-shadow: 0 0 14px color-mix(in srgb, var(--v3-a) 45%, transparent); }
html[data-gfx=v3] .trm-hand, html[data-gfx=v3] .trm-box { color: var(--v3-ink); background: linear-gradient(160deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02)); box-shadow: inset 0 0 0 1px rgba(255, 200, 74, .55); }
html[data-gfx=v3] .trm-new { color: var(--v3-ink); background: linear-gradient(160deg, var(--v3-glass-1), var(--v3-glass-2)), #0a1a40; box-shadow: inset 0 0 0 1px rgba(255, 200, 74, .6), 0 0 12px rgba(255, 200, 74, .22); }
html[data-gfx=v3] .trm-card { color: var(--v3-ink); background: linear-gradient(160deg, var(--v3-glass-1), var(--v3-glass-2)), #0a1a40; box-shadow: inset 0 0 0 1px var(--v3-edge), 0 10px 24px rgba(0, 0, 0, .4); }
html[data-gfx=v3] .trm-card .pic { background: radial-gradient(90% 80% at 50% 0, color-mix(in srgb, var(--v3-a) 28%, transparent), transparent 70%), linear-gradient(180deg, #0c2556, #071634); }
html[data-gfx=v3] .trm-card .nm small { color: var(--v3-sub); opacity: 1; }
html[data-gfx=v3] .trm-card.on { outline-color: var(--v3-gold); box-shadow: 0 0 0 1px #fff3c8, 0 0 26px rgba(255, 200, 74, .5); }