/* The walk-away event screen (templates/kiosk/kiosk.html, bidding/kiosk.py).
   Sized for a landscape venue screen; below 760px wide it is the join card. */

body.kiosk { margin: 0; background: #0b1d33; color: #fff; overflow: hidden; height: 100vh; }
.kiosk-screen {
  display: grid; height: 100vh;
  grid-template-columns: minmax(0, 1fr) clamp(280px, 22vw, 400px);
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas: "top top" "stage side";
}
.kiosk-screen.kiosk-idle, .kiosk-screen.kiosk-idle * { cursor: none; }

.kiosk-top {
  grid-area: top; display: flex; align-items: center; gap: 1.5rem;
  padding: .7rem 1.5rem; background: #0b1d33; border-bottom: 1px solid rgba(255,255,255,.12);
}
.kiosk-title { font-weight: 700; font-size: clamp(1.2rem, 1.8vw, 2rem); letter-spacing: .01em; }
.kiosk-live {
  display: flex; align-items: center; gap: .45rem; font-weight: 700; font-size: .95rem;
  color: #fff; background: #c62828; border-radius: 999px; padding: .2rem .8rem;
}
.kiosk-live.kiosk-off { background: #546e7a; }
.kiosk-dot { width: .6rem; height: .6rem; border-radius: 50%; background: #fff; animation: kiosk-pulse 1.6s infinite; }
@keyframes kiosk-pulse { 50% { opacity: .25; } }
.kiosk-countdown { color: #ffb74d; font-weight: 600; font-size: 1.05rem; }
.kiosk-clock { margin-left: auto; font-variant-numeric: tabular-nums; font-size: 1.15rem; opacity: .85; }

main.kiosk-stage {
  grid-area: stage; position: relative; overflow: hidden; padding: 0; margin: 0; width: auto;
  background: var(--bg);
}
.kiosk-frame {
  position: absolute; top: 0; left: 0; border: 0; background: var(--bg);
  transform-origin: 0 0; opacity: 0; transition: opacity .8s ease; pointer-events: none;
}
.kiosk-frame.kiosk-shown { opacity: 1; }

.kiosk-panel {
  position: absolute; inset: 0; padding: 2.5rem 3rem 5rem; overflow: hidden;
  background: #0f2742; color: #fff; opacity: 0; transition: opacity .8s ease;
}
.kiosk-panel.kiosk-shown { opacity: 1; }
.kiosk-panel h2 { margin: 0 0 .3rem; font-size: clamp(1.6rem, 2.6vw, 2.8rem); }

.kiosk-sf-sub { margin: 0 0 1.4rem; opacity: .75; font-size: 1.05rem; }
.kiosk-sf-counts { display: flex; gap: 1.2rem; margin-bottom: 1.6rem; }
.kiosk-sf-count { background: rgba(255,255,255,.08); border-radius: 12px; padding: .8rem 1.4rem; }
.kiosk-sf-count b { display: block; font-size: 2.2rem; line-height: 1.1; }
.kiosk-sf-count span { opacity: .75; font-size: .95rem; }
.kiosk-sf-tables { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 1.6rem; }
.kiosk-sf-table h3 { margin: 0 0 .5rem; font-size: 1.05rem; opacity: .8; font-weight: 600; }
.kiosk-sf-table table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.kiosk-sf-table th { text-align: left; font-weight: 600; opacity: .6; padding: .3rem .5rem; border-bottom: 1px solid rgba(255,255,255,.2); }
.kiosk-sf-table td { padding: .45rem .5rem; border-bottom: 1px solid rgba(255,255,255,.08); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 16rem; }
.kiosk-sf-table tr.kiosk-new td { animation: kiosk-flash 2.5s ease; }
@keyframes kiosk-flash { from { background: rgba(255,183,77,.35); } to { background: transparent; } }

.kiosk-join { display: flex; align-items: center; justify-content: center; gap: 4rem; padding-bottom: 4rem; }
.kiosk-join-qr { background: #fff; border-radius: 16px; padding: 1rem; line-height: 0; }
.kiosk-join-qr svg { display: block; width: min(44vh, 30vw); height: auto; }
.kiosk-join-text { max-width: 34rem; font-size: clamp(1.1rem, 1.5vw, 1.6rem); }
.kiosk-join-text ol { padding-left: 1.3em; }
.kiosk-join-text li { margin: .5em 0; }
.kiosk-join-url { font-weight: 700; color: #ffb74d; font-size: 1.15em; }

.kiosk-caption {
  position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 1rem;
  padding: .9rem 1.5rem; background: rgba(11,29,51,.92); color: #fff; font-size: clamp(1rem, 1.4vw, 1.4rem);
}
#kiosk-caption-text { flex: 1; transition: opacity .5s; }
.kiosk-dots { display: flex; gap: .4rem; }
.kiosk-dots i { width: .55rem; height: .55rem; border-radius: 50%; background: rgba(255,255,255,.3); }
.kiosk-dots i.on { background: #ffb74d; }
.kiosk-reconnecting {
  position: absolute; top: 1rem; right: 1rem; background: #546e7a; color: #fff;
  padding: .3rem .8rem; border-radius: 999px; font-size: .9rem;
}

.kiosk-side {
  grid-area: side; display: flex; flex-direction: column; gap: 1rem; padding: 1rem;
  background: #0b1d33; border-left: 1px solid rgba(255,255,255,.12); min-height: 0;
}
.kiosk-qr { display: flex; align-items: center; gap: .9rem; background: #fff; color: #0b1d33; border-radius: 12px; padding: .6rem; }
.kiosk-qr svg { display: block; width: clamp(90px, 8vw, 150px); height: auto; flex: none; }
.kiosk-qr-text { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.kiosk-qr-text strong { font-size: 1.3rem; }
.kiosk-qr-text span { font-size: .85rem; overflow-wrap: break-word; }
.kiosk-feed { flex: 1; min-height: 0; overflow: hidden; }
.kiosk-feed h3 { margin: 0 0 .4rem; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; opacity: .6; }
.kiosk-list { list-style: none; margin: 0; padding: 0; }
.kiosk-list li {
  padding: .45rem .6rem; margin-bottom: .35rem; border-radius: 8px; background: rgba(255,255,255,.07);
  font-size: .92rem; line-height: 1.35;
}
.kiosk-list li.kiosk-new { animation: kiosk-in .6s ease; }
.kiosk-list li.kiosk-guest { background: rgba(255,183,77,.2); }
@keyframes kiosk-in { from { transform: translateX(30px); opacity: 0; } }
.kiosk-list .k-amt { font-weight: 700; color: #ffb74d; }
.kiosk-list .k-at { float: right; opacity: .5; font-size: .8rem; }
.kiosk-list .k-msg { display: block; opacity: .85; font-size: .85rem; }
.kiosk-list .k-empty { opacity: .5; background: none; }
.kiosk-foot { margin: 0; font-size: .75rem; opacity: .55; }

.kiosk-fullscreen {
  position: fixed; left: 50%; bottom: 5rem; transform: translateX(-50%); z-index: 10;
  background: rgba(0,0,0,.75); color: #fff; border: 1px solid rgba(255,255,255,.3); border-radius: 999px;
  padding: .6rem 1.2rem; font: inherit; cursor: pointer;
}

.kiosk-phone { display: none; }
@media (max-width: 760px) {
  body.kiosk { overflow: auto; height: auto; background: var(--bg); }
  .kiosk-screen { display: none; }
  .kiosk-phone { display: block; padding: 0 16px; }
}