/* aureality.fun: games on the Aureality globe. Loaded after the globe's own styles. */
.fun-pane {
  position: fixed; z-index: 15; top: var(--panel-top); left: var(--gut-l);
  width: min(300px, calc(100vw - 32px)); max-height: calc(100% - var(--panel-top) - var(--panel-gap-b));
  display: flex; flex-direction: column; background: var(--au-pane, rgba(17,21,27,.96)); border: 1px solid var(--line);
  border-radius: 16px; box-shadow: 0 18px 50px rgba(0,0,0,.5); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  font-size: 14px;
}
.fun-tabs { display: flex; gap: 4px; padding: 8px; border-bottom: 1px solid var(--line); }
.fun-tabs button { flex: 1; min-height: 36px; border-radius: 999px; border: 1px solid transparent; background: transparent; color: var(--muted);
  font: 500 14px/1 var(--font); cursor: pointer; }
.fun-tabs button[aria-selected="true"] { color: var(--text); background: rgba(141,187,255,.13); border-color: rgba(141,187,255,.3); }
.fun-tabs button:hover { color: var(--text); }
.fun-body { overflow: auto; overscroll-behavior: contain; padding: 6px 8px 12px; }
.fun-cat { margin: 12px 8px 6px; font: 500 11px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
.fun-cat small { display: block; margin-top: 3px; font: 300 12px/1.35 var(--font); letter-spacing: 0; text-transform: none; }
.fun-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.fun-game { width: 100%; display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; padding: 8px; border-radius: 10px;
  border: 1px solid transparent; background: transparent; color: var(--text); text-align: left; font: 400 14px/1.3 var(--font); cursor: pointer; }
.fun-game:hover { background: rgba(255,255,255,.04); }
.fun-game[aria-pressed="true"] { background: rgba(141,187,255,.1); border-color: rgba(141,187,255,.3); }
.fun-ico { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--alt); border: 1px solid var(--line); color: var(--hi); }
.fun-ico svg { width: 20px; height: 20px; }
.fun-game b { display: block; font-weight: 500; }
.fun-game span { display: block; color: var(--muted); font-size: 12px; font-weight: 300; }
.fun-tag { font: 500 10.5px/1 var(--mono); letter-spacing: .04em; padding: 4px 7px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.fun-tag.play { color: #07090D; background: var(--hi); border-color: var(--hi); }
.fun-foot { margin: 14px 8px 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.fun-tier { margin: 10px 8px 0; padding: 10px 12px; border-radius: 10px; background: var(--alt); border: 1px solid var(--line); font-size: 13px; line-height: 1.45; }
.fun-tier b { color: var(--hi); font-weight: 500; }
/* layer list: shown under the tabs only on the Layers tab */
body[data-au-site="fun"]:not(.fun-layers) .au-sb { display: none; }
body.fun-layers .fun-body { display: none; }
body.fun-layers .au-sb { top: calc(var(--panel-top) + 62px); height: auto !important; max-height: calc(100% - var(--panel-top) - 62px - var(--panel-gap-b)); }
body.fun-layers .au-sb .au-sb-fold { display: none; }
/* details pane of a game (same look as the layer details pane) */
.fun-dp .fun-shot { margin: 12px 0 4px; aspect-ratio: 16 / 9; border-radius: 10px; border: 1px solid var(--line);
  background: radial-gradient(120% 90% at 30% 20%, rgba(141,187,255,.22), transparent 60%), linear-gradient(160deg, #0E1116, #151920); display: grid; place-items: center; color: var(--hi); }
.fun-dp .fun-shot svg { width: 64px; height: 64px; opacity: .85; }
.fun-dp ul.fun-feat { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.fun-starts { display: grid; gap: 6px; margin: 4px 0 8px; }
.fun-starts label { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 9px; border: 1px solid var(--line); background: var(--alt); cursor: pointer; }
.fun-starts label:has(input:checked) { border-color: var(--hi); }
.fun-starts input { accent-color: var(--hi); margin: 0; }
.fun-starts small { margin-left: auto; color: var(--muted); font: 400 11px/1 var(--mono); }
.fun-dp .btn.primary { width: 100%; justify-content: center; cursor: pointer; border: 0; }
.fun-dp .btn[disabled] { opacity: .5; cursor: not-allowed; }
.fun-keys { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; font-size: 13px; }
.fun-keys dt { font: 500 12px/1.6 var(--mono); color: var(--hi); }
.fun-keys dd { margin: 0; color: var(--muted); }
/* while playing: hide the site chrome, keep the HUD */
body.fun-playing .fun-pane, body.fun-playing .au-sb, body.fun-playing .dp, body.fun-playing .top, body.fun-playing .au-sites,
body.fun-playing .foot, body.fun-playing #labels, body.fun-playing .pc-root, body.fun-playing .au-cm, body.fun-playing .au-sea, body.fun-playing .au-clock, body.fun-playing .au-tt, body.fun-playing #map .maplibregl-ctrl-group, body.fun-playing .cap-labels, body.fun-playing .au-vc-btn { display: none !important; }
.fl-hud { position: fixed; inset: 0; z-index: 30; pointer-events: none; font: 500 13px/1.2 var(--mono); color: #EAF2FF; text-shadow: 0 1px 3px rgba(0,0,0,.8); }
.fl-plane { position: absolute; left: 0; top: 0; width: 64px; height: 64px; margin: -32px 0 0 -32px; will-change: transform; filter: drop-shadow(0 6px 6px rgba(0,0,0,.55)); }
.fl-tl { position: absolute; top: calc(14px + env(safe-area-inset-top, 0px)); left: var(--gut-l); display: grid; gap: 6px; }
.fl-box { padding: 10px 12px; border-radius: 10px; background: rgba(7,9,13,.62); border: 1px solid rgba(141,187,255,.25); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.fl-box dl { display: grid; grid-template-columns: auto auto; gap: 4px 14px; margin: 0; }
.fl-box dt { color: var(--muted); font-weight: 400; }
.fl-box dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.fl-tr { position: absolute; top: calc(14px + env(safe-area-inset-top, 0px)); right: var(--gut-r); pointer-events: auto; display: flex; gap: 8px; }
.fl-tr button, .fl-pad button { font: 500 13px/1 var(--font); color: var(--text); background: rgba(17,21,27,.85); border: 1px solid var(--line); border-radius: 999px; padding: 10px 14px; cursor: pointer; }
.fl-tr button:hover { border-color: var(--hi); }
.fl-msg { position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%); text-align: center; font: 500 22px/1.3 var(--font); }
.fl-msg small { display: block; font: 400 14px/1.5 var(--font); color: var(--muted); }
.fl-msg[hidden] { display: none; }
.fl-help { position: absolute; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); font: 400 12.5px/1.4 var(--font); color: var(--muted); white-space: nowrap; }
.fl-pad { position: absolute; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); display: none; gap: 8px; pointer-events: auto; }
.fl-pad.l { left: var(--gut-l); } .fl-pad.r { right: var(--gut-r); }
.fl-pad button { width: 56px; height: 56px; padding: 0; border-radius: 14px; font-size: 20px; touch-action: none; user-select: none; -webkit-user-select: none; }
@media (pointer: coarse) { .fl-pad { display: grid; grid-template-columns: repeat(2, 56px); } .fl-help { display: none; } }
@media (max-width: 640px) {
  .fun-pane { top: auto; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); max-height: 46%; }
  body.fun-layers .au-sb { top: auto; bottom: calc(12px + env(safe-area-inset-bottom, 0px) + 62px); }
  .detail-open .fun-pane { display: none; }
}
/* ---------- Summit (card game) ---------- */
body.sm-on .au-clock, body.sm-on .au-tt { display: none !important; }
.sm-ui { position: fixed; inset: 0; z-index: 30; pointer-events: none; font-family: var(--font); color: var(--text); }
.sm-ui button { font-family: var(--font); }
.sm-top { position: absolute; top: calc(12px + env(safe-area-inset-top, 0px)); left: var(--gut-l); right: var(--gut-r); display: grid; grid-template-columns: 1fr minmax(0, 1.2fr) 1fr auto; gap: 12px; align-items: start; pointer-events: auto; }
.sm-op { padding: 10px 12px; border-radius: 12px; background: rgba(7,9,13,.72); border: 1px solid var(--line); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.sm-op b { display: block; font-weight: 500; font-size: 14px; color: var(--c); }
.sm-op span { font: 400 12px/1.6 var(--mono); color: var(--muted); }
.sm-op i { display: block; height: 5px; border-radius: 3px; background: var(--line); overflow: hidden; margin-top: 4px; }
.sm-op em { display: block; height: 100%; background: var(--c); transition: width .4s; }
.sm-op.ai { text-align: right; }
.sm-mid { text-align: center; padding-top: 4px; text-shadow: 0 1px 4px #000; }
.sm-mid p { margin: 0; }
.sm-turn { font: 500 12px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--hi); }
.sm-log { font-size: 14px; }
.sm-x { min-height: 40px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: rgba(17,21,27,.9); color: var(--text); cursor: pointer; }
.sm-regs { position: absolute; left: var(--gut-l); right: var(--gut-r); bottom: calc(176px + env(safe-area-inset-bottom, 0px)); display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; pointer-events: auto; }
.sm-reg { text-align: left; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--line); background: rgba(7,9,13,.78); color: var(--text); cursor: pointer; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); min-width: 0; }
.sm-reg b { display: block; font-weight: 500; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sm-reg > small { display: block; font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sm-reg.own-you { border-color: var(--cy); box-shadow: inset 0 0 0 1px var(--cy); }
.sm-reg.own-ai { border-color: var(--ca); box-shadow: inset 0 0 0 1px var(--ca); }
.sm-reg.tgt, .sm-mk.tgt { outline: 2px dashed var(--hi); outline-offset: 2px; }
.sm-row { display: flex; flex-wrap: wrap; gap: 4px; min-height: 24px; margin-top: 6px; }
.sm-row em { color: var(--line); font-style: normal; font-size: 12px; }
.sm-u { display: inline-flex; align-items: baseline; padding: 2px 7px; border-radius: 7px; font: 500 13px/18px var(--mono); color: #07090D; }
.sm-u small { font-size: 11px; }
.sm-row.you .sm-u { background: var(--cy); }
.sm-row.ai .sm-u { background: var(--ca); }
.sm-u.g { box-shadow: 0 0 0 2px #F5F7FB; }
.sm-u.z { opacity: .55; }
.sm-bar { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px var(--gut-r) calc(12px + env(safe-area-inset-bottom, 0px)) var(--gut-l); display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: end;
  background: linear-gradient(to top, rgba(7,9,13,.96), rgba(7,9,13,.6) 70%, transparent); pointer-events: auto; }
.sm-inf { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; border: 2px solid var(--hi); background: rgba(21,25,32,.9); }
.sm-inf b { font: 500 20px/1 var(--mono); color: var(--hi); }
.sm-inf span { font-size: 10px; color: var(--muted); margin-top: -14px; }
.sm-hand { display: flex; gap: 8px; overflow-x: auto; padding: 8px 2px 2px; scrollbar-width: thin; }
.sm-card { position: relative; flex: none; width: 128px; min-height: 140px; display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 10px 10px 8px; border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--c) 45%, var(--line)); background: linear-gradient(170deg, #1B2029, #0E1116); color: var(--text); cursor: pointer; transition: transform .15s; }
.sm-card:hover { transform: translateY(-6px); }
.sm-card.sel { transform: translateY(-12px); border-color: var(--hi); box-shadow: 0 0 0 2px var(--hi), 0 10px 30px rgba(0,0,0,.5); }
.sm-card.off { opacity: .45; }
.sm-card.ev { background: linear-gradient(170deg, #241C2C, #0E1116); }
.sm-card b { font-weight: 500; font-size: 13.5px; line-height: 1.2; padding-right: 22px; }
.sm-card small { font-size: 11px; line-height: 1.3; color: var(--muted); }
.sm-card .sm-k { color: #E6B4FF; font: 500 10px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.sm-cost { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: #2563EB; color: #fff; font: 500 13px/1 var(--mono); }
.sm-pr { font: 500 16px/1 var(--mono); color: var(--c); }
.sm-pr i { color: var(--muted); font-style: normal; margin: 0 2px; }
.sm-acts { display: grid; gap: 8px; width: 190px; }
.sm-acts button { min-height: 42px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--alt); color: var(--text); cursor: pointer; font-size: 13px; }
.sm-end { background: #2563EB !important; border-color: #2563EB !important; color: #fff !important; font-weight: 500; font-size: 15px !important; }
.sm-acts button:disabled { opacity: .45; cursor: default; }
.sm-mk { display: grid; gap: 1px; padding: 5px 9px; border-radius: 999px; border: 1px solid var(--line); background: rgba(7,9,13,.8); color: var(--text); font: 500 12px/1.2 var(--font); cursor: pointer; text-align: center; }
.sm-mk span { font: 400 11px/1 var(--mono); color: var(--muted); }
.sm-mk.own-you { border-color: var(--cy); color: var(--cy); }
.sm-mk.own-ai { border-color: var(--ca); color: var(--ca); }
.sm-over { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(7,9,13,.6); pointer-events: auto; }
.sm-over[hidden] { display: none; }
.sm-over > div { padding: 28px 32px; border-radius: 18px; background: var(--panel); border: 1px solid var(--line); text-align: center; max-width: 420px; }
.sm-over h2 { margin: 0 0 8px; font-size: 26px; }
.sm-over p { color: var(--muted); margin: 0 0 18px; }
.sm-over .btn { cursor: pointer; }
.fun-facs { display: grid; gap: 6px; margin: 4px 0 8px; }
.fun-facs label { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: center; padding: 8px 10px; border-radius: 9px; border: 1px solid var(--line); background: var(--alt); cursor: pointer; }
.fun-facs label:has(input:checked) { border-color: var(--hi); }
.fun-facs input { accent-color: var(--hi); margin: 0; grid-row: span 2; }
.fun-facs small { color: var(--muted); }
@media (max-width: 900px) {
  .sm-top { grid-template-columns: 1fr 1fr; }
  .sm-mid { grid-column: 1; grid-row: 2; text-align: left; }
  .sm-x { grid-column: 2; grid-row: 2; justify-self: end; min-height: 34px; font-size: 13px; }
  .sm-regs { grid-template-columns: repeat(3, minmax(0, 1fr)); bottom: calc(168px + env(safe-area-inset-bottom, 0px)); }
  .sm-bar { grid-template-columns: 1fr auto; }
  .sm-inf { display: none; }
  .sm-acts { width: 120px; }
  .sm-pow { font-size: 11px !important; }
  .sm-card { width: 112px; min-height: 120px; }
}
/* ---------- driving ---------- */
.dv-veh { position: absolute; left: 0; top: 0; width: 46px; height: auto; will-change: transform; filter: drop-shadow(0 4px 4px rgba(0,0,0,.6)); }
.dv-arrow { display: grid; place-items: center; width: 52px; height: 52px; padding: 0; }
.dv-arrow svg { transition: transform .2s; }
/* ---------- Sands of Earth (RTS) ---------- */
body.rts-on .au-clock, body.rts-on .au-tt { display: none !important; }
.rts-cv { position: fixed; inset: 0; z-index: 29; touch-action: none; cursor: crosshair; }
.rts-zoom { display: flex; gap: 6px; margin-top: 8px; }
.rts-zoom button { flex: 1; min-height: 34px; border-radius: 9px; border: 1px solid var(--line); background: var(--alt); color: var(--text); font-size: 18px; cursor: pointer; }
.rts-ui { position: fixed; inset: 0; z-index: 30; pointer-events: none; font-family: var(--font); color: var(--text); }
.rts-top { position: absolute; top: calc(12px + env(safe-area-inset-top, 0px)); left: var(--gut-l); right: var(--gut-r); display: flex; gap: 12px; align-items: flex-start; }
.rts-top > .fl-box { pointer-events: auto; font-size: 14px; }
.rts-cr { font: 500 18px/1 var(--mono); color: #FFB648; }
.rts-info { color: var(--muted); font-size: 13px; }
.rts-msg { flex: 1; margin: 8px 0 0; text-align: center; font-size: 14px; text-shadow: 0 1px 4px #000; }
.rts-top .fl-tr { position: static; pointer-events: auto; }
.rts-top button { font: 500 13px/1 var(--font); color: var(--text); background: rgba(17,21,27,.88); border: 1px solid var(--line); border-radius: 999px; padding: 10px 14px; cursor: pointer; }
.rts-panel { position: absolute; right: var(--gut-r); top: calc(72px + env(safe-area-inset-top, 0px)); width: 236px; padding: 12px; border-radius: 14px; background: rgba(7,9,13,.82); border: 1px solid var(--line);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); pointer-events: auto; }
.rts-h { margin: 0 0 8px; font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.rts-btns { display: grid; gap: 6px; }
.rts-btns button { display: grid; grid-template-columns: 1fr auto; gap: 1px 8px; text-align: left; padding: 8px 10px; border-radius: 9px; border: 1px solid var(--line); background: var(--alt); color: var(--text); cursor: pointer; font-family: var(--font); }
.rts-btns button b { font-weight: 500; font-size: 13.5px; }
.rts-btns button span { font: 500 12px/1.6 var(--mono); color: #FFB648; }
.rts-btns button small { grid-column: 1 / -1; color: var(--muted); font-size: 11px; }
.rts-btns button:hover { border-color: var(--hi); }
.rts-btns button.on { border-color: var(--hi); box-shadow: inset 0 0 0 1px var(--hi); }
.rts-btns button:disabled { opacity: .45; cursor: default; }
.rts-q { margin: 8px 0 0; font-size: 12px; color: var(--hi); min-height: 1em; }
.rts-help { margin: 8px 0 0; font-size: 11.5px; line-height: 1.4; color: var(--muted); }
@media (max-width: 760px) {
  .rts-top { flex-wrap: wrap; }
  .rts-msg { order: 3; flex: 1 1 100%; margin: 0; }
  .rts-panel { top: auto; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); left: var(--gut-l); right: var(--gut-r); width: auto; padding: 8px; }
  .rts-btns { grid-template-columns: repeat(3, 1fr); }
  .rts-btns button small, .rts-help, .rts-h { display: none; }
  .rts-zoom { position: fixed; right: var(--gut-r); top: calc(120px + env(safe-area-inset-top, 0px)); flex-direction: column; }
}