#usotsuki-gallery-app { --ug-bg: #f5f2e9; --ug-paper: #fffdf7; --ug-ink: #203532; --ug-muted: #69736a; --ug-line: #dcded1; --ug-accent: #d59d59; font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; color: var(--ug-ink); background: var(--ug-bg); min-height: 100vh; line-height: 1.75; font-size: 15px; border-radius: 4px; }
#usotsuki-gallery-app * { box-sizing: border-box; }
#usotsuki-gallery-app .ug-shell { max-width: 1240px; margin: auto; padding: 0 48px; }
#usotsuki-gallery-app button, #usotsuki-gallery-app input, #usotsuki-gallery-app textarea { font: inherit; }
#usotsuki-gallery-app button { cursor: pointer; }
#usotsuki-gallery-app button, #usotsuki-gallery-app input, #usotsuki-gallery-app textarea, #usotsuki-gallery-app summary { -webkit-tap-highlight-color: transparent; }
#usotsuki-gallery-app :focus-visible { outline: 3px solid #bb7931; outline-offset: 4px; }
#usotsuki-gallery-app h1:focus { outline: none; }
#usotsuki-gallery-app h1, #usotsuki-gallery-app h2, #usotsuki-gallery-app h3, #usotsuki-gallery-app p, #usotsuki-gallery-app figure { margin: 0; }
#usotsuki-gallery-app h1 { font-family: "Yu Mincho", "Hiragino Mincho ProN", Georgia, serif; font-size: clamp(28px, 3.2vw, 42px); line-height: 1.5; letter-spacing: .04em; margin-bottom: 18px; overflow-wrap: anywhere; }
#usotsuki-gallery-app h2 { font-size: 19px; }
#usotsuki-gallery-app h3 { font-size: 16px; margin-bottom: 12px; }
#usotsuki-gallery-app .ug-header { min-height: 112px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border-bottom: 1px solid var(--ug-line); }
#usotsuki-gallery-app .ug-brand { display: flex; align-items: center; gap: 12px; font-family: "Yu Mincho", Georgia, serif; font-weight: bold; font-size: 20px; letter-spacing: .06em; }
#usotsuki-gallery-app .ug-brand small { display: block; font-family: sans-serif; font-size: 9px; letter-spacing: .2em; color: var(--ug-muted); }
#usotsuki-gallery-app .ug-logo { font-size: 39px; line-height: 1; color: #a67941; }
#usotsuki-gallery-app .ug-header-right { display: flex; align-items: center; gap: 20px; }
#usotsuki-gallery-app .ug-header-tools { display:flex; align-items:center; gap:18px; }
#usotsuki-gallery-app .ug-audio-controls { display:flex; align-items:center; gap:10px; padding:7px 10px; border:1px solid var(--ug-line); border-radius:8px; background:var(--ug-paper); }
#usotsuki-gallery-app .ug-audio-toggle { min-height:34px; padding:6px 10px; border:0; border-radius:5px; background:var(--ug-ink); color:#fff; font:700 11px/1 sans-serif; letter-spacing:.06em; cursor:pointer; }
#usotsuki-gallery-app .ug-audio-toggle[aria-pressed="false"] { background:var(--ug-paper-deep); color:var(--ug-muted); box-shadow:inset 0 0 0 1px var(--ug-line); }
#usotsuki-gallery-app .ug-audio-controls label { display:grid; grid-template-columns:auto minmax(58px,90px) 34px; align-items:center; gap:7px; color:var(--ug-muted); font-size:10px; }
#usotsuki-gallery-app .ug-audio-controls input { width:100%; accent-color:var(--ug-ink); cursor:pointer; }
#usotsuki-gallery-app .ug-audio-controls output { text-align:right; font-variant-numeric:tabular-nums; }
#usotsuki-gallery-app .ug-edition { font-size: 12px; color: var(--ug-muted); }
#usotsuki-gallery-app .ug-edition i { margin-left: 10px; color: #74866b; font-size: 8px; }
#usotsuki-gallery-app .ug-content { padding: 48px 0 32px; min-height: 66vh; }
#usotsuki-gallery-app .ug-eyebrow { font-size: 11px; font-weight: bold; letter-spacing: .15em; color: #7c725f; margin-bottom: 20px; }
#usotsuki-gallery-app .ug-lead { color: var(--ug-muted); line-height: 2; margin-bottom: 28px; }
#usotsuki-gallery-app .ug-small { color: var(--ug-muted); font-size: 12px; margin-top: 16px; }
#usotsuki-gallery-app .ug-button { display: inline-flex; align-items: center; justify-content: center; gap: 30px; border: 1px solid transparent; border-radius: 7px; min-height: 50px; padding: 13px 25px; font-weight: bold; font-size: 14px; transition: background .15s, transform .15s; }
#usotsuki-gallery-app .ug-button:hover { transform: translateY(-1px); }
#usotsuki-gallery-app .ug-primary { background: var(--ug-ink); color: #fffdf7; box-shadow: 0 5px 13px #20353212; }
#usotsuki-gallery-app .ug-primary:hover { background: #35534a; }
#usotsuki-gallery-app .ug-quiet { color: var(--ug-muted); background: transparent; padding: 10px 14px; font-weight: normal; box-shadow: none; }
#usotsuki-gallery-app .ug-quiet:hover { background: #e8e9de; }
#usotsuki-gallery-app .ug-hero { display: grid; grid-template-columns: 1.04fr 1fr; align-items: center; min-height: 470px; gap: 25px; }
#usotsuki-gallery-app .ug-hero h1 { font-size: clamp(46px, 5.3vw, 70px); line-height: 1.42; letter-spacing: .09em; margin-bottom: 26px; }
#usotsuki-gallery-app .ug-hero h1 span { color: #a37443; }
#usotsuki-gallery-app .ug-hero .ug-lead { font-size: 14px; margin-bottom: 24px; }
#usotsuki-gallery-app .ug-tags { display: flex; gap: 11px; margin-bottom: 28px; }
#usotsuki-gallery-app .ug-tags span { font-size: 12px; padding: 3px 12px; border: 1px solid var(--ug-line); border-radius: 4px; }
#usotsuki-gallery-app .ug-hero-gallery { height: 470px; position: relative; background: radial-gradient(ellipse at 55% 55%, #dedcc98c 0%, transparent 67%); }
#usotsuki-gallery-app .ug-frame { position: absolute; background: #fffaf0; padding: 12px; box-shadow: 0 15px 28px #24332b1c; border: 1px solid #d8cfb8; }
#usotsuki-gallery-app .ug-frame-back { width: 49%; right: 0; top: 3%; transform: rotate(10deg); }
#usotsuki-gallery-app .ug-frame-front { width: 60%; left: 5%; top: 6%; transform: rotate(-7deg); padding: 14px 14px 12px; }
#usotsuki-gallery-app .ug-art img { width: 100%; display: block; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 3px; background: #203532; }
#usotsuki-gallery-app .ug-exhibit-label { padding: 9px 2px 1px; }
#usotsuki-gallery-app .ug-exhibit-label span { display: block; font-size: 8px; letter-spacing: .18em; color: var(--ug-muted); }
#usotsuki-gallery-app .ug-exhibit-label b { font-family: "Yu Mincho", serif; font-size: 13px; }
#usotsuki-gallery-app .ug-gallery-stamp { position: absolute; bottom: 14px; right: 0; font-size: 11px; color: #857a68; letter-spacing: .15em; text-align: right; }
#usotsuki-gallery-app .ug-how { margin-top: 36px; border-top: 1px solid var(--ug-line); padding-top: 27px; }
#usotsuki-gallery-app .ug-section-label { font-size: 13px; font-weight: bold; }
#usotsuki-gallery-app .ug-section-label span { font-size: 9px; color: var(--ug-muted); letter-spacing: .14em; margin-left: 16px; }
#usotsuki-gallery-app .ug-how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 38px; padding: 23px 0 4px; }
#usotsuki-gallery-app .ug-how-grid article { position: relative; padding-left: 40px; }
#usotsuki-gallery-app .ug-step-number { position: absolute; left: 0; top: 0; font-family: Georgia, serif; font-size: 23px; color: #ab8c5e; }
#usotsuki-gallery-app .ug-how h2 { font-size: 16px; margin-bottom: 9px; }
#usotsuki-gallery-app .ug-how p { font-size: 12px; line-height: 1.9; color: var(--ug-muted); }
#usotsuki-gallery-app .ug-footer { display: flex; justify-content: space-between; border-top: 1px solid var(--ug-line); padding: 23px 0; color: #798074; font-size: 10px; letter-spacing: .08em; gap: 15px; }
#usotsuki-gallery-app .ug-panel { background: var(--ug-paper); border: 1px solid var(--ug-line); border-radius: 12px; padding: 32px; }
#usotsuki-gallery-app .ug-setup-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 65px; align-items: start; padding: 20px 0; }
#usotsuki-gallery-app .ug-note { margin-top: 40px; border-top: 1px solid var(--ug-line); padding-top: 24px; color: var(--ug-muted); font-size: 13px; }
#usotsuki-gallery-app .ug-note h2 { font-size: 15px; color: var(--ug-ink); }
#usotsuki-gallery-app .ug-note ul { padding-left: 20px; }
#usotsuki-gallery-app .ug-note li { margin: 9px 0; }
#usotsuki-gallery-app fieldset { padding: 0; border: 0; margin: 22px 0; }
#usotsuki-gallery-app legend, #usotsuki-gallery-app label > span { font-size: 12px; font-weight: bold; }
#usotsuki-gallery-app legend { margin-bottom: 10px; }
#usotsuki-gallery-app .ug-count-picker { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
#usotsuki-gallery-app .ug-count { background: transparent; border: 1px solid var(--ug-line); padding: 9px; border-radius: 6px; color: var(--ug-ink); font-size: 22px; }
#usotsuki-gallery-app .ug-count small { font-size: 11px; margin-left: 4px; }
#usotsuki-gallery-app .ug-count.is-selected { background: var(--ug-ink); color: var(--ug-paper); border-color: var(--ug-ink); }
#usotsuki-gallery-app .ug-name-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
#usotsuki-gallery-app input:not([type="checkbox"]):not([type="radio"]), #usotsuki-gallery-app textarea { display: block; width: 100%; min-width: 0; padding: 11px 13px; border: 1px solid #cdd1c6; border-radius: 6px; background: #fffef9; color: var(--ug-ink); margin: 6px 0; font-size: 16px; }
#usotsuki-gallery-app textarea { resize: vertical; min-height: 100px; }
#usotsuki-gallery-app input[type="radio"], #usotsuki-gallery-app input[type="checkbox"] { accent-color: #35594a; width: 18px; height: 18px; flex-shrink: 0; }
#usotsuki-gallery-app .ug-switch { display: flex; align-items: center; gap: 9px; margin: 23px 0; font-size: 13px; }
#usotsuki-gallery-app .ug-setup-summary { display: flex; justify-content: space-between; border-top: 1px solid var(--ug-line); padding: 17px 0; font-size: 12px; color: var(--ug-muted); }
#usotsuki-gallery-app .ug-setup-layout .ug-button { width: 100%; }
#usotsuki-gallery-app .ug-progress { display: flex; justify-content: space-between; gap: 10px; padding-top: 24px; font-size: 11px; color: #7a8177; }
#usotsuki-gallery-app .ug-progress span { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
#usotsuki-gallery-app .ug-progress b { display: inline-grid; place-items: center; width: 22px; height: 22px; border: 1px solid var(--ug-line); border-radius: 50%; font-size: 10px; }
#usotsuki-gallery-app .ug-progress .is-current { color: var(--ug-ink); font-weight: bold; }
#usotsuki-gallery-app .ug-progress .is-current b { background: var(--ug-ink); color: white; border-color: var(--ug-ink); }
#usotsuki-gallery-app .ug-progress .is-done b { background: #e4e8dc; }
#usotsuki-gallery-app .ug-round { font-size: 11px; letter-spacing: .1em; white-space: nowrap; }
#usotsuki-gallery-app .ug-round b { font-size: 19px; margin: 0 4px; }
#usotsuki-gallery-app .ug-pass { max-width: 660px; margin: 0 auto; text-align: center; padding: 38px 28px; }
#usotsuki-gallery-app .ug-lock { background: #e9ecdf; width: 70px; height: 70px; border-radius: 50%; margin: 0 auto 22px; display: grid; place-items: center; font-size: 34px; color: #84764f; }
#usotsuki-gallery-app .ug-pass .ug-lead { margin-bottom: 10px; }
#usotsuki-gallery-app .ug-pass .ug-primary { margin-top: 30px; }
#usotsuki-gallery-app .ug-private-layout { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); gap: 60px; max-width: 930px; margin: auto; align-items: center; }
#usotsuki-gallery-app .ug-private-layout > div:first-child { max-width: 370px; width: 100%; }
#usotsuki-gallery-app figcaption { display: flex; justify-content: space-between; padding: 10px 0; gap: 10px; font-size: 12px; }
#usotsuki-gallery-app figcaption span { color: var(--ug-muted); font-size: 9px; }
#usotsuki-gallery-app .ug-prompt { background: #e9ecdf; border-left: 3px solid #a4814d; padding: 22px; margin-bottom: 26px; border-radius: 0 8px 8px 0; }
#usotsuki-gallery-app .ug-prompt span { font-size: 9px; letter-spacing: .2em; color: var(--ug-muted); }
#usotsuki-gallery-app .ug-prompt p { font-size: 20px; font-weight: bold; margin-top: 8px; }
#usotsuki-gallery-app .ug-private-copy .ug-button { margin-top: 15px; }
#usotsuki-gallery-app .ug-answer-grid, #usotsuki-gallery-app .ug-vote-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
#usotsuki-gallery-app .ug-answer-card { border: 1px solid var(--ug-line); padding: 23px; border-radius: 10px; background: var(--ug-paper); overflow-wrap: anywhere; }
#usotsuki-gallery-app .ug-answer-card.is-speaking { border: 2px solid #a78855; background: #fcf7e8; }
#usotsuki-gallery-app .ug-card-person { display: flex; align-items: center; gap: 10px; font-size: 12px; flex-wrap: wrap; }
#usotsuki-gallery-app .ug-avatar { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #dce5d5; color: #3e5142; flex-shrink: 0; font-size: 13px; }
#usotsuki-gallery-app .ug-avatar-1, #usotsuki-gallery-app .ug-avatar-4 { background: #eee0ca; }
#usotsuki-gallery-app .ug-avatar-2, #usotsuki-gallery-app .ug-avatar-5 { background: #e0deea; }
#usotsuki-gallery-app .ug-live { font-size: 9px; color: #95703c; }
#usotsuki-gallery-app .ug-answer-card p { margin-top: 20px; white-space: pre-wrap; }
#usotsuki-gallery-app .ug-actions { display: flex; gap: 20px; align-items: center; margin-top: 28px; flex-wrap: wrap; }
#usotsuki-gallery-app .ug-actions .ug-small { margin: 0; }
#usotsuki-gallery-app .ug-discussion-head { display: flex; justify-content: space-between; align-items: start; gap: 30px; }
#usotsuki-gallery-app .ug-timer { min-width: 190px; text-align: center; background: var(--ug-ink); color: #fffaf0; border-radius: 12px; padding: 16px 20px; margin-bottom: 28px; }
#usotsuki-gallery-app .ug-timer span { display: block; font-size: 9px; letter-spacing: .2em; color: #d1cfb5; }
#usotsuki-gallery-app .ug-timer b { display: block; font-family: Georgia, serif; font-size: 48px; font-weight: normal; line-height: 1.35; font-variant-numeric: tabular-nums; }
#usotsuki-gallery-app .ug-timer small { font-size: 10px; }
#usotsuki-gallery-app .ug-vote-option { display: flex; gap: 12px; align-items: start; padding: 22px; background: var(--ug-paper); border: 1px solid var(--ug-line); border-radius: 8px; cursor: pointer; }
#usotsuki-gallery-app .ug-vote-option:has(input:checked) { background: #e7ecdF; border-color: #466353; }
#usotsuki-gallery-app .ug-vote-option span { overflow-wrap: anywhere; }
#usotsuki-gallery-app .ug-vote-option b { font-size: 14px; }
#usotsuki-gallery-app .ug-vote-option small { display: block; font-size: 13px; color: var(--ug-muted); font-weight: normal; margin-top: 10px; white-space: pre-wrap; }
#usotsuki-gallery-app .ug-results { display: grid; gap: 20px; }
#usotsuki-gallery-app .ug-result-teaser { text-align: center; padding: 45px; }
#usotsuki-gallery-app .ug-result-teaser > span { font-size: 55px; color: #a78754; }
#usotsuki-gallery-app .ug-result-teaser p { margin-top: 10px; color: var(--ug-muted); }
#usotsuki-gallery-app .ug-result-block { padding: 26px; border: 1px solid var(--ug-line); border-radius: 10px; background: var(--ug-paper); }
#usotsuki-gallery-app .ug-result-block h2 { margin-bottom: 22px; }
#usotsuki-gallery-app .ug-result-block h2 span { font-family: Georgia, serif; font-weight: normal; margin-right: 15px; color: #aa8651; }
#usotsuki-gallery-app .ug-vote-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 35px; }
#usotsuki-gallery-app .ug-vote-rows > div { display: grid; grid-template-columns: 1fr 20px 1fr; gap: 8px; font-size: 13px; border-bottom: 1px solid var(--ug-line); padding-bottom: 10px; overflow-wrap: anywhere; }
#usotsuki-gallery-app .ug-reveal-name { font-size: 26px; font-family: "Yu Mincho", serif; margin-bottom: 20px; overflow-wrap: anywhere; }
#usotsuki-gallery-app .ug-reveal-name small { font-size: 13px; }
#usotsuki-gallery-app .ug-reveal-prompt { font-size: 20px; }
#usotsuki-gallery-app .ug-art-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
#usotsuki-gallery-app .ug-art-grid p { font-size: 13px; overflow-wrap: anywhere; white-space: pre-wrap; }
#usotsuki-gallery-app .ug-art-grid figcaption { flex-direction: column; gap: 0; }
#usotsuki-gallery-app .ug-sticky-action { position: sticky; bottom: 0; padding: 20px 0; background: linear-gradient(transparent, var(--ug-bg) 25%); text-align: center; margin-top: 20px; }
#usotsuki-gallery-app .ug-table-wrap { overflow-x: auto; }
#usotsuki-gallery-app table { width: 100%; border-collapse: collapse; text-align: left; font-size: 13px; }
#usotsuki-gallery-app td, #usotsuki-gallery-app th { padding: 13px 10px; border-bottom: 1px solid var(--ug-line); overflow-wrap: anywhere; }
#usotsuki-gallery-app td small { display: block; color: var(--ug-muted); font-size: 10px; }
#usotsuki-gallery-app .ug-scoreboard { max-width: 640px; margin: auto; text-align: center; }
#usotsuki-gallery-app .ug-winners { font-size: 25px; font-weight: bold; margin-bottom: 24px; overflow-wrap: anywhere; }
#usotsuki-gallery-app .ug-winners span { display: block; font-size: 14px; color: #95703c; margin-top: 8px; }
#usotsuki-gallery-app .ug-ranking { display: grid; gap: 10px; margin: 28px 0; }
#usotsuki-gallery-app .ug-ranking > div { display: flex; gap: 16px; align-items: center; text-align: left; padding: 17px 23px; background: var(--ug-paper); border: 1px solid var(--ug-line); border-radius: 8px; }
#usotsuki-gallery-app .ug-ranking > div:first-child { background: #efe8d5; border-color: #c4af84; }
#usotsuki-gallery-app .ug-ranking b { overflow-wrap: anywhere; }
#usotsuki-gallery-app .ug-rank { color: #9d845b; font-family: Georgia, serif; font-size: 25px; }
#usotsuki-gallery-app .ug-ranking strong { margin-left: auto; font-size: 25px; white-space: nowrap; }
#usotsuki-gallery-app .ug-ranking small { font-size: 10px; padding-left: 5px; font-weight: normal; }
#usotsuki-gallery-app .ug-error { color: #a33030; text-align: center; margin: 12px 0; }
#usotsuki-gallery-app .ug-error:empty { display: none; }
#usotsuki-gallery-app .ug-debug { padding: 20px; background: #f9e5d4; border: 1px dashed #b66a35; }
#usotsuki-gallery-app .ug-debug pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; }
@media (min-width: 1400px) { #usotsuki-gallery-app .ug-content { padding-top: 60px; } }
@media (max-width: 1000px) { #usotsuki-gallery-app .ug-shell { padding: 0 28px; } #usotsuki-gallery-app .ug-hero-gallery { height: 400px; } #usotsuki-gallery-app .ug-how-grid { gap: 20px; } #usotsuki-gallery-app .ug-setup-layout, #usotsuki-gallery-app .ug-private-layout { gap: 30px; } #usotsuki-gallery-app .ug-answer-grid, #usotsuki-gallery-app .ug-vote-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { #usotsuki-gallery-app .ug-shell { padding: 0 20px; } #usotsuki-gallery-app .ug-header { min-height: 86px; } #usotsuki-gallery-app .ug-brand { font-size: 15px; gap: 8px; } #usotsuki-gallery-app .ug-brand small { font-size: 7px; letter-spacing: .1em; } #usotsuki-gallery-app .ug-logo { font-size: 30px; } #usotsuki-gallery-app .ug-edition { display: none; } #usotsuki-gallery-app .ug-header-right { gap: 3px; } #usotsuki-gallery-app .ug-header-right .ug-quiet { font-size: 11px; padding: 5px; } #usotsuki-gallery-app .ug-round { font-size: 8px; } #usotsuki-gallery-app .ug-round b { font-size: 16px; } #usotsuki-gallery-app .ug-content { padding-top: 30px; } #usotsuki-gallery-app .ug-hero { grid-template-columns: 1fr; gap: 10px; } #usotsuki-gallery-app .ug-hero h1 { font-size: 50px; } #usotsuki-gallery-app .ug-hero-gallery { height: 430px; max-width: 420px; width: 100%; margin: auto; } #usotsuki-gallery-app .ug-how-grid { grid-template-columns: 1fr; gap: 24px; } #usotsuki-gallery-app .ug-setup-layout, #usotsuki-gallery-app .ug-private-layout { grid-template-columns: 1fr; } #usotsuki-gallery-app .ug-note { margin-top: 24px; } #usotsuki-gallery-app .ug-panel { padding: 24px 18px; } #usotsuki-gallery-app .ug-progress { overflow-x: auto; padding-bottom: 8px; gap: 18px; } #usotsuki-gallery-app .ug-private-layout > div:first-child { max-width: 300px; margin: auto; } #usotsuki-gallery-app .ug-private-copy h1 { font-size: 28px; } #usotsuki-gallery-app .ug-discussion-head { flex-direction: column; gap: 0; } #usotsuki-gallery-app .ug-timer { width: 100%; display: flex; align-items: center; justify-content: space-between; min-width: 0; gap: 10px; } #usotsuki-gallery-app .ug-timer b { font-size: 37px; } #usotsuki-gallery-app .ug-answer-grid, #usotsuki-gallery-app .ug-vote-grid { grid-template-columns: 1fr; } #usotsuki-gallery-app .ug-art-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; } #usotsuki-gallery-app .ug-vote-rows { grid-template-columns: 1fr; } #usotsuki-gallery-app .ug-result-block { padding: 20px 15px; } #usotsuki-gallery-app .ug-result-block h2 { font-size: 17px; } #usotsuki-gallery-app .ug-footer { flex-direction: column; gap: 4px; } #usotsuki-gallery-app .ug-actions { align-items: stretch; flex-direction: column; } #usotsuki-gallery-app .ug-button { max-width: 100%; } }
@media (prefers-reduced-motion: reduce) { #usotsuki-gallery-app .ug-button { transition: none; } }
#usotsuki-gallery-app .ug-test-banner { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 10px 16px; margin-bottom: 28px; border: 1px dashed #ac956a; border-radius: 7px; color: #746143; font-size: 11px; letter-spacing: .04em; }
#usotsuki-gallery-app .ug-test-banner .ug-button { min-height: 32px; padding: 6px 10px; font-size: 12px; }
#usotsuki-gallery-app .ug-test-warning { background: #fff0d4; color: #755119; border-left: 3px solid #b88530; padding: 14px 18px; margin: 12px 0 24px; font-size: 13px; }
#usotsuki-gallery-app .ug-test-panel { background: #eef0e4; border: 1px dashed #a5ad91; border-radius: 10px; padding: 28px; }
#usotsuki-gallery-app .ug-test-panel .ug-eyebrow { margin-bottom: 8px; }
#usotsuki-gallery-app .ug-test-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 24px 0 18px; }
#usotsuki-gallery-app .ug-test-field { display: block; min-width: 0; }
#usotsuki-gallery-app .ug-test-field select { display: block; width: 100%; font: inherit; font-size: 14px; color: var(--ug-ink); background: var(--ug-paper); border: 1px solid #cdd1c6; border-radius: 6px; padding: 12px; margin: 6px 0; min-height: 48px; }
#usotsuki-gallery-app .ug-test-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
#usotsuki-gallery-app .ug-test-toolbar { display: flex; flex-wrap: wrap; gap: 10px; }
#usotsuki-gallery-app .ug-test-toolbar .ug-button { background: var(--ug-paper); border-color: var(--ug-line); }
#usotsuki-gallery-app .ug-test-filter { display: flex; gap: 18px; align-items: end; flex-wrap: wrap; margin: 28px 0 36px; padding: 20px; background: #e9ecdf; border-radius: 8px; }
#usotsuki-gallery-app .ug-test-filter .ug-test-field { flex: 1; min-width: 180px; }
#usotsuki-gallery-app .ug-test-filter .ug-button { margin-bottom: 6px; }
#usotsuki-gallery-app .ug-test-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 18px 0; }
#usotsuki-gallery-app .ug-test-metric { background: var(--ug-paper); border: 1px solid var(--ug-line); border-radius: 8px; padding: 18px; }
#usotsuki-gallery-app .ug-test-metric > span { display: block; font-size: 12px; color: var(--ug-muted); }
#usotsuki-gallery-app .ug-test-metric > strong { display: block; font-family: Georgia, "Yu Mincho", serif; font-size: 26px; line-height: 1.5; margin: 8px 0; font-variant-numeric: tabular-nums; }
#usotsuki-gallery-app .ug-test-metric small { display: block; font-family: inherit; font-size: 10px; font-weight: normal; color: var(--ug-muted); }
#usotsuki-gallery-app .ug-test-definitions { margin: 22px 0; font-size: 12px; color: var(--ug-muted); }
#usotsuki-gallery-app .ug-test-definitions summary { color: var(--ug-ink); cursor: pointer; font-weight: bold; }
#usotsuki-gallery-app .ug-test-definitions li { margin: 7px 0; }
#usotsuki-gallery-app .ug-test-leaders { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 26px 0 38px; }
#usotsuki-gallery-app .ug-test-leaders p { font-size: 13px; margin-top: 14px; overflow-wrap: anywhere; }
#usotsuki-gallery-app .ug-test-table { min-width: 720px; }
#usotsuki-gallery-app .ug-test-table small { display: block; color: var(--ug-muted); font-size: 10px; }
#usotsuki-gallery-app .ug-test-three { margin: 18px 0 38px; padding: 18px; background: #e9ecdf; border-radius: 8px; font-size: 13px; }
#usotsuki-gallery-app .ug-test-topics { display: grid; gap: 12px; margin: 20px 0 32px; }
#usotsuki-gallery-app .ug-test-topic { border: 1px solid var(--ug-line); border-radius: 8px; background: var(--ug-paper); }
#usotsuki-gallery-app .ug-test-topic > summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 22px; cursor: pointer; font-size: 12px; list-style: none; }
#usotsuki-gallery-app .ug-test-topic > summary::before { content: '+'; font-size: 22px; color: #9d845b; }
#usotsuki-gallery-app .ug-test-topic[open] > summary::before { content: '−'; }
#usotsuki-gallery-app .ug-test-topic > summary > span:first-of-type { flex: 1; min-width: 0; overflow-wrap: anywhere; }
#usotsuki-gallery-app .ug-test-topic summary small { display: block; font-size: 14px; color: var(--ug-ink); margin-top: 6px; }
#usotsuki-gallery-app .ug-test-topic-status { display: inline-block; border-radius: 4px; padding: 1px 7px; background: #e9ecdf; margin-left: 12px; font-size: 10px; }
#usotsuki-gallery-app .ug-test-topic-body { padding: 0 22px 24px; border-top: 1px solid var(--ug-line); }
#usotsuki-gallery-app .ug-test-topic-body > p:first-child { padding-top: 20px; }
#usotsuki-gallery-app .ug-test-topic-body form { border-top: 1px solid var(--ug-line); margin-top: 20px; padding-top: 20px; }
#usotsuki-gallery-app .ug-test-topic-body form .ug-test-field { margin-bottom: 16px; }
#usotsuki-gallery-app .ug-test-feedback { margin-top: 12px; font-size: 12px; color: #416650; }
#usotsuki-gallery-app .ug-test-round-history > summary { cursor: pointer; font-weight: bold; padding: 16px 0; }
#usotsuki-gallery-app .ug-test-round-history .ug-panel { margin: 12px 0; }
#usotsuki-gallery-app .ug-test-user-note { white-space: pre-wrap; overflow-wrap: anywhere; margin: 12px 0; }
#usotsuki-gallery-app .ug-test-empty { padding: 25px; text-align: center; border: 1px dashed var(--ug-line); border-radius: 8px; color: var(--ug-muted); }
@media (max-width: 1000px) { #usotsuki-gallery-app .ug-test-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } #usotsuki-gallery-app .ug-test-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { #usotsuki-gallery-app .ug-test-banner, #usotsuki-gallery-app .ug-test-heading { align-items: flex-start; flex-direction: column; } #usotsuki-gallery-app .ug-test-fields, #usotsuki-gallery-app .ug-test-leaders { grid-template-columns: 1fr; } #usotsuki-gallery-app .ug-test-panel { padding: 20px 15px; } #usotsuki-gallery-app .ug-test-metric { padding: 12px; } #usotsuki-gallery-app .ug-test-metric > strong { font-size: 22px; } #usotsuki-gallery-app .ug-test-topic > summary { padding: 15px; gap: 10px; } #usotsuki-gallery-app .ug-test-topic-body { padding: 0 15px 20px; } }
#usotsuki-gallery-app .ug-hand-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
#usotsuki-gallery-app .ug-hand-card { position:relative; cursor:pointer; }
#usotsuki-gallery-app .ug-hand-card > span { display:block; padding:10px; border:3px solid transparent; border-radius:12px; background:#fff; }
#usotsuki-gallery-app .ug-hand-card input:checked + span { border-color:#315c4e; background:#e4eee4; }
#usotsuki-gallery-app .ug-hand-card input:focus-visible + span { outline:3px solid #bb7028; outline-offset:3px; }
#usotsuki-gallery-app .ug-hand-card input { position:absolute; top:20px; left:20px; z-index:1; width:20px; height:20px; }
#usotsuki-gallery-app .ug-hand-card img { width:100%; max-height:240px; object-fit:contain; }
#usotsuki-gallery-app .ug-hand-card small { display:block; }
#usotsuki-gallery-app .ug-hand-screen .ug-prompt { margin:20px 0; }
#usotsuki-gallery-app .ug-hand-screen [data-reason-area] { margin:24px 0; }
#usotsuki-gallery-app .ug-reason-guide { padding:20px; margin:20px 0; border-left:4px solid #bc773f; background:#fbf1df; }
#usotsuki-gallery-app .ug-reason-guide h2 { font-size:18px; }
#usotsuki-gallery-app .ug-answer-card .ug-art { margin:12px 0; }
#usotsuki-gallery-app .ug-answer-card img { max-height:260px; width:100%; object-fit:contain; }
#usotsuki-gallery-app .ug-bot-trace { max-height:500px; overflow:auto; white-space:pre-wrap; overflow-wrap:anywhere; }
#usotsuki-gallery-app progress { width:100%; accent-color:#315c4e; }
#usotsuki-gallery-app button:disabled { opacity:.45; cursor:not-allowed; }
@media(max-width:600px) { #usotsuki-gallery-app .ug-hand-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; } }
#usotsuki-gallery-app .ug-vote-person-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
#usotsuki-gallery-app .ug-speech-order { margin:28px 0; padding:22px 28px; background:var(--ug-paper-deep); border:1px solid var(--ug-line); }
#usotsuki-gallery-app .ug-speech-order ol { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px 28px; margin:12px 0 0; padding-left:24px; }
#usotsuki-gallery-app .ug-speech-layout { display:grid; grid-template-columns:minmax(280px,.8fr) minmax(320px,1fr); gap:54px; align-items:start; }
#usotsuki-gallery-app .ug-speech-card { max-width:420px; }
#usotsuki-gallery-app .ug-card-name { min-height:58px; margin:10px 0 16px; text-align:center; overflow-wrap:anywhere; }
#usotsuki-gallery-app .ug-card-name span { display:block; margin-bottom:3px; color:var(--ug-muted); font-size:10px; font-weight:700; letter-spacing:.12em; }
#usotsuki-gallery-app .ug-card-name strong { display:block; color:var(--ug-ink); font-family:var(--ug-serif); font-size:clamp(15px,1.7vw,20px); line-height:1.45; }
#usotsuki-gallery-app .ug-speaker-topic { margin:22px 0; padding:18px 22px; border:1px solid var(--ug-line); background:var(--ug-paper-deep); }
#usotsuki-gallery-app .ug-speaker-topic span { display:block; margin-bottom:7px; color:var(--ug-muted); font-size:12px; font-weight:700; letter-spacing:.14em; }
#usotsuki-gallery-app .ug-speaker-topic strong { display:block; color:var(--ug-ink); font-family:var(--ug-serif); font-size:clamp(20px,2.2vw,28px); line-height:1.45; }
#usotsuki-gallery-app .ug-speech-screen .ug-timer { width:100%; margin-bottom:22px; }
#usotsuki-gallery-app .ug-reaction-note, #usotsuki-gallery-app .ug-speech-warning { padding:20px 24px; margin:16px 0; border:1px solid var(--ug-line); background:var(--ug-paper-deep); }
#usotsuki-gallery-app .ug-reaction-note h2, #usotsuki-gallery-app .ug-speech-warning h2 { margin:0 0 8px; font-size:18px; }
#usotsuki-gallery-app .ug-speech-warning { border-left:4px solid var(--ug-gold); }
#usotsuki-gallery-app .ug-vote-person { display:flex; flex-direction:column; min-width:0; padding:18px; background:var(--ug-paper); border:2px solid var(--ug-line); border-radius:12px; }
#usotsuki-gallery-app .ug-vote-person h2 { font-size:18px; display:flex; align-items:center; gap:8px; margin:0 0 14px; overflow-wrap:anywhere; }
#usotsuki-gallery-app .ug-vote-person .ug-art { margin:0; }
#usotsuki-gallery-app .ug-vote-person img { width:100%; aspect-ratio:4/5; object-fit:contain; }
#usotsuki-gallery-app .ug-vote-reason { flex:1; overflow-wrap:anywhere; padding:12px 0; }
#usotsuki-gallery-app .ug-vote-control { display:flex; flex-wrap:wrap; align-items:center; gap:8px; border-top:1px solid var(--ug-line); padding:16px 0 0; cursor:pointer; }
#usotsuki-gallery-app .ug-vote-control input { width:20px; height:20px; flex:none; }
#usotsuki-gallery-app .ug-vote-selected { display:none; font-size:12px; }
#usotsuki-gallery-app .ug-vote-person:has(input:checked) { border:2px solid #315c4e; box-shadow:0 0 0 2px #315c4e; background:#eef3e9; }
#usotsuki-gallery-app .ug-vote-person:has(input:checked) .ug-vote-selected { display:block; }
#usotsuki-gallery-app .ug-vote-self { padding:14px 0 0; border-top:1px solid var(--ug-line); font-weight:bold; }
#usotsuki-gallery-app .ug-vote-none-symbol { aspect-ratio:4/5; display:grid; place-items:center; background:#e9ebe2; color:#315c4e; font-size:80px; border-radius:8px; }
#usotsuki-gallery-app .ug-result-answer { padding:30px; background:#e7eddf; border-left:5px solid #315c4e; margin-bottom:24px; }
#usotsuki-gallery-app .ug-result-answer h1 { font-size:clamp(24px,3vw,40px); line-height:1.5; }
#usotsuki-gallery-app .ug-result-answer strong { display:block; color:#315c4e; font-size:clamp(32px,5vw,64px); }
#usotsuki-gallery-app .ug-result-prompts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
#usotsuki-gallery-app .ug-result-prompts p { font-size:20px; }
#usotsuki-gallery-app .ug-role-badge { display:inline-block; margin-left:8px; padding:3px 8px; border-radius:10px; font-size:12px; background:#ede0cf; }
#usotsuki-gallery-app .ug-vote-tally { display:flex; flex-wrap:wrap; gap:10px 22px; }
@media(min-width:1300px) { #usotsuki-gallery-app .ug-vote-person-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media(max-width:900px) { #usotsuki-gallery-app .ug-vote-person-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } #usotsuki-gallery-app .ug-speech-layout { grid-template-columns:1fr; gap:24px; } #usotsuki-gallery-app .ug-speech-order ol { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:550px) { #usotsuki-gallery-app .ug-vote-person-grid, #usotsuki-gallery-app .ug-result-prompts { grid-template-columns:1fr; } #usotsuki-gallery-app .ug-result-answer { padding:20px; } }
@media(max-width:700px) { #usotsuki-gallery-app .ug-header-tools { gap:6px; } #usotsuki-gallery-app .ug-audio-controls { padding:5px; gap:5px; } #usotsuki-gallery-app .ug-audio-controls label { grid-template-columns:minmax(48px,64px) 28px; gap:4px; } #usotsuki-gallery-app .ug-audio-controls label > span { display:none; } #usotsuki-gallery-app .ug-audio-toggle { min-height:32px; padding:5px 7px; font-size:9px; } }
@media(max-width:430px) { #usotsuki-gallery-app .ug-brand small { display:none; } #usotsuki-gallery-app .ug-header { flex-wrap:wrap; padding:12px 0; } #usotsuki-gallery-app .ug-header-tools { width:100%; justify-content:space-between; } }
#usotsuki-gallery-app .ug-card-catalog-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
#usotsuki-gallery-app .ug-catalog-card { min-width:0; padding:12px; background:var(--ug-paper); border:1px solid var(--ug-line); border-radius:8px; }
#usotsuki-gallery-app .ug-catalog-card h2 { font-size:14px; }
#usotsuki-gallery-app .ug-catalog-card p { font-size:12px; overflow-wrap:anywhere; }
#usotsuki-gallery-app .ug-catalog-card .ug-art { margin:10px 0; }
#usotsuki-gallery-app .ug-avatar-6 { background:#d8e4ed; }
#usotsuki-gallery-app .ug-avatar-7 { background:#eddbd7; }
@media(max-width:700px) { #usotsuki-gallery-app .ug-card-catalog-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; } }

/* 正体投票: 投票ラベルを候補カードの先頭に置く。ラベル全体（ラジオ含む）がタップ領域。 */
#usotsuki-gallery-app .ug-vote-person-top .ug-vote-control, #usotsuki-gallery-app .ug-vote-person-top .ug-vote-self { order:-1; min-height:48px; margin:-6px -6px 14px; padding:6px 6px 14px; border-top:0; border-bottom:1px solid var(--ug-line); border-radius:8px 8px 0 0; font-size:16px; font-weight:bold; overflow-wrap:anywhere; }
#usotsuki-gallery-app .ug-vote-person-top .ug-vote-control { flex-wrap:nowrap; gap:10px; -webkit-tap-highlight-color:transparent; }
#usotsuki-gallery-app .ug-vote-person-top .ug-vote-control span { flex:1; min-width:0; }
#usotsuki-gallery-app .ug-vote-person-top .ug-vote-control input { width:22px; height:22px; margin:0; }
#usotsuki-gallery-app .ug-vote-person-top .ug-vote-selected { flex:none; }
#usotsuki-gallery-app .ug-vote-person-top .ug-card-name { margin-bottom:0; }

/* Title: choose between pass-and-play and online. */
#usotsuki-gallery-app .ug-modes { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; }
#usotsuki-gallery-app .ug-secondary { background: transparent; color: var(--ug-ink); border-color: var(--ug-ink); text-decoration: none; }
#usotsuki-gallery-app .ug-secondary:hover { background: #e8e9de; }
@media (max-width: 700px) { #usotsuki-gallery-app .ug-modes { flex-direction: column; } #usotsuki-gallery-app .ug-modes .ug-button { width: 100%; } }