/* Shared nautical popup surfaces. Deliberately scoped to the native dialog. */
#modal {
  --ink: #35200e; --muted: #654b2e; --gold: #80501d; --line: #92642b44;
  color: var(--ink); width: min(590px, calc(100% - 40px)); max-width: 960px;
  max-height: calc(100dvh - 48px); margin: auto; padding: 0;
  border: 8px ridge #9a703b; border-radius: 20px;
  background: repeating-linear-gradient(3deg,#0000 0 9px,#140b0740 10px 12px),linear-gradient(100deg,#2e190e,#704529 45%,#301b10);
  box-shadow: 0 0 0 3px #24180e,0 0 0 6px #ba8d4d,0 25px 90px #000b,inset 0 0 0 3px #e4b76b55;
  overflow: auto; overscroll-behavior: contain; scrollbar-color: #9b713e #e3c18b;
}
#modal::backdrop { background:#07141a99; backdrop-filter:blur(4px); }
#modal #modal-content { position:relative; padding:14px; }
#modal .popup-brand { position:relative; z-index:1; display:flex; justify-content:center; height:120px; margin:0 40px -17px; background:url('assets/ui/ui-header-wood.webp') center 75%/100% 115% no-repeat; }
#modal .popup-brand img { width:260px; max-width:100%; height:140px; object-fit:contain; margin-top:-8px; filter:drop-shadow(0 5px 3px #0007); }
#modal .popup-paper { padding:38px 30px 30px; background:url('assets/ui/ui-panel-parchment.webp') center/100% 100% no-repeat; min-height:230px; }
#modal .popup-heading { text-align:center; margin:0 0 19px; }
#modal .eyebrow { color:#76501f; font-size:10px; font-weight:800; letter-spacing:2px; margin:0 0 9px; }
#modal h2 { font:bold clamp(26px,3.4vw,38px)/1.14 Georgia,serif; color:#351b0b; margin:0; letter-spacing:-.6px; text-wrap:balance; }
#modal p,#modal label,#modal .setting-row small { color:#5a4024; }
#modal p { font-size:14px; line-height:1.6; }
#modal .close { position:absolute; z-index:3; right:12px; top:12px; width:48px; height:48px; border-radius:50%; border:4px double #d8ad62; color:#ffd77d; font:bold 35px/1 Georgia,serif; background:radial-gradient(circle at 40% 30%,#674321,#29170b); box-shadow:0 3px 6px #0008,inset 0 0 0 2px #221309; text-shadow:0 2px 2px #000; }
#modal .close:hover { color:#fff2cf; filter:brightness(1.15); }
#modal .btn { color:#fff0ca; background: #4d2e19 url('assets/ui/ui-button-wood.webp') center/100% 165% no-repeat; border:1px solid #8c5c2a; border-radius:8px; min-height:54px; padding:13px 22px; font-weight:800; text-shadow:0 1px 2px #291006; box-shadow:0 3px 4px #42271244; }
#modal .btn.primary { color:#35200d; background:#eab64b url('assets/ui/ui-button-gold.webp') center/100% 165% no-repeat; border-color:#9e6d27; text-shadow:0 1px #ffe7a3; }
#modal .btn:hover { filter:brightness(1.1); }
#modal .note { background:#b6843120; border:1px solid #9b6b2730; border-radius:5px; padding:12px 14px; font-size:12px; color:#644727; }
#modal select { color:#422a16; background:#fff5d6; border:1px solid #a77b40; box-shadow:inset 0 2px 4px #70431618; min-height:48px; }
#modal label { font-size:13px; font-weight:700; }
#modal .setting-row { padding:8px 0 18px; border-bottom:1px solid #9a713333; }
#modal .setting-row small { font-weight:400; }
#modal .setting-row input { accent-color:#7b4d20; flex-shrink:0; }
#modal .target { min-height:48px; border:1px solid #a8793e; background:#ffefc580; color:#4a2e14; }
#modal .target[aria-pressed=true] { border:2px solid #77501b; background:#e6bb60; box-shadow:inset 0 0 0 2px #fff1be; font-weight:700; }
#modal .target small,#modal .room-code strong,#modal .pill,#modal .detail-art,#modal .rules-step>b { color:#78501f; }
#modal .room-code,#modal .pill { border-color:#986d35; }
#modal .log li { color:#654a2b; border-color:#99703e44; font-size:13px; }
#modal .log strong { color:#3f2814; }
#modal .rules-enlarged-card { max-height:49dvh; filter:drop-shadow(0 5px 6px #4c2b1855); }
#modal :is(button,select,input):focus-visible { outline:3px solid #00687c; outline-offset:4px; }
#modal #modal-title:focus { outline:none; }
#modal[data-popup="play"] { width:min(960px,calc(100% - 48px)); }
#modal[data-popup="play"] .popup-brand { height:160px; margin:-1px 20% -25px; }
#modal[data-popup="play"] .popup-brand img { width:350px; height:182px; }
#modal[data-popup="play"] .popup-paper { padding:45px 33px 27px; }
#modal[data-popup="play"] .popup-heading { margin-bottom:8px; }
#modal[data-popup="play"] .eyebrow { display:none; }
#modal[data-popup="play"] h2 { text-transform:uppercase; font-size:clamp(28px,3.7vw,45px); letter-spacing:.2px; }
#modal .popup-intro { text-align:center; font:18px/1.4 Georgia,serif; color:#4a2d14; margin-bottom:8px; }
#modal .popup-divider { display:flex; align-items:center; justify-content:center; gap:15px; margin:6px auto 17px; width:45%; color:#795020; }
#modal .popup-divider:before,#modal .popup-divider:after { content:''; flex:1; height:1px; background:linear-gradient(90deg,transparent,#865b2b); }
#modal .popup-divider:after { transform:rotate(180deg); }
#modal .voyage-choices { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; margin-top:0; }
#modal .voyage-choice { padding:0; display:flex; flex-direction:column; min-width:0; text-align:center; border:5px ridge #805027; border-radius:12px; overflow:hidden; background:#402516; box-shadow:0 5px 7px #4d2b1866; transition:transform .15s,filter .15s; }
#modal .voyage-choice:hover { transform:translateY(-3px); filter:brightness(1.06); }
#modal .voyage-art { display:block; width:100%; height:auto; aspect-ratio:1.66; object-fit:cover; }
#modal .voyage-label { position:relative; display:flex; align-items:center; justify-content:center; gap:10px; width:100%; min-height:88px; padding:14px 13px; background:#eab34e url('assets/ui/ui-button-gold.webp') center/103% 165% no-repeat; color:#38200d; text-shadow:0 1px #ffe7a3; }
#modal .voyage-label strong { display:block; font:bold clamp(19px,2.2vw,27px)/1.12 Georgia,serif; text-transform:uppercase; }
#modal .voyage-label small { display:block; margin-top:5px; font:14px/1.3 Georgia,serif; opacity:1; }
#modal .voyage-symbol { display:grid; place-items:center; flex:0 0 42px; width:42px; height:42px; padding:9px; border:3px double #d9ae5e; border-radius:50%; color:#ffe2a1; background:#4b2d17; box-shadow:0 2px 3px #4a2c1555; }
#modal .voyage-symbol svg { width:100%; height:100%; }
#modal .popup-preview { background:none; border:0; padding:0; text-align:center; margin:22px 4px 0; font:14px/1.45 Georgia,serif; }
#modal .popup-preview span { font:bold 20px Georgia,serif; margin-right:5px; }
@media(max-width:600px) {
  #modal,#modal[data-popup="play"] { width:calc(100% - 26px); max-height:calc(100dvh - 32px); border-width:5px; border-radius:13px; }
  #modal #modal-content { padding:7px; }
  #modal .popup-brand { height:93px; margin:0 28px -10px; }
  #modal .popup-brand img { width:210px; height:114px; }
  #modal .popup-paper { padding:30px 20px 26px; }
  #modal .close { width:44px; height:44px; top:8px; right:8px; font-size:30px; }
  #modal[data-popup="play"] .popup-brand { height:115px; margin:0 30px -14px; }
  #modal[data-popup="play"] .popup-brand img { width:260px; height:137px; }
  #modal[data-popup="play"] .popup-paper { padding:32px 17px 28px; }
  #modal[data-popup="play"] h2 { font-size:28px; }
  #modal .popup-intro { font-size:16px; }
  #modal .voyage-choices { grid-template-columns:1fr; gap:18px; }
  #modal .voyage-art { aspect-ratio:1.95; }
  #modal .voyage-label { min-height:79px; padding:13px 10px; }
  #modal .voyage-label strong { font-size:22px; }
  #modal .voyage-label small { font-size:13px; }
  #modal .voyage-symbol { flex-basis:38px; width:38px; height:38px; padding:8px; }
  #modal .popup-preview { font-size:12px; margin-top:19px; }
  #modal .modal-actions { flex-wrap:wrap; }
  #modal .modal-actions .btn { min-width:110px; }
  #modal .target-grid { grid-template-columns:1fr; }
}
@media(prefers-reduced-motion:reduce) { #modal .voyage-choice { transition:none; } #modal .voyage-choice:hover { transform:none; } }
/* Keep both illustrated routes near at hand on narrow, short displays. */
@media(max-width:600px) {
  #modal .popup-brand,#modal[data-popup="play"] .popup-brand { height:70px; margin:0 36px -8px; }
  #modal .popup-brand img,#modal[data-popup="play"] .popup-brand img { width:190px; height:80px; margin-top:-2px; }
  #modal[data-popup="play"] .popup-paper { padding:26px 17px 22px; }
  #modal[data-popup="play"] h2 { font-size:26px; }
  #modal .voyage-art { height:110px; aspect-ratio:auto; }
  #modal .voyage-label { min-height:73px; padding:11px 9px; }
  #modal .voyage-label strong { font-size:21px; }
  #modal .voyage-label small { font-size:12px; }
  #modal .voyage-choices { gap:13px; }
  #modal .popup-divider { margin-bottom:12px; }
  #modal .popup-preview { margin-top:14px; }
}

/* Readable pale backing also covers the transparent margins of the parchment art. */
#modal .popup-paper { background-color:#f2dfb5; background-size:108% 112%; border-radius:10px; }
#modal .voyage-label { min-height:100px; padding:20px 22px; }
#modal .voyage-label>span { display:block; width:100%; min-width:0; }
#modal .voyage-label strong { font-size:25px; line-height:1.18; }
#modal .voyage-label small { font-size:14px; line-height:1.4; margin-top:7px; }
#modal .popup-preview { padding:0 4px 8px; }
@media(max-width:600px) {
  #modal[data-popup="play"] .popup-paper { padding:27px 17px 30px; }
  #modal .voyage-label { min-height:96px; padding:18px 17px; }
  #modal .voyage-label strong { font-size:17px; line-height:1.2; }
  #modal .voyage-label small { font-size:14px; line-height:1.35; margin-top:7px; }
  #modal .popup-preview { padding:2px 4px 9px; font-size:13px; line-height:1.5; }
}
@media(max-width:600px) {
  #modal .voyage-art { height:120px; object-position:center 28%; }
}

/* Native dialogs live in the top layer, so they need their own fullscreen exit. */
#modal .dialog-fullscreen { position:absolute; z-index:3; left:12px; top:12px; width:48px; height:48px; padding:0; display:grid; place-items:center; border:4px double #d8ad62; border-radius:50%; color:#ffd77d; background:radial-gradient(circle at 40% 30%,#674321,#29170b); box-shadow:0 3px 6px #0008,inset 0 0 0 2px #221309; }
#modal .dialog-fullscreen svg { width:22px; height:22px; }
#modal .dialog-fullscreen:hover { color:#fff2cf; filter:brightness(1.15); }
@media(max-width:600px) { #modal .dialog-fullscreen { width:44px; height:44px; top:8px; left:8px; } }