/* A quiet paper form: one decision row, clear fields and one primary action. */
.dh-dialog.dh-room-dialog { width: min(550px, 100%); padding: 32px; border: 1px solid #c8b993; border-radius: 12px; background: linear-gradient(145deg, #fffdf6ed, #fff7e9ed), url('/duel/hub-comic-v1/paper.webp') center / 640px; box-shadow: 0 24px 80px #020e295c, 0 1px 0 #fff9e8 inset; animation: dh-room-appear .22s ease-out both; }
.dh-room-dialog > h2 { margin: 0 42px 9px 0; font: 900 34px/1.12 'Fraunces', Georgia, serif; letter-spacing: -.04em; color: #142b42; }
.dh-room-dialog .dh-dialog-close { width: 40px; height: 40px; top: 23px; right: 23px; border: 1px solid transparent; border-radius: 7px; color: #6a737c; background: transparent; transition: background .15s, color .15s; }
.dh-room-dialog .dh-dialog-close:hover { background: #eee6d5; color: #17334b; }
.dh-room-intro { margin: 0 15px 24px 0; color: #6a7480; font-size: 13px; line-height: 1.6; }
.dh-room-intro strong { color: #2e485e; }
.dh-room-overview { display: grid; grid-template-columns: 1.1fr 1fr; padding: 15px 0; border: 1px solid #e4dac5; border-radius: 8px; background: #f2eddf66; }
.dh-room-overview > div { display: flex; gap: 11px; align-items: center; min-width: 0; padding: 0 15px; }
.dh-room-overview > div + div { border-left: 1px solid #ded3ba; }
.dh-room-overview img { flex: none; width: 38px; height: 38px; object-fit: contain; }
.dh-room-overview span { min-width: 0; }
.dh-room-overview small { display: block; margin-bottom: 4px; color: #8b7b5c; font-size: 9px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.dh-room-overview strong { display: block; color: #243b50; font-size: 13px; line-height: 1.35; overflow-wrap: anywhere; }
.dh-room-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 24px 0; }
.dh-room-account-fields { grid-template-columns: 1fr; }
.dh-room-dialog .field { margin: 0; min-width: 0; }
.dh-room-dialog .field-label { display: flex; align-items: baseline; gap: 6px; font-size: 12px; color: #364c60; font-weight: 700; margin-bottom: 8px; }
.dh-room-dialog .field-label em { font-size: 10px; font-weight: 400; color: #92958e; }
.dh-room-dialog input:not([type="checkbox"]) { min-width: 0; height: 46px; padding: 11px 12px; border: 1px solid #cfc9ba; border-radius: 6px; color: #233c54; background: #fffdf8; font-size: 13px; transition: border-color .15s, box-shadow .15s; }
.dh-room-dialog input::placeholder { color: #9b9e9c; }
.dh-room-dialog input:not([type="checkbox"]):focus { outline: none; border-color: #467b9f; box-shadow: 0 0 0 3px #397eae1c; }
.dh-room-dialog .dh-room-private { position: relative; display: flex; justify-content: space-between; gap: 16px; padding: 17px 0; margin: 0 0 24px; border-top: 1px solid #e5dcc9; border-bottom: 1px solid #e5dcc9; }
.dh-room-private .toggle-text { flex: 1; }
.dh-room-dialog .dh-room-private strong { color: #33495a; font-size: 13px; font-weight: 700; }
.dh-room-dialog .dh-room-private small { display: block; color: #8b918f; font-size: 11px; margin-top: 4px; }
.dh-room-private .toggle-ui { width: 40px; height: 24px; background: #d8d9d2; box-shadow: 0 1px 2px #223b4914 inset; }
.dh-room-private .toggle-ui::after { background: #fffef8; box-shadow: 0 1px 3px #1a314326; }
.dh-room-private input:checked + .toggle-ui { background: #e6bb4b; }
.dh-room-private input:focus-visible + .toggle-ui { outline: 3px solid #467b9f; outline-offset: 4px; }
.dh-room-dialog .dh-room-submit { position: relative; isolation: isolate; overflow: visible; min-height: 50px; gap: 12px; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: #26364a; font-size: 15px; font-weight: 900; transition: translate .15s; }
.dh-room-submit::before, .dh-room-submit::after { content: ''; position: absolute; pointer-events: none; clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px); }
.dh-room-submit::before { inset: 0 0 -3px; z-index: -2; background: #344350; }
.dh-room-submit::after { inset: 2px; z-index: -1; background: linear-gradient(165deg, #ffe5a1, #f3c757); box-shadow: 0 0 0 1px #fff0b1 inset; }
.dh-room-submit svg { width: 19px; height: 19px; }
.dh-room-submit:focus-visible, .dh-room-dialog .dh-dialog-close:focus-visible { outline: 3px solid #467b9f; outline-offset: 4px; }
.dh-room-dialog .dh-room-submit:active { translate: 0 2px; }
.dh-room-note { margin: 13px 0 0; text-align: center; font-size: 11px; line-height: 1.5; color: #8b918e; }
@media (hover: hover) and (pointer: fine) { .dh-room-dialog .dh-room-submit:hover { translate: 0 -1px; } .dh-room-submit:hover::after { filter: brightness(1.04); } }
@keyframes dh-room-appear { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 480px) {
  .dh-dialog.dh-room-dialog { padding: 24px 22px; border-radius: 10px; }
  .dh-room-dialog > h2 { font-size: 30px; }
  .dh-room-dialog .dh-dialog-close { top: 16px; right: 14px; }
  .dh-room-intro { font-size: 12px; margin-bottom: 20px; }
  .dh-room-overview { grid-template-columns: 1fr; padding: 0 14px; }
  .dh-room-overview > div { padding: 12px 0; }
  .dh-room-overview > div + div { border-left: 0; border-top: 1px solid #e3d8c1; }
  .dh-room-overview img { width: 32px; height: 32px; }
  .dh-room-fields { grid-template-columns: 1fr; gap: 17px; margin: 21px 0; }
  .dh-room-dialog .dh-room-private { padding-block: 15px; margin-bottom: 22px; }
  .dh-room-dialog .dh-room-submit { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) { .dh-dialog.dh-room-dialog { animation: none; } .dh-room-dialog *, .dh-room-dialog *::after { transition: none !important; } }