/* Scoped product surfaces; gameplay values and controls keep their original styles. */
.cosmetic-connect4-discs { display: flex; align-items: center; justify-content: center; gap: 20px; --connect4-cell: 84px; }
.cosmetic-connect4-board { width: min(100%, 217px); box-sizing: border-box; padding: 10px; overflow: hidden; }
.cosmetic-connect4-board .connect4-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cosmetic-connect4-board .connect4-cell { width: 100%; height: auto; aspect-ratio: 1; }
.shop-card-art .cosmetic-connect4-board { width: min(100%, 170px); padding: 8px; }
[data-cosmetic-disc] :is(.connect4-cell.red > span, .connect4-mini-disc.red) { --disc-light: #ff9f8d; --disc-mid: #cc4944; --disc-dark: #842b32; }
[data-cosmetic-disc] :is(.connect4-cell.yellow > span, .connect4-mini-disc.yellow) { --disc-light: #fff1a9; --disc-mid: #e8b83f; --disc-dark: #9c691b; }
[data-cosmetic-disc="ceramic"] :is(.connect4-cell.red > span, .connect4-cell.yellow > span, .connect4-mini-disc) {
  background: radial-gradient(ellipse at 30% 22%, #fff9 0 5%, transparent 28%), radial-gradient(circle, var(--disc-light) 0 48%, var(--disc-mid) 51% 65%, var(--disc-light) 69%, var(--disc-dark) 76%);
  box-shadow: inset 0 2px 2px #fff9, inset 0 -3px 4px #0004, 0 2px 3px #0003;
}
[data-cosmetic-disc="etched"] :is(.connect4-cell.red > span, .connect4-cell.yellow > span, .connect4-mini-disc) {
  background: radial-gradient(circle, transparent 35%, var(--disc-dark) 36% 38%, transparent 39% 48%, var(--disc-mid) 49% 58%, transparent 59%), radial-gradient(circle, var(--disc-light) 0, var(--disc-mid) 57%, transparent 59%), repeating-conic-gradient(var(--disc-mid) 0deg 9deg, var(--disc-dark) 10deg 13deg, var(--disc-light) 14deg 18deg);
  box-shadow: inset 0 1px 2px #fffc, inset 0 -2px 3px #0006, 0 2px 3px #0003;
}
:is(.connect4-surface[data-game-theme], .shop-game-cosmetic-preview)[data-cosmetic-frame="walnut"] .connect4-board-wrap {
  border: 4px solid #5f3826; border-radius: 10px;
  background: repeating-linear-gradient(174deg, #613e2b18 0 3px, #caa27524 4px 5px, transparent 6px 13px), linear-gradient(100deg, #795033, #a4774f 48%, #70432c);
  box-shadow: inset 0 0 0 2px #d1af77, inset 0 -7px 0 #4b2c20, 0 12px 22px #2b1e2233;
}
:is(.connect4-surface[data-game-theme], .shop-game-cosmetic-preview)[data-cosmetic-frame="arcade"] .connect4-board-wrap {
  border: 4px solid #273355; border-radius: 22px 22px 10px 10px;
  background: linear-gradient(120deg, #203052, #101a32);
  box-shadow: inset 0 0 0 2px #80e5d4, inset 0 -8px 0 #34406b, 0 0 14px #62d4d326, 0 12px 22px #18234744;
}
.connect4-surface[data-game-theme][data-cosmetic-frame="walnut"] .connect4-column-actions button { color: #fff5d6; }
.connect4-surface[data-game-theme][data-cosmetic-frame="arcade"] .connect4-column-actions button { color: #a6f4e3; }
.connect4-surface[data-game-theme][data-cosmetic-disc] .connect4-cell.last-move > span { outline: 3px solid #fff; outline-offset: -5px; filter: drop-shadow(0 0 1px #172131); }
.shop-yacht-die-sample { box-sizing: border-box; padding: 10px; gap: 5px; place-content: center; flex: 0 0 58px; }
.shop-yacht-preview[data-yacht-slot="dice"] .shop-yacht-tray-sample { border: 0; background: transparent; box-shadow: none; gap: 18px; }
.shop-yacht-preview[data-yacht-slot="tray"] .shop-yacht-die-sample { transform: scale(.68); opacity: .84; }
.shop-yacht-preview small, .shop-yut-preview small { color: #45515e; font-size: 11px; }
.shop-yut-route { width: min(100%, 220px); height: auto; filter: drop-shadow(0 8px 7px #17212e22); }
.shop-yut-route .yut-board-surface { fill: var(--yut-board-bg, #caa56b); stroke: var(--yut-board-ink, #805d36); stroke-width: 5; }
.shop-yut-route path { fill: none; stroke: var(--yut-board-ink, #805d36); stroke-width: 2; }
.shop-yut-route circle { fill: var(--yut-node, #f7e4bc); stroke: var(--yut-board-ink, #805d36); stroke-width: 2; }
.shop-yut-route text { fill: var(--yut-board-ink, #805d36); font-size: 10px; }
[data-yut-variant="midnight"] { --yut-board-bg: #233547; --yut-board-ink: #98b8c6; --yut-node: #28475a; }
[data-yut-variant="hanji"] { --yut-board-bg: #e7dac0; --yut-board-ink: #77735e; --yut-node: #f8f0de; }
.shop-yut-sticks { display: flex; align-items: center; justify-content: center; gap: 17px; min-height: 188px; width: 100%; }
.yut-stick-face { position: relative; width: 29px; height: 155px; border-radius: 14px 14px 9px 9px; background: var(--yut-stick-face, #e8bf79); box-shadow: inset -6px 0 #0002, 4px 10px 10px #18202d26; display: flex; flex-direction: column; justify-content: space-evenly; align-items: center; transform: rotate(-9deg); border: 2px solid var(--yut-stick-edge, #9d6f33); }
.yut-stick-face.is-back { transform: rotate(9deg); background: var(--yut-stick-back, #a3753e); }
.yut-stick-face i { width: 9px; height: 9px; border-top: 2px solid var(--yut-stick-mark, #775129); border-left: 2px solid var(--yut-stick-mark, #775129); transform: rotate(45deg); }
.yut-stick-face b { color: var(--yut-stick-mark, #fff1cc); font-size: 22px; }
[data-yut-variant="obsidian"] { --yut-stick-face: #434851; --yut-stick-back: #22262e; --yut-stick-edge: #151922; --yut-stick-mark: #ddd5bf; }
[data-yut-variant="dancheong"] { --yut-stick-face: #42867b; --yut-stick-back: #ab4d40; --yut-stick-edge: #315950; --yut-stick-mark: #f7ce77; }
[data-yut-variant="dancheong"] .yut-stick-face { border-block: 12px solid #d0a454; }
.shop-yut-pieces { min-height: 190px; display: flex; align-items: flex-end; justify-content: center; gap: 72px; padding: 30px 15px; }
.yut-piece-stack { position: relative; width: 43px; height: 45px; }
.yut-piece-stack i { display: block; position: absolute; width: 43px; height: 43px; background: linear-gradient(135deg,#ef8b8955,transparent 60%),#be3c4a; border: 2px solid #87333e; border-radius: 6px; transform: skewY(-9deg) rotate(-7deg); box-shadow: inset 1px 1px #ffffff55, 7px 6px 0 #89333e, 11px 13px 8px #13253620; }
.yut-piece-stack.triple i { background: linear-gradient(135deg,#82c4ed66,transparent 60%),#246cba; border-color: #21518a; box-shadow: inset 1px 1px #ffffff55, 7px 6px 0 #204b7e, 11px 13px 8px #13253620; }
.yut-piece-stack i:nth-child(2) { bottom: 30px; left: -3px; }
.yut-piece-stack i:nth-child(3) { bottom: 60px; left: 1px; }
.yut-piece-stack .yut-piece-emblem { position: absolute; inset: 2px; width: calc(100% - 4px); height: calc(100% - 4px); }
.piece-top > .yut-piece-emblem { position: absolute; inset: 4%; width: 92%; height: 92%; }
:is(.yut-board-wrap,.yut-reserve-wrap)[data-yut-piece] .yut-piece .piece-top { background: linear-gradient(135deg,#ffffff52,transparent 34%),linear-gradient(145deg,var(--piece-color,#246cba),color-mix(in srgb,var(--piece-color,#246cba) 72%,#000)); }
.shop-card-art .shop-yut-route { max-height: 138px; }
.shop-card-art .shop-yut-sticks { min-height: 135px; gap: 13px; }
.shop-card-art .yut-stick-face { height: 112px; width: 24px; }
.shop-card-art .shop-yut-pieces { min-height: 135px; padding-bottom: 22px; transform: scale(.84); }
.shop-card-art .shop-yut-preview, .shop-card-art .shop-yacht-preview { gap: 5px; }
.shop-game-cosmetic-preview { min-height: 245px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 24px; background: var(--surface-soft); color: var(--text); overflow: hidden; border-radius: 12px; }
.shop-sample-caption { font-size: 11px; color: var(--muted); }
.shop-card-art .shop-game-cosmetic-preview { min-height: 180px; padding: 16px; gap: 10px; }
.cosmetic-mine-grid { --mine-cell-size: 33px; display: grid; grid-template-columns: repeat(5, var(--mine-cell-size)); border: 1px solid var(--line); }
/* Product samples work before the game-specific stylesheet is requested. */
:where(.cosmetic-mine-grid) .mine-cell {
  display: grid; place-items: center; box-sizing: border-box;
  width: var(--mine-cell-size); height: var(--mine-cell-size); padding: 0;
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  color: var(--text); font: 800 1rem/1 var(--font-body);
}
:where(.cosmetic-mine-grid) .mine-cell.is-revealed { background: var(--surface-soft); }
:where(.cosmetic-mine-grid) .mine-cell.is-flagged { color: var(--danger); }
[data-cosmetic-tile="ceramic"] .mine-cell:not(.is-revealed), .minesweeper-surface[data-game-theme][data-cosmetic-tile="ceramic"] .mine-cell:not(.is-revealed) { background: linear-gradient(145deg, #fffcf1, #cfded9); box-shadow: inset 2px 2px #fff, inset -2px -2px #81978e; border-radius: 5px; color: #7c341c; }
[data-cosmetic-tile="slate"] .mine-cell:not(.is-revealed), .minesweeper-surface[data-game-theme][data-cosmetic-tile="slate"] .mine-cell:not(.is-revealed) { background: repeating-linear-gradient(163deg, #32565a 0 8px, #385e61 9px 10px); box-shadow: inset 1px 1px #729494, inset -2px -2px #203a40; color: #ffde9d; }
.mine-cell.is-flagged { display: flex; justify-content: center; gap: 1px; }
[data-cosmetic-flag="pennant"] .mine-flag-glyph { position: relative; display: inline-block; width: .7em; height: .9em; color: transparent; border-left: 2px solid #a34e1d; }
[data-cosmetic-flag="pennant"] .mine-flag-glyph::before { content: ""; position: absolute; left: 0; top: 0; width: .65em; height: .6em; background: #f1a440; clip-path: polygon(0 0,100% 35%,0 100%); }
.cosmetic-card-back { display: grid; place-content: center; gap: 15px; min-width: 115px; min-height: 155px; border-radius: 12px; text-align: center; font-size: 34px; }
.cosmetic-card-back small { font-size: 11px; }
[data-cosmetic-card-back="indigo"] .indian-number.hidden { color: #fff6de; background: repeating-linear-gradient(45deg, transparent 0 12px, #90acc740 13px 14px), repeating-linear-gradient(-45deg, #233b62 0 12px, #90acc750 13px 14px); border: 5px double #a6b4ca; }
[data-cosmetic-card-back="artdeco"] .indian-number.hidden { color: #fbe4ac; border: 5px double #ceab65; background: repeating-linear-gradient(60deg, transparent 0 19px, #d1ac6266 20px 21px), repeating-linear-gradient(-60deg, #243c35 0 19px, #d1ac6266 20px 21px); }
[data-cosmetic-chip="brass"] .indian-token-row strong { display: inline-grid; place-items: center; min-width: 2.4em; min-height: 2.4em; padding: .2em; border-radius: 50%; border: 4px double #9b682c; outline: 2px dashed #a57a39; outline-offset: -6px; color: #543717; background: radial-gradient(circle, #f6dfa1 45%, #d4a355 47%, #efd08a 67%); font-weight: 800; }
.cosmetic-chip-display { display: grid; gap: 20px; text-align: center; font-size: 25px; }
.cosmetic-chip-display small { font-size: 12px; }
.cosmetic-word-card { display: flex; gap: 8px; font-size: 40px; padding: 24px; }
[data-cosmetic-card="library"] :is(#currentWord, .cosmetic-word-card) { position: relative; background: repeating-linear-gradient(transparent 0 27px, #9cb3a82c 28px 29px), #f7f0dd; color: #294739; border: 1px solid #cdbd94; border-left: 8px solid #637a5b; border-radius: 4px; box-shadow: 4px 4px 0 #b1b79c55; --word-display-text: #294739; }
[data-cosmetic-stamp="seal"] .word-history-chip[data-word-approved="true"]::after { content: "확정"; display: inline-block; margin-left: 9px; padding: 4px; border: 2px solid #a94737; color: #a94737; border-radius: 50%; font-size: 10px; line-height: 1; transform: rotate(-13deg); }
.cosmetic-approved-word { font-size: 25px; padding: 16px; }
[data-cosmetic-panel="vinyl"] :is(.mask-board, .battle-layout > section:first-child, .cosmetic-music-panel), .game-layout[data-game-theme][data-cosmetic-panel="vinyl"] :is(.mask-board, .battle-layout > section:first-child) { border-radius: 18px; border: 1px solid #d1b9a0; padding: 24px; background: repeating-radial-gradient(circle at 105% 20%, transparent 0 12px, #af977823 13px 14px), #f7eedf; color: #423a35; box-shadow: inset 8px 0 #9a6954; }
[data-cosmetic-panel="vinyl"] :is(.mask, .music-status, .meta), .game-layout[data-game-theme][data-cosmetic-panel="vinyl"] :is(.mask, .music-status, .meta) { color: #423a35; }
[data-cosmetic-correct="equalizer"] :is(#musicResult, #battleResult, .cosmetic-correct-result)[data-tone="success"]::after { content: "▂ ▆ ▃ █ ▄ ▇ ▂"; display: inline-block; margin-left: 14px; color: var(--accent); letter-spacing: 3px; animation: cosmetic-rhythm .6s ease-in-out 3 alternate; pointer-events: none; }
[data-cosmetic-frame="concert"] :is(.pitch-play-primary, .cosmetic-pitch-frame) { padding: 16px; border: 5px double #b8a379; border-radius: 12px; background: repeating-linear-gradient(transparent 0 14px, #af987615 15px 16px), var(--surface); }
.cosmetic-keyboard { margin-top: 16px; padding: 20px; background: #fffff6; color: #282a33; border-radius: 4px; letter-spacing: 8px; font-size: 24px; white-space: nowrap; }
[data-cosmetic-complete="encore"] :is(#pitchResult, .cosmetic-completion)[data-complete="true"]::after { content: "✦ ENCORE ✦"; display: block; width: fit-content; margin: 12px auto 0; padding: 8px 26px; color: #553912; background: #e8cf96; clip-path: polygon(0 0,100% 0,94% 50%,100% 100%,0 100%,6% 50%); font-size: 12px; letter-spacing: 2px; animation: cosmetic-ribbon .6s ease-out both; pointer-events: none; }
@keyframes cosmetic-rhythm { to { opacity: .5; transform: scaleY(.55); } }
.game-layout[data-game-theme][data-cosmetic-panel="vinyl"] .mask { background: transparent; box-shadow: none; border-color: #c8b392; }
.game-layout[data-game-theme][data-cosmetic-panel="vinyl"] .music-status { background: #fffcf3; border-color: #d1b9a0; }
.game-layout[data-game-theme][data-cosmetic-panel="vinyl"] .music-status strong { color: #423a35; }
@keyframes cosmetic-ribbon { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
.shop-game-destinations { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.shop-decor-model { min-height: 245px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 0; padding: 12px 14px 18px; background: radial-gradient(ellipse at 50% 32%,#faf8f0,#e9e5da); color: #545047; border-radius: 12px; }
.shop-decor-illustration { display: block; width: 100%; max-width: 340px; height: auto; }
.shop-decor-model small { font-size: 11px; text-align: center; }
.shop-card-art .shop-decor-model { min-height: 180px; padding: 4px 8px 10px; }
.shop-card-art .shop-decor-illustration { height: 154px; }
.shop-titles-products .shop-title-list { max-height: none; overflow: visible; gap: 12px; grid-template-columns: repeat(3,minmax(0,1fr)); }
.shop-titles-products > .shop-results-heading { margin-block: 6px 20px; }
.shop-title-nav { display: flex; gap: 8px; flex-wrap: wrap; padding-bottom: 24px; }
.shop-title-nav button { display: flex; gap: 8px; align-items: center; font-size: 13px; }
.shop-title-nav span { font-size: 11px; color: var(--muted); }
.shop-title-group { scroll-margin-top: 24px; margin-bottom: 30px; }
.shop-title-group-heading { display: flex; align-items: baseline; gap: 12px; border-bottom: 1px solid var(--line); padding: 0 0 12px; margin: 0 0 16px; }
.shop-title-group-heading h3 { font-size: 17px; margin: 0; }
.shop-title-group-heading span { font-size: 12px; color: var(--muted); }
.shop-title-group .shop-title-row { display: grid; grid-template-columns: minmax(0,1fr) auto; grid-template-areas: "badge action" "copy copy"; align-content: start; align-items: start; padding: 14px; gap: 10px 8px; min-width: 0; }
.shop-title-group .title-badge { grid-area: badge; justify-self: start; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.shop-title-group .shop-title-row.locked { opacity: 1; }
.shop-title-group .title-badge.is-locked { opacity: 1; filter: none; }
.shop-title-group .title-badge.is-locked::after { display: none; }
.title-tier { flex: 0 0 auto; margin-right: 5px; padding-right: 5px; border-right: 1px solid currentColor; font-size: 10px; letter-spacing: 0; opacity: .85; }
.shop-title-group .shop-title-copy { grid-area: copy; display: flex; flex-direction: column; gap: 8px; }
.shop-title-group .shop-title-action { grid-area: action; display: flex; justify-content: flex-end; }
.shop-title-action button { min-height: 28px; padding: 4px 8px; font-size: 12px; line-height: 18px; border-radius: 8px; white-space: nowrap; }
.shop-title-keepsake { color: var(--muted); line-height: 1.5; }
@media (max-width: 1100px) { .shop-titles-products .shop-title-list { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 620px) { .shop-titles-products .shop-title-list { grid-template-columns: 1fr; } }
.shop-title-feedback { margin: 24px 0; color: var(--muted); }
.profile-card-face { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 32px 22px; min-height: 210px; background: var(--surface-soft); border: 1px solid var(--line); border-radius: 16px; text-align: center; overflow: hidden; color: var(--text); }
.profile-card-avatar { display: grid; place-items: center; width: 62px; height: 62px; overflow: hidden; border-radius: 50%; background: #ffffffbb; color: #3f4a4e; border: 3px solid #fff8; font-size: 22px; }
.profile-card-avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-card-face strong { font-size: 20px; }
.profile-card-face h2 { margin: 0; font-size: 23px; color: inherit; }
.profile-head.profile-card-face { min-height: 120px; padding: 20px 14px; }
.shop-card-art .profile-card-face { min-height: 180px; }
.user-profile-dialog { width: min(360px, calc(100% - 32px)); max-height: calc(100dvh - 32px); padding: 14px; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); color: var(--text); }
.user-profile-dialog::backdrop { background: #15223188; }
.profile-card-close { display: block; margin: 0 0 10px auto; }
.room-user[data-room-profile] { font: inherit; cursor: pointer; }
.room-user[data-room-profile]:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.nameplate-botanical, .context-panel[data-game-theme] .room-user.nameplate-botanical { border: 2px solid #779269; background: linear-gradient(115deg,#91ab7340,transparent 30% 70%,#91ab7340),var(--surface); border-radius: 18px 5px; }
.nameplate-orbit, .context-panel[data-game-theme] .room-user.nameplate-orbit { border: 2px solid #af99c5; outline: 1px dashed #9780b0; outline-offset: -6px; background: radial-gradient(circle at 88% 22%,#a499be 0 2px,transparent 3px),var(--surface); border-radius: 22px; }
.nameplate-ticket, .context-panel[data-game-theme] .room-user.nameplate-ticket { border: 2px dashed #b6925d; border-inline: 6px double #b6925d; border-radius: 4px 13px; background: var(--surface); }
.nameplate-stitch, .context-panel[data-game-theme] .room-user.nameplate-stitch { border: 2px dashed #9f9a83; outline: 3px solid #d4cbb0; outline-offset: -6px; border-radius: 10px; background: repeating-linear-gradient(45deg,#afa48615 0 1px,transparent 2px 5px),var(--surface); }
@media (prefers-reduced-motion: reduce) {
  [data-cosmetic-correct] ::after, [data-cosmetic-complete] ::after { animation: none !important; }
}