/* Welcome-only styling; the board, local setup and online room panels keep their UI. */
.welcome-mode{background:#03132b;color:#edf1f7;min-height:100dvh}
.welcome-mode .welcome-overlay{position:relative;display:block;inset:auto;padding:0;background:#03132b;min-height:100dvh;overflow:visible;backdrop-filter:none}
.welcome-mode .welcome-dialog{display:block;width:100%;max-width:520px;max-height:none;padding:0 18px max(26px,env(safe-area-inset-bottom));margin:0 auto;border:0;border-radius:0;background:#03132b;box-shadow:none;overflow:visible;font-family:Arial,sans-serif}
.welcome-dialog .welcome-nav{position:relative;display:grid;grid-template-columns:44px 1fr 44px;align-items:center;height:64px;padding:4px 0;gap:0;z-index:2}
.welcome-dialog .welcome-back{position:static;display:grid;place-items:center;width:44px;height:44px;min-height:44px;padding:0;font:42px/1 Georgia,serif;color:#f6dfab;text-decoration:none}
.welcome-dialog .welcome-brand{display:flex;flex-direction:column;align-items:center;justify-self:center;gap:0}
.welcome-dialog .welcome-brand img{width:36px;height:36px;object-fit:contain}
.welcome-dialog .welcome-brand .welcome-word{width:69px;height:18px}
.welcome-dialog .welcome-profile{display:grid;place-items:center;height:44px;width:44px;text-decoration:none}
.welcome-dialog .welcome-profile .portrait{width:37px;height:37px;border:1px solid #d8b873;box-shadow:0 0 0 3px #0b2440;overflow:hidden;border-radius:50%;background:#0d2947}
.welcome-dialog .welcome-heading{position:relative;isolation:isolate;text-align:center;margin:0;padding:0 0 24px}
.welcome-dialog .welcome-art{display:block;position:relative;grid-area:auto;height:clamp(194px,56vw,280px);min-height:0;margin:0 -18px;padding:0;border-radius:0;background:none;overflow:visible}
.welcome-dialog .welcome-backdrop{position:absolute;inset:-64px 0 auto;width:100%;height:calc(100% + 156px);object-fit:cover;object-position:center 40%;z-index:-1;mask-image:linear-gradient(#000 71%,transparent)}
.welcome-dialog .welcome-objects{position:absolute;inset:0 3%;overflow:visible}
.welcome-dialog .welcome-objects>img{position:absolute;display:block;object-fit:contain;object-position:center;pointer-events:none;user-select:none;width:43%;height:93%;top:6%;left:-2%;z-index:5;filter:hue-rotate(140deg) drop-shadow(0 10px 9px #0009);transform:rotate(-5deg)}
.welcome-dialog .welcome-objects>img[data-rf-object="1"]{left:20%;height:108%;top:-5%;z-index:6;filter:hue-rotate(0deg) drop-shadow(0 10px 9px #0009);transform:rotate(0deg)}
.welcome-dialog .welcome-objects>img[data-rf-object="2"]{left:40%;top:8%;height:92%;z-index:3;filter:hue-rotate(260deg) drop-shadow(0 10px 9px #0009);transform:rotate(4deg)}
.welcome-dialog .welcome-objects>img[data-rf-object="3"]{left:60%;top:9%;height:86%;z-index:2;filter:hue-rotate(200deg) drop-shadow(0 10px 9px #0009);transform:rotate(7deg)}
.welcome-dialog .welcome-heading h2{font:700 clamp(35px,10.4vw,49px)/1.09 Georgia,serif;letter-spacing:.025em;color:#f4d994;text-shadow:0 2px 0 #79562e,0 4px 10px #000;margin:6px 0 0;text-transform:uppercase}
.welcome-dialog .welcome-heading h2 br{display:block}
.welcome-dialog .welcome-heading h2:focus{outline:none}
.welcome-dialog .welcome-heading p{font:12px/18px Arial;color:#becfe4;letter-spacing:.015em;margin:12px 0 0}
.welcome-dialog .menu-card{width:100%;min-height:74px;display:flex;align-items:center;gap:12px;border:1px solid #9c875b;border-radius:10px;background:linear-gradient(120deg,#163858,#0b223f);box-shadow:inset 0 0 0 2px #304a6366,0 3px 10px #0004;padding:12px 13px;margin:12px 0;color:#f0e1bc}
.welcome-dialog .menu-card:first-child{margin-top:0}
.welcome-dialog .menu-card.gold{min-height:75px;background:linear-gradient(#f5dc99,#c0964f);border-color:#f2d58f;color:#1e2a3a;box-shadow:inset 0 0 0 2px #b6915377,0 3px 10px #0005}
.welcome-dialog .menu-card.green{background:linear-gradient(#23614c,#103e37);border-color:#b49c63;box-shadow:inset 0 0 0 2px #46746655,0 3px 10px #0004}
.welcome-dialog .menu-card b{font:600 20px/24px Arial;letter-spacing:0}
.welcome-dialog .menu-card small{font:11px/16px Arial;margin:4px 0 0;color:#bacce2;text-align:left;white-space:normal}
.welcome-dialog .menu-card.gold small{color:#394257}
.welcome-dialog .menu-card.green small{color:#c0d6c9}
.welcome-dialog .menu-card>span:last-child{font:30px/1 Georgia;color:inherit;opacity:.9}
.welcome-dialog .menu-icon{display:grid;place-items:center;flex:none;width:42px;min-width:42px;height:43px}
.welcome-dialog .menu-icon img{width:100%;height:100%;object-fit:contain}
.welcome-dialog .menu-card.green .menu-icon img{filter:hue-rotate(200deg)}
.welcome-dialog .join-row{display:flex;gap:0;margin:12px 0 17px;border:1px solid #8b7958;border-radius:9px;background:#0a203b;box-shadow:inset 0 0 0 2px #30466155;overflow:hidden}
.welcome-dialog .join-row input{min-width:0;min-height:50px;flex:1;border:0;border-radius:0;background:none;padding:12px 14px;color:#f3e3bd;font:15px Arial;letter-spacing:.025em}
.welcome-dialog .join-row input::placeholder{text-transform:none;color:#b5c3d6}
.welcome-dialog .join-row button{flex:none;min-width:84px;min-height:50px;border:0;border-left:1px solid #89764f;border-radius:0;background:linear-gradient(#183b5b,#102d49);font:600 17px Arial;color:#f0ddad;padding:10px 15px}
.welcome-dialog .lobby-tools{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin:18px 0 0}
.welcome-dialog .lobby-tools button{display:flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:9px 7px;border:1px solid #526984;border-radius:9px;background:linear-gradient(#132d4b,#092039);color:#cedaea;font:14px Arial;box-shadow:inset 0 0 0 2px #243b5255}
.welcome-dialog .lobby-tools svg{width:18px;height:18px;flex:none;color:#dcc693}
.welcome-dialog .recent-room,.welcome-dialog [data-action="continue"]{font:13px Arial;min-height:46px;border:1px solid #887951;border-radius:9px;background:#102b47;color:#ebd29c;margin:10px 0;width:100%;padding:9px}
.welcome-dialog .menu-status{font:12px/18px Arial;margin:10px 0;color:#f3d49c}
.welcome-dialog .menu-status:empty{display:none}
.welcome-dialog :focus-visible{outline:3px solid #a9d6ff;outline-offset:3px}
.welcome-dialog .join-row:focus-within{outline:3px solid #a9d6ff;outline-offset:3px}
.welcome-dialog .join-row input:focus{outline:none}
body:has(.welcome-mode){background:#03132b}
@media(max-width:370px){.welcome-mode .welcome-dialog{padding-right:14px;padding-left:14px}.welcome-dialog .welcome-art{margin:0 -14px}.welcome-dialog .menu-card{gap:9px;padding:12px 10px}.welcome-dialog .menu-card b{font-size:18px}.welcome-dialog .menu-card small{font-size:10px}.welcome-dialog .menu-icon{width:35px;min-width:35px;height:38px}.welcome-dialog .welcome-heading p{font-size:11px}}