/* =====================================================================
   HOW THE PAGE LOOKS
   An auction site in 2001: lavender bars, gold boxes, blue links,
   Verdana for the site, Times for the voice, Courier for the letters.
   ===================================================================== */
:root { color-scheme: light; --link: #0000cc; --lav: #ccccff; --gold: #ffcc33; --red: #cc0000; --green: #007000; }
html { background: #fff; overflow-x: hidden; }
body { margin: 0; padding: 6px 10px 60px; background: #fff; color: #000; font: 13px "Times New Roman", Times, serif; }
.lnk { color: var(--link); text-decoration: underline; cursor: pointer; background: none; border: 0; padding: 0; font: inherit; text-align: left; }
.off { color: #999; }
hr { border: 0; border-top: 1px solid #999; margin: 6px 0; }
table { border-collapse: collapse; }
.won { color: var(--green); } .lost { color: var(--red); }

#head { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: end; }
#logo { font: italic bold 44px/1 Georgia, "Times New Roman", serif; letter-spacing: -2px; color: #1b2a8a; padding: 2px 6px 0 2px; user-select: none; }
#logo sup { font: 9px Arial; vertical-align: top; letter-spacing: 0; }
#tabsNav { display: flex; gap: 2px; flex-wrap: wrap; }
#tabsNav button { font: bold 13px Verdana, Arial, sans-serif; border: 2px solid #bbb; border-bottom: 0; padding: 2px 7px; color: #aaa; background: #fff; cursor: default; }
#tabsNav button.open { color: #1b2a8a; border-color: #1b2a8a; cursor: pointer; }
#tabsNav button.on { background: #1b2a8a; color: #fff; border-color: #1b2a8a; }
#tabsNav button.fresh { animation: blink 0.6s steps(2) 6; }
#announce { font: 11px Verdana, Arial, sans-serif; display: flex; justify-content: space-between; align-items: end; gap: 10px; flex-wrap: wrap; }
#announce p { margin: 1px 0; }
#announce p::before { content: "▸ "; color: var(--red); }
#updated { font: bold 11px Verdana, Arial, sans-serif; white-space: nowrap; }
#crumb { background: var(--lav); padding: 3px 4px; margin-top: 6px; font: bold 12px Verdana, Arial, sans-serif; }
#crumb .here { color: #e00; font-size: 15px; }
#grid { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 18px; margin-top: 12px; align-items: start; }
@keyframes blink { 50% { opacity: 0.2; } }
@keyframes bump { 0% { background: #ffd700; } }
@keyframes pop { 0% { transform: scale(1.8); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

/* the auctions */
#listings { border: 2px solid #1b2a8a; }
.bar { display: flex; justify-content: space-between; gap: 8px; background: var(--lav); font: bold 12px Verdana, Arial, sans-serif; padding: 3px 8px; }
#slots { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 8px; }
#slots.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#slots.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.auc { border: 1px solid #999; background: #fff; padding: 6px 8px; min-height: 150px; position: relative; display: flex; flex-direction: column; }
.auc.idle { border-style: dashed; color: #aaa; font: 11px Verdana, Arial, sans-serif; align-items: center; justify-content: center; min-height: 110px; }
.auc .t { font: bold 12px Verdana, Arial, sans-serif; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.auc .top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 3px 0 2px; border-bottom: 1px solid #1b2a8a; padding-bottom: 2px; }
.auc .p { font: bold 24px Verdana, Arial, sans-serif; font-variant-numeric: tabular-nums; }
.auc .p.up1 { color: var(--green); } .auc .p.up2 { color: #c9a000; } .auc .p.bump { animation: bump 0.22s ease-out; }
.auc .st { font: bold 11px Verdana, Arial, sans-serif; color: #555; text-align: right; white-space: nowrap; }
.auc .st.war { color: var(--red); animation: blink 0.4s steps(2) infinite; }
.auc table { width: 100%; font: 11px Verdana, Arial, sans-serif; }
.auc td { padding: 1px 3px; border-bottom: 1px dotted #ddd; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px; }
.auc tr.n td { animation: bump 0.3s ease-out; }
.auc td.px { color: #888; }
.auc .sold { position: absolute; inset: auto 6px 6px 6px; text-align: center; font: bold 15px Verdana, Arial, sans-serif; background: #eefbe9; border: 2px solid #3a9a3a; padding: 4px; animation: pop 0.25s ease-out; }
.auc .sold.big { background: #fff3c4; border-color: #c9a000; color: #7a5200; }
.auc .sold small { display: block; font-size: 10px; font-weight: normal; color: #444; }
#slots.n2 .auc .p, #slots.n3 .auc .p { font-size: 18px; }
#slots.n3 .auc td:nth-child(3) { display: none; }

#listBar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 8px; border-top: 1px solid #ccc; }
#bList { font: bold 15px Verdana, Arial, sans-serif; padding: 7px 18px; cursor: pointer; background: #ffe9a8; border: 2px outset #fff; min-width: 240px; }
#bList:active { border-style: inset; }
#bList:disabled { background: #eee; color: #999; cursor: default; }
#bList { position: relative; overflow: hidden; }
#bList .wait { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #ffe9a8; }
#bList .label { position: relative; }
#listHint { font: 11px Verdana, Arial, sans-serif; color: #555; }

/* the panel under the auctions: closet, search, services */
#panel { margin-top: 14px; border: 1px solid #999; }
#panel h2 { margin: 0; font: bold 13px Verdana, Arial, sans-serif; background: var(--gold); padding: 3px 8px; }
#panelBody { padding: 8px 10px; font: 12px Verdana, Arial, sans-serif; }
#panelBody .intro { font: 16px/1.45 "Times New Roman", serif; margin: 2px 0 10px; }
.items { width: 100%; }
.items td { padding: 3px 4px; border-bottom: 1px dotted #ccc; vertical-align: top; }
.items td.v { white-space: nowrap; text-align: right; color: #444; }
.items tr.next td { background: #fff8de; }
.items .say { font: italic 13px/1.35 "Times New Roman", serif; color: #444; }
.btn { font: bold 12px Verdana, Arial, sans-serif; padding: 4px 12px; cursor: pointer; background: #ffe9a8; border: 2px outset #fff; }
.btn:disabled { background: #eee; color: #999; cursor: default; }
.ups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.up { border: 1px solid #999; padding: 7px 8px; display: flex; flex-direction: column; gap: 4px; background: #fff; }
.up b { font-size: 12px; }
.up .d { color: #333; flex: 1; }
.up.owned { opacity: 0.45; }
.note { color: #666; font-size: 11px; }

.faq { border: 2px solid #1b2a8a; font: 11px Verdana, Arial, sans-serif; margin-top: 18px; }
.faq h3 { margin: 4px; background: var(--lav); font-size: 14px; text-align: center; padding: 2px; }
.faq ul { margin: 6px 0 8px; padding-left: 22px; }
.faq li { margin: 5px 0; }
.faq .ans { color: #222; margin: 4px 0 6px; font-family: "Times New Roman", serif; font-size: 15px; line-height: 1.45; }
.faq .ans[hidden] { display: none; }

/* My emptor */
#side { border: 1px solid #999; font: 11px Verdana, Arial, sans-serif; }
#side h2 { margin: 0; background: var(--gold); font-size: 13px; padding: 3px 8px; }
#side h3 { margin: 10px 0 3px; background: var(--lav); font-size: 11px; padding: 2px 8px; }
#side .pad { padding: 6px 8px; }
#side .line { display: flex; justify-content: space-between; gap: 6px; padding: 2px 0; }
#bal { font-size: 16px; font-weight: bold; font-variant-numeric: tabular-nums; }
#bal.flash { animation: bump 0.6s ease-out; }
#mailList .m { display: block; width: 100%; padding: 3px 0; border-bottom: 1px dotted #ccc; }
#mailList .m.new { font-weight: bold; }
.newTag { color: #fff; background: var(--red); font-size: 9px; padding: 0 3px; margin-right: 4px; animation: blink 1s steps(2) infinite; font-weight: bold; }
#side .empty { color: #777; }
#flag { display: none; margin: 6px 0 0; padding: 5px 7px; background: #fff3c4; border: 1px solid #b8860b; font: bold 11px Verdana, Arial, sans-serif; }
#flag.on { display: block; }

#notes { font: 11px Verdana, Arial, sans-serif; margin-top: 18px; }
#foot { margin-top: 18px; font: 10px Verdana, Arial, sans-serif; }
#statusbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; justify-content: space-between; align-items: center; gap: 10px;
  background: #d4d0c8; border-top: 1px solid #fff; box-shadow: 0 -1px 0 #808080; font: 11px Tahoma, Verdana, Arial, sans-serif; padding: 3px 8px; }
#sbText { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#sbBar { display: flex; gap: 2px; width: 150px; height: 11px; border: 1px solid #808080; border-right-color: #fff; border-bottom-color: #fff; padding: 1px; flex: none; }
#sbBar i { flex: 1; } #sbBar i.on { background: #0a246a; }
.float { position: fixed; z-index: 30; pointer-events: none; font: bold 15px Verdana, Arial, sans-serif; animation: rise 1.3s ease-out forwards; white-space: nowrap; }
.float.up { color: var(--green); } .float.down { color: var(--red); }
@keyframes rise { 0% { opacity: 0; transform: translateY(6px); } 15% { opacity: 1; } 100% { opacity: 0; transform: translateY(-36px); } }

/* letters: the auctions keep running underneath */
#page { position: fixed; inset: 0; background: rgba(255,255,255,0.97); overflow-y: auto; z-index: 15; padding: 12px 16px 60px; }
#page[hidden] { display: none; }
#page .box { max-width: 720px; margin: 0 auto; }
#page h1 { font: bold 18px Verdana, Arial, sans-serif; margin: 8px 0 10px; }
#page h2 { font: bold 13px Verdana, Arial, sans-serif; background: var(--lav); padding: 3px 6px; margin: 18px 0 6px; }
#page .meta { font: 12px Verdana, Arial, sans-serif; margin-bottom: 12px; }
#page .meta td { padding: 2px 10px 2px 0; }
#page .letter { font: 15px/1.6 "Courier New", Courier, monospace; white-space: pre-wrap; padding: 10px 2px 16px; }
#page .note { font: 11px Verdana, Arial, sans-serif; color: #666; }
#page .replies { list-style: none; padding: 0; font-size: 15px; }
#page .replies li { margin: 8px 0; }
#page .about { font-size: 17px; line-height: 1.55; }
#page .back { font: 11px Verdana, Arial, sans-serif; }
#page .behind { float: right; font: 11px Verdana, Arial, sans-serif; color: #888; }

@media (max-width: 800px) {
  body { padding: 4px 6px 60px; }
  #logo { font-size: 32px; }
  #tabsNav button { font-size: 10px; padding: 2px 3px; }
  #grid { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
  #grid main { display: contents; }
  #listings { order: 1; } #side { order: 2; } #panel { order: 3; } .faq { order: 4; } #notes { order: 5; } #foot { order: 6; }
  #side h3 { margin-top: 4px; } #mailList { max-height: 150px; overflow-y: auto; }
  #slots.n2, #slots.n3 { grid-template-columns: minmax(0, 1fr); }
  .ups { grid-template-columns: 1fr; }
  #bList { min-width: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .auc .p.bump, .auc tr.n td, .newTag, #bal.flash, .float, .auc .sold { animation: none; } }

/* badge next to your name, letters that ask for money */
.badge { font: bold 9px Verdana, Arial, sans-serif; color: #a0672a; border: 1px solid #a0672a; padding: 0 3px; }
.ask { margin-top: 6px; padding: 5px 7px; border: 1px solid #b8860b; background: #fff8de; }

/* the debug panel (Shift+D) */
#debug { position: fixed; left: 8px; bottom: 30px; z-index: 40; background: #ffffe6; border: 2px solid #000; padding: 6px 8px; font: 11px Verdana, Arial, sans-serif; line-height: 1.9; max-width: 330px; box-shadow: 3px 3px 0 #0003; }
#debug button, #debug select { font: 11px Verdana, Arial, sans-serif; }
#dbgInfo { color: #555; line-height: 1.4; margin-top: 4px; }