.room-gate { margin:14px 0 20px; padding:16px; background:#e8f7ef; border-radius:14px; color:#315b4c; }
.room-gate strong { display:block; font-size:21px; margin-bottom:7px; }
.room-gate p { margin-bottom:12px; line-height:1.65; }
.room-gate button { min-height:44px; }
#roomGateActions { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.invite-layout { display:grid; grid-template-columns:minmax(0,1fr) 240px; gap:28px; align-items:center; text-align:left; }
.invite-copy { min-width:0; }
.invite-copy h2 { margin-bottom:10px; }
.invite-panel .seat-count { color:#31664d; font-weight:850; }
.invite-actions { display:flex; flex-wrap:wrap; gap:10px; }
.invite-art img { width:100%; height:auto; display:block; border-radius:8px; -webkit-touch-callout:default; user-select:auto; }
.invite-art p { text-align:center; font-size:12px; line-height:1.6; margin:8px 0 0; }
#inviteStatus, #shareStatus { font-size:14px; line-height:1.6; min-height:1.6em; margin:12px 0; }
.invite-copy details { margin-top:12px; }
.invite-copy summary { cursor:pointer; min-height:44px; padding:10px 0; font-weight:750; }
#inviteManualText, #shareManualText { width:100%; min-height:126px; padding:12px; border:2px solid #91b9a7; border-radius:8px; resize:vertical; font:inherit; font-size:14px; background:#fff; color:#305749; }
.result-share-actions { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin:20px 0 8px; grid-column:1/-1; }
.result-share-actions .button { min-width:min(150px,100%); max-width:100%; }
.result-share-hint, #resultShareStatus { text-align:center; font-size:14px; color:#46675a; grid-column:1/-1; }
.result-share-hint { margin:0 0 16px; }
.share-dialog { color:#305749; background:#fffdf8; padding:20px; border:0; border-radius:16px; width:min(560px,calc(100% - 24px)); max-height:calc(100dvh - 24px); overflow:auto; box-shadow:0 16px 60px #234f4659; }
.share-dialog::backdrop { background:#163c32aa; }
.share-dialog:not([open]) { display:none; }
.share-dialog .share-guide-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.share-guide-head h2 { font-size:23px; margin:0; }
#closeShare { min-width:56px; min-height:44px; flex:none; }
#shareSteps { line-height:1.8; font-size:15px; margin:14px 0; }
#shareImage { display:block; width:min(100%,360px); height:auto; margin:auto; -webkit-touch-callout:default; user-select:auto; }
.press-image-hint { text-align:center; font-weight:800; color:#395e50; margin:20px 0 12px; }
.share-guide-actions { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.share-guide-actions button { min-height:44px; }
.share-dialog :focus-visible, .invite-panel :focus-visible, .room-gate :focus-visible { outline:3px solid #287e69; outline-offset:3px; }
@media(max-width:620px) {
  .invite-layout { grid-template-columns:minmax(0,1fr); gap:18px; }
  .invite-art { width:min(250px,100%); margin:auto; }
  .invite-actions .button { width:100%; }
  .result-share-actions { gap:8px; }
  .result-share-actions .button { flex:1; min-width:0; padding:12px 8px; }
  .share-dialog { padding:16px; }
  .share-guide-actions .button { width:100%; }
  .share-guide-head h2 { font-size:21px; }
}

.invite-panel { max-width:900px; }
.result { grid-template-areas:"result-heading result-image" "result-sharing result-image" "result-actions result-image" "result-foot result-image"; grid-template-rows:auto auto auto 1fr; }
.result-sharing { grid-area:result-sharing; min-width:0; }
@media(max-width:620px) { .result { grid-template-areas:"result-heading" "result-sharing" "result-image" "result-actions" "result-foot"; grid-template-rows:auto; } }

#shareSaveHelp, #shareDownloadHelp { line-height:1.7; }
.share-download-fallback { margin-top:20px; padding-top:8px; border-top:1px solid #d1e4d9; }
.share-download-fallback summary { cursor:pointer; min-height:44px; padding:12px 0; line-height:1.5; color:#395e50; font-weight:700; }
#shareImage { -webkit-user-select:auto; touch-action: auto; }
#shareImage::selection { background:#cdeee0; }

@media(max-width:620px) { #shareImage { width:auto; max-width:100%; max-height:58svh; object-fit:contain; } }

/* Discrete charge feedback uses the same 25 / 75 thresholds as the server. */
.feedback-controls { display:flex; gap:14px; align-items:center; margin:-4px 0 10px; flex-wrap:wrap; }
.feedback-controls .roomlink { min-height:44px; padding:6px 4px; color:#315e4f; }
.kickoff-notice { margin:8px 0 14px; padding:12px 16px; background:#e3f4e9; color:#23533f; border-radius:12px; text-align:center; font-weight:850; }
.feedback-sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.charge-stages { display:grid; grid-template-columns:1fr 2fr 1fr; gap:3px; margin:7px 0 0; font-size:12px; line-height:1.5; text-align:center; color:#4c6557; }
.charge-stages span { padding:3px 0; border-radius:5px; }
.charge-stages .active { font-weight:900; color:#214b37; background:#cee9d8; }
.charge-stages [data-charge-stage="1"].active { background:#ffdda0; color:#624014; }
.charge-stages [data-charge-stage="2"].active { background:#ffbdab; color:#702d20; }
.segmented-power { position:relative; }
.segmented-power::before, .segmented-power::after { content:""; position:absolute; z-index:1; top:0; bottom:0; width:2px; background:#fffdf8; }
.segmented-power::before { left:25%; } .segmented-power::after { left:75%; }
.power-track [data-power-stage="0"] { background:#73ba91; }
.power-track [data-power-stage="1"] { background:#e8b855; }
.power-track [data-power-stage="2"] { background:#eb8d73; }
.charge-button[data-power-stage="0"] { border-color:#73ba91; }
.charge-button[data-power-stage="1"] { border-color:#e8b855; }
.charge-button[data-power-stage="2"] { border-color:#eb8d73; }
@media(max-width:620px) {
  .charge-side .charge-stages { font-size:11px; margin-top:5px; }
  .charge-side .charge-button[data-power-stage="0"] { border-color:#73ba91; }
  .charge-side .charge-button[data-power-stage="1"] { border-color:#e8b855; }
  .charge-side .charge-button[data-power-stage="2"] { border-color:#eb8d73; }
}

.sound-status { color:#46675a; font-size:13px; line-height:1.6; margin:0 0 12px; }