/* Reconnect screen: the game stops behind this card while the server is out of reach. */
#connection-dialog{box-sizing:border-box;width:min(460px,calc(100vw - 24px));max-width:none;margin:auto;padding:0;border:0;background:transparent;color:#4a3526;font:14px/1.55 'Nunito Sans','Noto Sans Thai',Tahoma,sans-serif;overflow:visible}
#connection-dialog[open]{display:block;animation:connection-in .22s ease-out}
#connection-dialog::backdrop{background:radial-gradient(circle at 50% 45%,#0c1a12a8,#04080ce6);backdrop-filter:blur(4px) grayscale(.5)}
#connection-dialog *,#connection-dialog *::before,#connection-dialog *::after{box-sizing:border-box}
#connection-dialog :focus-visible{outline:3px solid #f0c75e;outline-offset:2px}
.connection-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;padding:26px 24px 22px;border-radius:22px;text-align:center;background:radial-gradient(90% 60% at 50% 0,#fffaf0,transparent 70%),#f5e9d2;box-shadow:0 0 0 2px #b8955e,0 0 0 8px #2f5b3e,0 0 0 10px #c9a55a,0 28px 80px #000a}
.connection-emblem{position:relative;width:76px;height:76px;margin-bottom:4px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#fffdf6,#ecdcc0);box-shadow:inset 0 0 0 3px #d9bd8a,0 4px 10px #5a3d2633}
.connection-emblem i{position:absolute;left:50%;bottom:22px;border:4px solid transparent;border-top-color:#8b7358;border-radius:50%;transform:translateX(-50%);opacity:.25;animation:connection-wave 1.6s ease-in-out infinite}
.connection-emblem i:nth-child(1){width:18px;height:18px;bottom:24px;animation-delay:0s}
.connection-emblem i:nth-child(2){width:34px;height:34px;bottom:16px;animation-delay:.2s}
.connection-emblem i:nth-child(3){width:50px;height:50px;bottom:8px;animation-delay:.4s}
.connection-emblem b{position:absolute;left:50%;bottom:20px;width:9px;height:9px;border-radius:50%;background:#8b7358;transform:translateX(-50%)}
#connection-dialog[data-state=lost] .connection-emblem b,#connection-dialog[data-state=offline] .connection-emblem b{background:#c0533b}
#connection-dialog[data-state=replaced] .connection-emblem i{animation:none;opacity:.15}
#connection-dialog[data-state=connecting] .connection-emblem i{border-top-color:#3f7a31}
#connection-title{margin:0;font-size:21px;font-weight:900;color:#2f5b3e}
#connection-dialog[data-state=lost] #connection-title,#connection-dialog[data-state=offline] #connection-title{color:#9a3f2b}
#connection-message{margin:0;color:#5f4a37;max-width:380px}
.connection-progress{min-height:22px;margin:2px 0 6px;padding:2px 12px;border-radius:999px;background:#ece2cf;color:#6d5540;font-size:12.5px;font-weight:700}
.connection-progress:empty{visibility:hidden}
.connection-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;width:100%}
.connection-actions button{font:inherit;cursor:pointer}
.connection-primary{min-height:48px;padding:6px 26px;border:2px solid #d8ae5f;border-radius:14px;background:linear-gradient(#468257,#2c5a3b 60%,#244c31);color:#fff6df;font-size:16px!important;font-weight:900;text-shadow:0 2px 0 #183221;box-shadow:inset 0 1px #7fb08a,0 4px 0 #183221}
.connection-primary:hover:not(:disabled){filter:brightness(1.08)}
.connection-primary:disabled{border-color:#cbb99b;background:#ddd0bb;color:#8b7a6a;text-shadow:none;box-shadow:none;cursor:default}
.connection-secondary{min-height:44px;padding:0 16px;border:1px solid #cfae79;border-radius:12px;background:#fff7e8;color:#6b4f35;font-weight:800}
.connection-secondary:hover{background:#fdf0da}
@keyframes connection-wave{0%,100%{opacity:.18}50%{opacity:.9}}
@keyframes connection-in{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){#connection-dialog[open],.connection-emblem i{animation:none}.connection-emblem i{opacity:.5}}
@media (max-height:420px){.connection-card{padding:14px 18px 14px;gap:4px}.connection-emblem{width:52px;height:52px}.connection-emblem i:nth-child(3){display:none}#connection-title{font-size:18px}.connection-primary{min-height:40px}}
/* 2026-10-12 calm reconnect pill: non-blocking, top centre, while the page retries for up to 12 s */
#connection-pill{position:fixed;top:12px;left:50%;transform:translateX(-50%);z-index:1200;display:flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;background:rgba(24,18,12,.86);border:1px solid #c9a35d;color:#f6e7c4;font:600 13px/1.3 "Noto Sans Thai",Tahoma,sans-serif;box-shadow:0 2px 10px rgba(0,0,0,.45);pointer-events:none}
#connection-pill[hidden]{display:none}
#connection-pill i{width:9px;height:9px;border-radius:50%;background:#e2b356;animation:connection-pill-pulse 1s ease-in-out infinite}
@keyframes connection-pill-pulse{0%,100%{opacity:.35}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){#connection-pill i{animation:none}}
body.photo-mode #connection-pill{display:none}