/* Guest forms share the illustrated town's frame and compact typography. */
.cq-titlescene:after,.cq-vw-newgame:after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 15%,#070a10aa 100%)}
.cq-logo{top:39px}.cq-logo img{width:320px;height:92px;filter:drop-shadow(0 3px 8px #0009)}
#cq-tbox,#cq-nbox{box-shadow:none}
#cq-tbox>.cq-ttl,#cq-nbox>.cq-ttl{height:25px;line-height:25px;color:#eed19b;text-align:center;font-size:7.2px;letter-spacing:1px}
#cq-tbox{left:200px;top:151px;width:240px;height:144px}
#cq-tbox .cq-bd{left:18px;right:18px;top:39px}
#cq-tbox .cq-row{margin-bottom:9px;gap:8px}
#cq-tbox .cq-lbl{width:43px;flex:none;color:#cbbca3}
#cq-tbox .cq-w{width:auto;flex:1;min-width:0}
#cq-tbox .cq-end{margin-top:14px;gap:8px}
#cq-tbox .cq-end>*{flex:1;margin:0}
#cq-tbox .cq-in,#cq-nbox .cq-in{height:15px;background:#0b0d10bb;border:1px solid #79613c;border-radius:2px;padding:0 8px;color:#f2e5ce;box-shadow:inset 0 2px 4px #0006;font-size:7.2px}
#cq-tbox .cq-in:focus,#cq-nbox .cq-in:focus{border-color:#dfb66b;box-shadow:0 0 0 1px #dfb66b44;outline:none}
#cq-nbox{left:160px;top:46px;width:320px;height:268px}
#cq-nbox .cq-bd{left:20px;right:20px;top:36px;bottom:12px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#aa844c #17120e}
#cq-nbox .cq-row:not(.cq-end){display:grid;grid-template-columns:62px 1fr;gap:2px 8px;margin-bottom:5px;align-items:center}
#cq-nbox .cq-row>*{margin:0}
#cq-nbox .cq-lbl{width:auto;color:#cbbca3}
#cq-nbox .cq-w{width:100%;min-width:0}
#cq-nbox .cq-row>.cq-mut{grid-column:2;line-height:10px;color:#b9aa90}
#cq-nbox .cq-warn{padding:5px 9px;margin:6px 0 6px;background:#b58a4210;border-left:2px solid #ac8448;color:#c9b28d;line-height:12px;word-break:keep-all}
#cq-nbox .cq-chk{display:flex;align-items:center;gap:5px;margin:0 0 8px;line-height:14px}
#cq-nbox .cq-chk input{margin:0}
#cq-nbox .cq-end{display:flex;justify-content:center;gap:8px;margin:0;padding-top:3px}
#cq-nbox .cq-end .cq-btn{min-width:66px;margin:0}
#cq-nbox .cq-x{top:3px}
#cq-nbox .cq-err{font-size:6.6px;line-height:11px;padding:5px 7px}
.cq-flash{top:133px;left:200px;width:240px;padding:3px 6px;font-size:6px}
/* Center guest navigation independently of the keyboard hint. */
#cq-bar{display:flex;align-items:center;justify-content:center;gap:6px}
#cq-bar .cq-btn{margin:0;flex:none}
#cq-bar .cq-hint{display:none}

/* first login: party name / pick line / four cards / member name / [cancel] [done] centred; [X] top right = cancel */
#cq-fbox{left:36px;top:22px;width:568px;height:310px}
#cq-fbox .cq-bd.cq-fl{position:absolute;left:0;right:0;top:24px;bottom:0;display:flex;flex-direction:column;align-items:stretch}
#cq-fbox .cq-fl-row{display:flex;align-items:center;gap:8px;margin:0 0 6px}
#cq-fbox .cq-fl-row .cq-lbl{width:104px;flex:none;color:#cbbca3}
#cq-fbox .cq-fl-row .cq-w{width:170px;flex:none}
#cq-fbox .cq-fl-row .cq-mut{color:#b9aa90}
#cq-fbox .cq-fl-pick{margin:0 0 5px;color:#eed19b;text-align:center}
#cq-fbox .cq-cards{margin:0 0 6px}
#cq-fbox .cq-card{width:128px;height:138px}
#cq-fbox .cq-card .cq-cimg{height:80px}
#cq-fbox .cq-fl-btns{display:flex;justify-content:center;gap:12px;margin-top:2px}
#cq-fbox .cq-fl-btns .cq-btn{width:130px;min-width:130px}
#cq-fbox .cq-fl-cancel{order:-1}
#cq-fbox .cq-in{height:15px;background:#0b0d10bb;border:1px solid #79613c;border-radius:2px;padding:0 8px;color:#f2e5ce;box-shadow:inset 0 2px 4px #0006;font-size:7.2px}

/* Chrome autofill. A field Chrome has just filled (not focused yet) is drawn by the browser as a themed menu-style control with a larger text and a pale blue field;
   clicking it gives the normal look back. Turn the native look off and keep the game font size, text colour and dark field (two rules: :autofill is the standard
   name, :-webkit-autofill the old one; a browser that does not know one of them would drop the whole rule). */
#cq-tbox input:-webkit-autofill,#cq-tbox input:-webkit-autofill:hover,#cq-tbox input:-webkit-autofill:focus,#cq-tbox input:-webkit-autofill:active,
#cq-nbox input:-webkit-autofill,#cq-nbox input:-webkit-autofill:hover,#cq-nbox input:-webkit-autofill:focus,#cq-nbox input:-webkit-autofill:active,
#cq-fbox input:-webkit-autofill,#cq-fbox input:-webkit-autofill:hover,#cq-fbox input:-webkit-autofill:focus,#cq-fbox input:-webkit-autofill:active{
  -webkit-appearance:none!important;appearance:none!important;
  font-size:7.2px!important;font-family:inherit!important;line-height:normal!important;
  -webkit-text-fill-color:#f2e5ce;caret-color:#f2e5ce;
  -webkit-box-shadow:inset 0 0 0 1000px #17110e!important;box-shadow:inset 0 0 0 1000px #17110e!important;
  transition:background-color 9999s ease-in-out 0s;animation:cq-afstart 1ms}
#cq-tbox input:autofill,#cq-tbox input:autofill:hover,#cq-tbox input:autofill:focus,#cq-tbox input:autofill:active,
#cq-nbox input:autofill,#cq-nbox input:autofill:hover,#cq-nbox input:autofill:focus,#cq-nbox input:autofill:active,
#cq-fbox input:autofill,#cq-fbox input:autofill:hover,#cq-fbox input:autofill:focus,#cq-fbox input:autofill:active{
  -webkit-appearance:none!important;appearance:none!important;
  font-size:7.2px!important;font-family:inherit!important;line-height:normal!important;
  -webkit-text-fill-color:#f2e5ce;caret-color:#f2e5ce;
  -webkit-box-shadow:inset 0 0 0 1000px #17110e!important;box-shadow:inset 0 0 0 1000px #17110e!important;
  transition:background-color 9999s ease-in-out 0s}
/* the text fields of the login, sign-up and first-login windows never use the native look */
#cq-tbox input[type=text],#cq-tbox input[type=password],#cq-nbox input[type=text],#cq-nbox input[type=password],#cq-fbox input[type=text]{-webkit-appearance:none;appearance:none}
/* tells js/cq.js (animationstart) that Chrome just filled a field, so it can take the browser's autofill look off */
@keyframes cq-afstart{from{opacity:1}to{opacity:1}}
/* while the script is about to end Chrome's autofill look the text stays invisible, so the large text is never seen (.cq-afjs is set by js/cq.js; .cq-afkeep = the look could not be ended, show the text) */
.cq-afjs #cq-tbox input:-webkit-autofill:not(.cq-afkeep),
.cq-afjs #cq-nbox input:-webkit-autofill:not(.cq-afkeep),
.cq-afjs #cq-fbox input:-webkit-autofill:not(.cq-afkeep){-webkit-text-fill-color:transparent!important}
.cq-afjs #cq-tbox input:autofill:not(.cq-afkeep),
.cq-afjs #cq-nbox input:autofill:not(.cq-afkeep),
.cq-afjs #cq-fbox input:autofill:not(.cq-afkeep){-webkit-text-fill-color:transparent!important}