/* Arrow Arcade — a top-down Web3 room. Sits on the shared pixel/CRT theme. */
/* Fullscreen arcade (hub page only) */
body { padding: 0 !important; overflow: hidden; }
.crt { width: 100vw !important; height: 100vh; max-width: none !important;
  border: 0; border-radius: 0; padding: 8px 12px; display: flex; flex-direction: column; }

.back { position: absolute; top: 14px; left: 14px; z-index: 14; font-size: 8px;
  color: var(--amber); text-decoration: none; background: #06110a; border: 2px solid var(--line);
  padding: 6px 8px; border-radius: 4px; }
.back:active { transform: translateY(2px); }

.room {
  position: relative;
  flex: 1;
  min-height: 0;
  margin-top: 6px;
  border-radius: 8px;
  overflow: hidden;
  /* top-down checkerboard floor */
  background:
    repeating-conic-gradient(from 0deg, #10251540 0% 25%, #0b1b0f40 0% 50%) 0 0 / 52px 52px,
    linear-gradient(#0d2013, #0a180e);
  /* wall ring (dark) + inner neon edge + vignette */
  box-shadow:
    inset 0 0 0 14px #0a150c,
    inset 0 0 0 16px rgba(70,211,105,.18),
    inset 0 0 60px rgba(0,0,0,.65);
  image-rendering: pixelated;
  touch-action: none;
}

/* back wall band (you see more of the north wall in top-down) */
.northwall {
  position: absolute; top: 0; left: 0; right: 0; height: 72px; z-index: 1;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.25) 0 2px, transparent 2px 46px),
    linear-gradient(#0a160d, #0c1e12);
  border-bottom: 3px solid #245a2e;
  box-shadow: 0 4px 16px rgba(70,211,105,.18);
}

/* scrolling price ticker along the very top */
.ticker { position: absolute; top: 0; left: 0; right: 0; height: 16px; z-index: 6;
  overflow: hidden; background: #06110a; border-bottom: 2px solid var(--line);
  font-size: 7px; line-height: 16px; color: var(--amber); white-space: nowrap; }
.ticker span { display: inline-block; padding-left: 100%; animation: scrollx 34s linear infinite; }
@keyframes scrollx { to { transform: translateX(-66.66%); } }

/* neon sign on the back wall */
.neon { position: absolute; top: 44px; left: 50%; transform: translate(-50%, -50%); z-index: 3;
  font-size: 13px; letter-spacing: 2px; color: #8ff9b0;
  text-shadow: 0 0 6px #46d369, 0 0 14px #46d369, 0 0 26px #2b8f45;
  animation: neon 5s infinite steps(40); }
@keyframes neon { 0%,90%,100% { opacity: 1; } 92% { opacity: .55; } 94% { opacity: 1; } 96% { opacity: .7; } }

/* framed sticker posters on the back wall */
.poster { position: absolute; z-index: 3; transform: translate(-50%, -50%); text-align: center; width: 84px; }
.poster img { width: 72px; height: 72px; border: 3px solid #2f6d38; border-radius: 5px;
  background: #06110a; padding: 3px; box-shadow: 0 0 12px rgba(70,211,105,.35); }
.poster span { display: block; font-size: 7px; color: var(--amber); margin-top: 4px; }

/* Pinned reads on the back wall — printed sheets you click to open a doc in the panel */
.paper { position: absolute; z-index: 4; transform: translate(-50%, -50%); width: 96px;
  text-align: center; cursor: pointer; }
.paper .sheet { position: relative; padding: 12px 8px 11px; border-radius: 3px;
  background: linear-gradient(160deg, #f6f3e6, #ddd8c4); color: #23331f; border: 1px solid #b9b39a;
  box-shadow: 0 5px 12px rgba(0,0,0,.55); transition: transform .12s ease, box-shadow .12s ease; }
.paper.tilt-l .sheet { transform: rotate(-3deg); }
.paper.tilt-r .sheet { transform: rotate(3deg); }
.paper:hover .sheet { transform: rotate(0) translateY(-4px); box-shadow: 0 10px 18px rgba(0,0,0,.6); }
.paper .pin { position: absolute; top: 3px; left: 50%; transform: translateX(-50%); z-index: 3;
  width: 12px; height: 12px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ff9a9a, #c0392b); box-shadow: 0 2px 3px rgba(0,0,0,.55); }
.paper .ic { font-size: 20px; display: block; line-height: 1; margin-top: 2px; }
.paper .t { font-size: 7px; font-weight: 700; color: #1c2b19; margin-top: 6px; line-height: 1.5; letter-spacing: .5px; }
.paper .s { font-size: 6px; color: #5c6b52; margin-top: 3px; }
.paper .corner { position: absolute; right: 0; bottom: 0; border-style: solid; border-width: 0 0 12px 12px;
  border-color: transparent transparent rgba(0,0,0,.18) transparent; border-radius: 0 0 3px 0; }

/* Couch TV — a little living room: Fletcher sits, the TV plays charts, flip channels */
.tv { position: fixed; inset: 0; z-index: 120; background: rgba(5,10,6,.94);
  display: flex; align-items: center; justify-content: center; padding: 20px; }
.tv.hidden { display: none; }
.tv-close { position: absolute; top: 14px; right: 16px; z-index: 5; font-family: inherit; cursor: pointer;
  font-size: 10px; color: var(--amber); background: #06110a; border: 2px solid var(--line); border-radius: 4px; padding: 6px 9px; }
.tv-room { display: flex; align-items: flex-end; justify-content: center; gap: 26px; flex-wrap: wrap; }
/* Fletcher on the couch */
.tv-couch { display: flex; flex-direction: column; align-items: center; }
.tv-fletcher { width: 120px; height: 120px; image-rendering: auto; filter: drop-shadow(0 4px 0 #06110a); margin-bottom: -12px; z-index: 2; }
.tv-sofa { width: 150px; height: 46px; background: #3a1f4a; border: 3px solid #5a2f6e; border-radius: 10px 10px 6px 6px;
  box-shadow: inset 0 -8px 0 rgba(0,0,0,.25), inset 8px 0 0 #4a2a5e, inset -8px 0 0 #4a2a5e; }
/* The TV set */
.tv-set { position: relative; background: #0c1f10; border: 6px solid #1f4a26; border-radius: 14px;
  padding: 14px; box-shadow: 0 0 0 4px #06110a, 0 0 40px rgba(70,211,105,.25); max-width: 620px; width: 100%; }
.tv-screen { position: relative; background: #06110a; border: 3px solid #2f6d38; border-radius: 8px; padding: 12px; overflow: hidden; }
.tv-scan { pointer-events: none; position: absolute; inset: 0; z-index: 2;
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,.16) 0 2px, transparent 2px 4px); }
.tv-title { position: relative; z-index: 3; font-size: 10px; color: var(--ink); margin-bottom: 10px; }
.tv-title b { color: var(--amber); }
#tv-chart { position: relative; z-index: 1; width: 100%; height: auto; display: block; border-radius: 4px; image-rendering: auto; }
.tv-sub { position: relative; z-index: 3; font-size: 8px; color: var(--dim); margin-top: 10px; line-height: 1.6; }
.tv-sub b { color: var(--ink); }
/* Channel selector */
.tv-channels { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.tv-ch { font-family: inherit; font-size: 8px; cursor: pointer; color: var(--dim);
  background: #0b1a0f; border: 2px solid var(--line); border-radius: 4px; padding: 7px 10px; }
.tv-ch:hover { border-color: var(--dim); }
.tv-ch.active { color: #06110a; background: var(--green); border-color: var(--green); }
.tv-ch .ch-tag { opacity: .8; }

/* a literal floor rug 😏 (flat, top-down) */
.rug { position: absolute; z-index: 1; left: 50%; top: 54%; transform: translate(-50%, -50%);
  width: 340px; height: 190px; border-radius: 10px; border: 5px solid #6a2f2f;
  background:
    repeating-linear-gradient(45deg, #7a2f3a 0 9px, #5c2430 9px 18px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,.18) 0 9px, transparent 9px 18px);
  box-shadow: 0 0 0 5px #3a1620, inset 0 0 22px rgba(0,0,0,.5); opacity: .9; }

/* top-down couch against the back wall */
.sofa { position: absolute; z-index: 1; left: 50%; top: 116px; transform: translateX(-50%);
  width: 200px; height: 56px; border-radius: 12px; background: #2b3f5c; border: 3px solid #1b2a40;
  box-shadow: inset 0 -10px 0 #22344d; }
.sofa::before { content: ""; position: absolute; inset: 8px 10px 16px; border-radius: 8px;
  background: repeating-linear-gradient(90deg, #34507a 0 56px, #2b3f5c 56px 60px); }

/* corner props */
.prop { position: absolute; z-index: 2; }
/* pixel-art canvas props (plant, coin, gem) */
.prop-c { position: absolute; z-index: 2; image-rendering: pixelated; }
.prop-c.plant { filter: drop-shadow(0 3px 2px rgba(0,0,0,.5)); }
.prop-c.coin { transform: translate(-50%, -50%); filter: drop-shadow(0 3px 2px rgba(0,0,0,.5)); animation: floaty 2.4s ease-in-out infinite; }
.prop-c.coin:nth-of-type(even) { animation-delay: -1.2s; }
.prop.server { top: 96px; right: 26px; width: 42px; height: 66px; background: #0c1c12;
  border: 2px solid #245a2e; border-radius: 4px; display: flex; flex-direction: column; gap: 7px; padding: 8px 6px; }
.prop.server i { width: 8px; height: 8px; border-radius: 50%; background: #46d369; box-shadow: 0 0 5px #46d369; }
.prop.server i:nth-child(1) { animation: led 1.1s steps(2) infinite; }
.prop.server i:nth-child(2) { background: var(--amber); box-shadow: 0 0 5px var(--amber); animation: led 1.7s steps(2) infinite; }
.prop.server i:nth-child(3) { animation: led .8s steps(2) infinite; }
@keyframes led { 50% { opacity: .2; } }

/* stations = desks with a glowing monitor */
.station { position: absolute; width: 128px; text-align: center; cursor: pointer; z-index: 4; transform: translate(-50%, -50%); }
.station .screen { width: 90px; height: 66px; margin: 0 auto; border: 3px solid var(--line);
  border-radius: 5px 5px 2px 2px; background: #06110a; display: flex; align-items: center; justify-content: center;
  font-size: 28px; box-shadow: inset 0 0 14px rgba(0,0,0,.6); }
.station .desk { width: 116px; height: 18px; margin: 0 auto; background: linear-gradient(#3a2413, #26160c);
  border: 2px solid #1c1109; border-radius: 3px; box-shadow: 0 5px 8px rgba(0,0,0,.5); }
.station .label { font-size: 7px; line-height: 1.5; color: var(--dim); margin-top: 6px; text-shadow: 0 1px 0 #000; }
.station.active .screen { border-color: var(--green); box-shadow: 0 0 16px rgba(70,211,105,.5), inset 0 0 14px rgba(0,0,0,.6); animation: blink 1.6s steps(2) infinite; }
.station.active .label { color: var(--ink); }
.station.soon { opacity: .8; }
.station.soon .label::after { content: " · SOON"; color: var(--amber); }
.station.near .screen { transform: scale(1.07); }
@keyframes blink { 50% { border-color: #2b6e3c; } }

#hero { position: absolute; width: 70px; height: 90px; left: 0; top: 0; z-index: 5;
  image-rendering: pixelated; will-change: left, top; }

/* ⛏️ GPU mining rig */
.rig { position: absolute; z-index: 2; transform: translate(-50%, -50%);
  width: 88px; background: #0c1c12; border: 3px solid #245a2e; border-radius: 5px;
  padding: 7px; display: flex; flex-direction: column; gap: 6px; box-shadow: 0 5px 10px rgba(0,0,0,.5), 0 0 12px rgba(70,211,105,.22); }
.rig.small { transform: translate(-50%, -50%) scale(.85); }
.rig .gpu { height: 13px; background: #14301a; border: 1px solid #2f6d38; border-radius: 2px;
  display: flex; align-items: center; gap: 6px; padding: 0 5px; }
.rig .fan { width: 9px; height: 9px; border-radius: 50%; border: 2px solid #2f6d38; border-top-color: #8ff9b0; animation: spin .5s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* floating coins / gems bob animation */
@keyframes floaty { 50% { transform: translate(-50%, -62%); } }

/* accessible "PLAY" tag on the active terminal */
.play-tag { position: absolute; top: -20px; left: 50%; transform: translateX(-50%);
  font-size: 7px; color: #06110a; background: var(--green); padding: 4px 7px; border-radius: 4px;
  box-shadow: 0 3px 0 #06110a; animation: floaty2 1s steps(2) infinite; white-space: nowrap; }
@keyframes floaty2 { 50% { transform: translateX(-50%) translateY(-3px); } }

.prompt { position: absolute; z-index: 8; transform: translate(-50%, -100%);
  font-size: 7px; color: #06110a; background: var(--amber); padding: 5px 7px; border-radius: 4px;
  white-space: nowrap; box-shadow: 0 3px 0 #06110a; }
.prompt::after { content: ""; position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%);
  border: 4px solid transparent; border-top-color: var(--amber); }

.toast { position: absolute; z-index: 20; left: 50%; bottom: 24px; transform: translateX(-50%);
  background: #06110a; border: 2px solid var(--amber); color: var(--amber); font-size: 8px; padding: 10px 14px; border-radius: 6px; }

/* In-place terminal (embedded game) — opens without leaving the arcade */
.terminal { position: fixed; inset: 0; z-index: 50; background: #050a06;
  opacity: 0; visibility: hidden; transition: opacity .28s ease; }
.terminal.open { opacity: 1; visibility: visible; }
#term-frame { width: 100%; height: 100%; border: 0; display: block; }
.term-close { position: absolute; top: 16px; right: 18px; z-index: 52; font-family: inherit; cursor: pointer;
  font-size: 9px; color: var(--amber); background: #06110a; border: 2px solid var(--line);
  padding: 9px 13px; border-radius: 5px; box-shadow: 0 3px 0 #000; }
.term-close:hover { border-color: var(--amber); }
.term-close:active { transform: translateY(2px); box-shadow: 0 1px 0 #000; }
/* CRT power-on flash when a terminal opens */
.terminal.open #term-frame { animation: crt-on .4s ease-out; }
@keyframes crt-on { 0% { transform: scale(1.03); filter: brightness(2.2) saturate(1.4); } 60% { filter: brightness(1.3); } 100% { transform: scale(1); filter: none; } }