/* Little Throne online (js/net.js, js/account.js): the veil while the page joins the realm, the strap that says it's reconnecting,
   the plaque at the right of the header with who's playing, its leather flap of a menu, and the sign-in sheets. Earthy, the game's
   own: dark wood, leather with its stitching, parchment written on in ink, moss for yes. No metal, nothing like a web form. */

/* ---- the veil: the valley at dusk, the logo, and a line that breathes until the server answers */
#veil { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: radial-gradient(ellipse at 50% 46%, rgba(26,17,9,.5), rgba(6,4,3,.97) 68%), url(../art/bg/valley.png) center / cover #05070a; }
#veil .vin { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
#veil img { width: min(560px, 72vw); image-rendering: auto; filter: drop-shadow(0 10px 18px #000); }
#veil p { margin: 8px 0 0; font: 700 17px var(--head); letter-spacing: .34em; text-transform: uppercase; color: #e9d6a8; text-shadow: 0 2px 6px #000; animation: breathe 2.4s ease-in-out infinite; }
#veil small { min-height: 20px; font: italic 15px var(--body); color: #b8a27a; text-shadow: 0 1px 3px #000; }
#veil p::after { content: ""; display: block; width: 180px; height: 3px; margin: 14px auto 0; border-radius: 2px; background: linear-gradient(90deg, transparent, #8fb85a, #e8c070, #8fb85a, transparent); background-size: 200% 100%; animation: fuse 2.2s linear infinite; opacity: .8; }
@keyframes breathe { 50% { opacity: .55; } }
@keyframes fuse { from { background-position: 200% 0; } to { background-position: 0 0; } }

/* ---- reconnecting: a leather strap hung under the header, stitched round its edge */
#netStrip { position: fixed; left: 50%; top: 62px; transform: translateX(-50%); z-index: 40; display: flex; align-items: center; gap: 10px; padding: 8px 20px 7px;
  background: linear-gradient(#5e3c20, #3c2512); border: 1px solid #170d05; border-top: 0; border-radius: 0 0 6px 6px; box-shadow: inset 0 1px 0 rgba(255,214,160,.16), 0 6px 16px rgba(0,0,0,.65);
  font: 700 12px var(--head); letter-spacing: .22em; text-transform: uppercase; color: #f2e2be; text-shadow: 0 1px 0 #000; pointer-events: none; }
#netStrip::before { content: ""; position: absolute; inset: 3px 4px 4px; border: 1px dashed rgba(242,214,160,.32); border-top: 0; border-radius: 0 0 4px 4px; }
body:has(#netStrip:not([hidden])) #toasts { top: 104px; }   /* (the toasts step down out of its way) */
#toasts { z-index: 110; }   /* (over the veil and the sheets too: what they say is meant to be seen) */
#netStrip i { width: 9px; height: 9px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ffd08a, #c8641e); box-shadow: 0 0 8px #ff8a3d; animation: breathe 1.1s ease-in-out infinite; }

/* ---- the plaque: a little board of dark wood with the name cut in it, a wax seal (clay for a guest, moss for an account) */
#acct { position: relative; }
#acct .plaque { display: flex; align-items: center; gap: 9px; height: 42px; padding: 0 10px 0 9px; text-transform: none; letter-spacing: 0; text-align: left;
  background: linear-gradient(rgba(34,21,10,.5), rgba(14,9,5,.82)), url(../art/ui/rs_wood.png) 0 0 / 64px; image-rendering: pixelated; border: 1px solid #120a04; border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255,220,160,.2), inset 0 -2px 0 rgba(0,0,0,.45), inset 1px 0 0 rgba(255,220,160,.06), 0 2px 5px rgba(0,0,0,.7); }
#acct .plaque:hover { filter: brightness(1.15); }
#acct .seal { width: 18px; height: 18px; flex: none; border-radius: 50%; background: radial-gradient(circle at 35% 32%, #b8956a, #6e4f2e 60%, #4a321c); box-shadow: 0 0 0 1px #1a0f07, inset 0 -1px 2px rgba(0,0,0,.5); }
#acct .plaque.user .seal { background: radial-gradient(circle at 35% 32%, #a6cc6e, #557a2e 60%, #34501a); }
#acct .pt { display: flex; flex-direction: column; line-height: 1.12; min-width: 0; }
#acct .pt b { max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 14px var(--head); letter-spacing: .04em; color: #f6dc8c; text-shadow: 0 1px 0 #000, 0 0 6px #000; }
#acct .pt small { max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: italic 12px var(--body); color: #c2a87e; text-shadow: 0 1px 0 #000; }
#acct .tab { font-style: normal; font-size: 11px; color: #b8a27a; }

/* the menu: a leather flap under the plaque */
.acctmenu { position: absolute; right: 0; top: 48px; z-index: 30; width: 286px; padding: 9px 8px; background: linear-gradient(#4c301a, #2f1d0e); border: 1px solid #120a04; border-radius: 5px;
  box-shadow: inset 0 1px 0 rgba(255,214,160,.14), 0 14px 30px rgba(0,0,0,.8); animation: pop .18s; }
.acctmenu::before { content: ""; position: absolute; inset: 4px; border: 1px dashed rgba(242,214,160,.26); border-radius: 4px; pointer-events: none; }
.acctmenu button { position: relative; display: block; width: 100%; padding: 8px 11px; margin: 1px 0; text-align: left; text-transform: none; letter-spacing: 0; background: none; border: 0; box-shadow: none; border-radius: 3px; }
.acctmenu button:hover { background: rgba(0,0,0,.3); box-shadow: inset 3px 0 0 #8fb85a; filter: none; }
.acctmenu b { display: block; font: 700 13px var(--head); letter-spacing: .05em; color: #f2e2be; }
.acctmenu small { display: block; margin-top: 2px; font: italic 13px var(--body); color: #c6ab80; }

/* ---- the sheets: parchment in a rim of dark wood, written on in ink */
#acctDlg { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; background: rgba(4,3,2,.66); }
#acctDlg .sheet { position: relative; width: 470px; max-width: calc(100% - 32px); padding: 26px 30px 18px; color: #3b2a1c;
  background: radial-gradient(ellipse at 50% 40%, rgba(255,250,232,.32), rgba(150,110,60,.18) 85%), url(../art/ui/rs_parchment.png) 0 0 / 128px; image-rendering: pixelated;
  border: 11px solid #3a2313; border-radius: 3px; box-shadow: 0 0 0 1px #120a04, inset 0 0 0 1px rgba(90,60,30,.55), inset 0 0 26px rgba(110,70,30,.35), 0 20px 60px #000; animation: pop .2s; }
#acctDlg .sheet::before { content: ""; position: absolute; inset: -11px; border: 1px solid rgba(255,214,160,.16); border-radius: 3px; pointer-events: none; }
#acctDlg .sheet.wide { width: 660px; }
#acctDlg h2 { margin: 0 0 8px; font: 900 24px var(--display); letter-spacing: .02em; color: #3b2a1c; text-shadow: 0 1px 0 rgba(255,250,230,.5); }
#acctDlg h3 { margin: 0 0 8px; font: 700 11px var(--head); letter-spacing: .18em; text-transform: uppercase; color: #6a4a24; text-shadow: none; }
#acctDlg p { margin: 6px 0 10px; font: 16px/1.45 var(--body); color: #4a3624; } #acctDlg p i { color: #6a1a14; }
#acctDlg b { color: #2a1c10; }
/* a line to write on, not a box */
#acctDlg .line { display: flex; flex-direction: column; align-items: stretch; gap: 0; margin: 12px 0 4px; }
#acctDlg .line span { font: 700 11px var(--head); letter-spacing: .18em; text-transform: uppercase; color: #5e4222; }
#acctDlg .line input { width: 100%; padding: 3px 2px 4px; font: 21px var(--body); color: #22160c; background: transparent; border: 0; border-bottom: 1.5px solid #8a6a3a; border-radius: 0; box-shadow: none; outline: none; }
#acctDlg .line input { cursor: url(../art/ui/cursor_hand.png) 3 2, text !important; }
#acctDlg .line input:focus { border-bottom-color: #4f6e2a; box-shadow: 0 2px 0 -0.5px rgba(79,110,42,.35); }
#acctDlg .say { min-height: 21px; margin: 8px 0 0; font: italic 15px var(--body); } #acctDlg .say.bad { color: #8a2a1a; } #acctDlg .say.mute { color: #6a5838; } #acctDlg .say.good { color: #3a6a2a; }
#acctDlg .acts { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
#acctDlg .swap { margin: 12px 0 0; text-align: center; font-size: 14px; color: #6a5a3a; } #acctDlg .swap a { color: #6a1a14; text-decoration: underline; cursor: pointer; }
/* buttons of wood; the one that says yes is stained with moss */
button.wood { padding: 9px 15px 8px; font: 700 11px/1 var(--head); letter-spacing: .12em; text-transform: uppercase; color: #f4e6c6; background: linear-gradient(#73502e, #4c331d 60%, #3c2816);
  border: 1px solid #1a110a; border-radius: 3px; box-shadow: inset 0 1px 0 rgba(255,222,170,.28), inset 0 -1px 0 rgba(0,0,0,.3), 0 2px 3px rgba(40,24,10,.45); text-shadow: 0 1px 0 #000; }
button.wood.moss { color: #f6f2da; background: linear-gradient(#6a8a3e, #46602a 60%, #34481d); border-color: #18220c; box-shadow: inset 0 1px 0 rgba(230,255,190,.3), inset 0 -1px 0 rgba(0,0,0,.3), 0 2px 3px rgba(30,40,10,.45); }
button.wood .g { display: inline-grid; place-items: center; width: 17px; height: 17px; margin: -3px 7px -3px -3px; border-radius: 50%; background: #f4ead0; color: #3b2a1c; font: 900 11px var(--head); letter-spacing: 0; box-shadow: 0 0 0 1px #1a110a; }
/* which keep to keep: two smaller leaves side by side */
#acctDlg .keeps { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 14px 0 4px; }
#acctDlg .keepcard { display: flex; flex-direction: column; padding: 12px 14px; background: rgba(255,250,232,.32); border: 1px solid rgba(110,80,40,.55); border-radius: 3px; box-shadow: inset 0 0 12px rgba(120,80,30,.18); }
#acctDlg .kc { display: flex; flex-direction: column; gap: 2px; flex: 1; font-size: 15px; } #acctDlg .kc > b { font: 700 15px var(--head); color: #3b2a1c; margin-bottom: 4px; } #acctDlg .kc small { color: #7a6a4a; font-style: italic; margin-top: 4px; }
#acctDlg .keepcard button { margin-top: 12px; width: 100%; }