/* few. — the board */
html, body { margin: 0; padding: 0; background: #0A0A0A; overflow: hidden; height: 100%; }
* { box-sizing: border-box; }
body { font-family: 'IBM Plex Mono', monospace; color: #E8E2D0; }
a { color: #C9A227; text-decoration: none; }
a:hover { color: #E8E2D0; }
::selection { background: #C0392B; color: #E8E2D0; }
.hidden { display: none !important; }
.gold { color: #C9A227; }
@keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes crt-on {
0% { transform: scaleY(0.004) scaleX(0.6); filter: brightness(6); }
35% { transform: scaleY(0.004) scaleX(1); filter: brightness(6); }
60% { transform: scaleY(1) scaleX(1); filter: brightness(2.4); }
100% { transform: scaleY(1) scaleX(1); filter: brightness(1); }
}
@keyframes flickr { 0% {opacity:1;} 3% {opacity:0.72;} 6% {opacity:1;} 52% {opacity:1;} 54% {opacity:0.85;} 56% {opacity:1;} 100% {opacity:1;} }
@keyframes sway { 0% { transform: rotate(-0.9deg); } 50% { transform: rotate(0.9deg); } 100% { transform: rotate(-0.9deg); } }
@keyframes settle {
0% { transform: translateY(-6px) rotate(var(--rot, 0deg)); opacity: 0; }
70% { transform: translateY(1px) rotate(var(--rot, 0deg)); opacity: 1; }
100% { transform: translateY(0) rotate(var(--rot, 0deg)); opacity: 1; }
}
@keyframes stampin {
0% { transform: scale(2.4) rotate(-14deg); opacity: 0; }
60% { transform: scale(0.95) rotate(-14deg); opacity: 1; }
100% { transform: scale(1) rotate(-14deg); opacity: 0.9; }
}
/* ---------- screens ---------- */
.screen { position: fixed; inset: 0; background: #0A0A0A; }
/* ---------- terminal ---------- */
.terminal { display: flex; align-items: center; justify-content: center; z-index: 100; cursor: text; }
.term-inner {
width: min(640px, 88vw);
font-size: clamp(15px, 2.2vw, 20px);
line-height: 2;
letter-spacing: 0.04em;
color: #C8C2B0;
text-shadow: 0 0 8px rgba(200,194,176,0.35);
}
.term-inner .term-line { min-height: 1.6em; white-space: pre-wrap; }
.term-typing-row { display: flex; align-items: baseline; gap: 2px; }
#typing-line { white-space: pre-wrap; }
.cursor {
display: inline-block; width: 0.6em; height: 1.15em; background: #C8C2B0;
animation: blink 1.06s step-end infinite; transform: translateY(0.18em);
box-shadow: 0 0 10px rgba(200,194,176,0.5);
}
.yn { display: flex; gap: 18px; margin-top: 34px; }
.yn-btn {
background: none; border: 1px solid rgba(200,194,176,0.35); color: #C8C2B0;
font-family: 'IBM Plex Mono', monospace; font-size: 17px; padding: 12px 34px;
min-height: 48px; cursor: pointer; letter-spacing: 0.1em;
}
.yn-y:hover, .yn-y:focus-visible { border-color: #C9A227; color: #C9A227; }
.yn-n:hover, .yn-n:focus-visible { border-color: #C0392B; color: #C0392B; }
.scanlines {
position: absolute; inset: 0; pointer-events: none;
background: repeating-linear-gradient(0deg, rgba(0,0,0,0.22) 0px, rgba(0,0,0,0.22) 1px, transparent 1px, transparent 3px);
mix-blend-mode: multiply;
}
.crt-vignette {
position: absolute; inset: 0; pointer-events: none;
background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.75) 100%);
}
/* ---------- rejected ---------- */
.rejected { display: flex; align-items: center; justify-content: center; z-index: 110; }
.rejected-text {
font-size: clamp(16px, 2.4vw, 22px); color: #7A7566; letter-spacing: 0.05em;
transition: opacity 4s ease;
}
/* ---------- board ---------- */
.board {
overflow: hidden; background: #12100D;
animation: crt-on 0.9s ease-out both, flickr 7s linear 1s infinite;
touch-action: none;
}
.cam {
position: absolute; left: 50%; top: 50%; width: 2400px; height: 1500px;
transform-origin: center center; cursor: grab;
}
.cam.dragging { cursor: grabbing; }
.cork {
position: absolute; inset: 0; background: #2A1F16;
background-image:
radial-gradient(circle at 20% 30%, rgba(90,65,40,0.5) 0%, transparent 50%),
radial-gradient(circle at 75% 60%, rgba(80,58,36,0.45) 0%, transparent 45%),
radial-gradient(circle at 50% 90%, rgba(70,50,32,0.4) 0%, transparent 40%),
repeating-radial-gradient(circle at 33% 44%, rgba(0,0,0,0.12) 0px, transparent 3px, rgba(255,255,255,0.02) 5px, transparent 7px);
border: 22px solid #1A130D;
box-shadow: inset 0 0 120px rgba(0,0,0,0.9);
}
.strings { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.sway { transform-origin: 1200px 300px; animation: sway 7s ease-in-out infinite; }
.item { position: absolute; transform: rotate(var(--rot, 0deg)); }
.settle { animation: settle 0.6s ease-out var(--delay, 0s) both; }
.pin {
position: absolute; width: 16px; height: 16px; border-radius: 50%;
background: radial-gradient(circle at 35% 30%, #E74C3C, #7B241C);
box-shadow: 0 3px 5px rgba(0,0,0,0.6);
}
.pin-blue { background: radial-gradient(circle at 35% 30%, #4A6B8A, #24354A); }
/* polaroids */
.polaroid {
background: #E8E2D0; padding: 10px 10px 40px;
box-shadow: 0 8px 24px rgba(0,0,0,0.7);
}
.polaroid img { width: 100%; display: block; }
.polaroid-caption {
font-family: 'Special Elite', monospace; font-size: 13px; color: #3A342A;
margin-top: 8px; text-align: center;
}
.chart-polaroid { padding: 14px 14px 52px; cursor: pointer; }
.chart-polaroid:hover { box-shadow: 0 12px 32px rgba(0,0,0,0.85); }
.chart-polaroid .polaroid-caption { font-size: 15px; margin-top: 12px; }
.mini-chart {
width: 100%; height: 190px; background: #0d0d0d;
display: flex; align-items: flex-end; gap: 5px; padding: 14px 10px; overflow: hidden;
}
.candle { flex: 1; position: relative; }
.candle .wick { position: absolute; left: 50%; width: 1px; }
/* contract note */
.ca-note {
background: #E8E2D0; padding: 26px 22px 30px;
box-shadow: 0 8px 24px rgba(0,0,0,0.7); cursor: pointer;
clip-path: polygon(0 3%, 4% 0, 96% 1%, 100% 5%, 99% 94%, 93% 100%, 55% 97%, 8% 100%, 0 95%);
}
.ca-label { font-family: 'Special Elite', monospace; font-size: 13px; color: #6B6455; margin-bottom: 8px; }
.ca-addr {
font-size: 14px; font-weight: 600; color: #2B261E; word-break: break-all; line-height: 1.5;
}
.coffee-ring {
position: absolute; right: 12px; bottom: 8px; width: 74px; height: 74px; border-radius: 50%;
border: 11px solid rgba(120,85,45,0.28); filter: blur(0.5px);
}
.stamp-wrap { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.stamp {
font-family: 'Special Elite', monospace; font-size: 30px; color: #C0392B;
border: 4px solid #C0392B; padding: 6px 16px; transform: rotate(-14deg);
opacity: 0.9; animation: stampin 0.5s ease-out both; letter-spacing: 0.08em;
}
/* cluster */
.cluster-row { display: flex; gap: 14px; }
.cluster-card { background: #E8E2D0; padding: 8px 8px 26px; box-shadow: 0 6px 18px rgba(0,0,0,0.7); }
.cluster-img {
height: 80px; display: flex; align-items: center; justify-content: center;
font-size: 10px; font-family: 'Special Elite', monospace; color: rgba(255,255,255,0.85); text-align: center;
}
.cluster-img.hormuz { background: linear-gradient(180deg, #7FA8C9 0%, #3E6B8F 60%, #C9B98F 60%, #A68B5B 100%); }
.cluster-img.emoji { font-size: 34px; }
.cluster-note {
margin-top: 18px; margin-left: 90px; width: 170px; background: #EDE7D4; padding: 14px;
transform: rotate(2deg); box-shadow: 0 6px 18px rgba(0,0,0,0.7);
font-family: 'Caveat', cursive; font-size: 26px; color: #2B261E; text-align: center;
}
/* dossier */
.dossier { cursor: pointer; }
.dossier-bg { position: absolute; inset: 0; background: #C4A265; box-shadow: 0 8px 24px rgba(0,0,0,0.7); }
.dossier-tab {
position: absolute; top: -16px; left: 18px; width: 110px; height: 20px; background: #C4A265;
clip-path: polygon(0 100%, 8% 0, 92% 0, 100% 100%);
}
.dossier-face {
position: absolute; inset: 10px; border: 1px dashed rgba(60,40,20,0.4);
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
}
.dossier-title { font-family: 'Special Elite', monospace; font-size: 21px; letter-spacing: 0.14em; color: #3A2B18; }
.dossier-sub { font-size: 11px; color: #7A5C33; }
.dossier-secret {
font-family: 'Special Elite', monospace; font-size: 13px; color: #C0392B;
border: 2px solid #C0392B; padding: 2px 10px; transform: rotate(-6deg);
}
/* group card */
.group-card {
background: #F0EAD8;
background-image: repeating-linear-gradient(180deg, transparent 0px, transparent 25px, rgba(160,60,50,0.25) 26px);
padding: 20px 18px 24px; box-shadow: 0 8px 24px rgba(0,0,0,0.7);
}
.group-title { font-family: 'Special Elite', monospace; font-size: 17px; color: #2B261E; margin-bottom: 12px; }
.group-links { display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.group-links a { color: #4A4436; }
.group-links a:hover { color: #C0392B; }
/* newspaper clip */
.news-clip {
background: #EDE8D8; padding: 20px; box-shadow: 0 8px 24px rgba(0,0,0,0.7); cursor: pointer;
clip-path: polygon(1% 0, 99% 2%, 100% 97%, 3% 100%, 0 60%, 2% 30%);
}
.news-masthead {
font-family: 'Special Elite', monospace; font-size: 10px; color: #8A8272;
border-bottom: 2px solid #2B261E; padding-bottom: 4px; display: flex; justify-content: space-between;
}
.news-headline { font-family: 'Special Elite', monospace; font-size: 24px; line-height: 1.15; color: #1E1A14; margin-top: 10px; }
.news-body { font-size: 10.5px; color: #6B6455; margin-top: 8px; line-height: 1.6; }
.news-cta { font-size: 10px; color: #A09880; margin-top: 10px; }
/* reserved pin */
.reserved-pin {
left: 2010px; top: 320px; width: 44px; height: 44px;
display: flex; align-items: center; justify-content: center; cursor: help;
}
.pin-static { position: static; width: 20px; height: 20px; box-shadow: 0 3px 6px rgba(0,0,0,0.7); }
.pin-tip {
position: absolute; top: -44px; left: 50%; transform: translateX(-50%);
background: #0A0A0A; color: #C9A227; font-size: 13px; padding: 8px 14px;
white-space: nowrap; border: 1px solid rgba(201,162,39,0.4);
}
/* bestiary card */
.bestiary-card { background: #DDD6C2; padding: 18px 20px 22px; box-shadow: 0 8px 24px rgba(0,0,0,0.7); cursor: pointer; }
.bestiary-title { font-family: 'Special Elite', monospace; font-size: 16px; color: #2B261E; letter-spacing: 0.08em; }
.bestiary-sub { font-size: 11px; color: #6B6455; margin-top: 6px; line-height: 1.6; }
.bestiary-pages { font-family: 'Special Elite', monospace; font-size: 12px; color: #C0392B; margin-top: 10px; }
/* clipboard */
.clipboard { background: #8A5A2B; padding: 30px 16px 18px; box-shadow: 0 8px 24px rgba(0,0,0,0.7); cursor: pointer; border-radius: 6px; }
.clip-metal {
position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
width: 70px; height: 16px; background: #B0A89A; border-radius: 4px;
box-shadow: inset 0 -2px 3px rgba(0,0,0,0.4);
}
.clip-paper { background: #F0EAD8; padding: 16px 14px; min-height: 150px; }
.clip-title {
font-family: 'Special Elite', monospace; font-size: 13px; color: #2B261E;
border-bottom: 1px solid #B0A890; padding-bottom: 6px;
}
.clip-names { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.clip-names div { font-family: 'Caveat', cursive; font-size: 19px; color: #3A342A; }
.clip-count { font-size: 12px; color: #6B6455; margin-top: 10px; }
/* scraps */
.scrap { background: #EDE7D4; padding: 14px; box-shadow: 0 5px 14px rgba(0,0,0,0.6); }
.caveat { font-family: 'Caveat', cursive; font-size: 22px; color: #2B261E; }
.mono-scrap { font-size: 13px; color: #6B4A3A; padding: 12px; }
.few-center {
position: absolute; left: 1200px; top: 700px; transform: translate(-50%,-50%);
font-family: 'Special Elite', monospace; font-size: 64px; color: #C9A227;
text-shadow: 0 0 30px rgba(201,162,39,0.35); pointer-events: none;
}
.lamp-vignette {
position: absolute; inset: 0; pointer-events: none;
background: radial-gradient(ellipse 55% 55% at 50% 45%, transparent 30%, rgba(0,0,0,0.55) 75%, rgba(0,0,0,0.92) 100%);
}
/* fixed UI */
.lamp {
position: absolute; right: 22px; bottom: 22px; width: 52px; height: 52px;
background: none; border: none; cursor: pointer; font-size: 26px; z-index: 20;
filter: grayscale(1) brightness(0.5);
}
.lamp.on { filter: none; }
.hint {
position: absolute; left: 22px; bottom: 24px; font-size: 11px;
color: rgba(232,226,208,0.35); pointer-events: none; z-index: 20;
}
/* ---------- modals ---------- */
.modal-overlay {
position: absolute; inset: 0; background: rgba(5,5,5,0.82);
display: flex; align-items: center; justify-content: center; z-index: 50; cursor: pointer;
}
.modal-box { cursor: default; max-width: min(560px, 92vw); max-height: 86vh; overflow: auto; }
.chart-frame {
background: #0d0d0d; border: 3px solid #C9A227; border-radius: 50% / 8%;
padding: 40px; box-shadow: 0 0 80px rgba(201,162,39,0.15);
}
.big-chart { display: flex; align-items: flex-end; gap: 8px; height: 260px; width: min(460px, 80vw); }
.big-chart .candle { flex: 1; }
.chart-caption { font-size: 13px; color: #7A7566; margin-top: 20px; text-align: center; }
.paper-modal {
background: #E8E2D0; padding: 44px 40px; font-family: 'Special Elite', monospace;
color: #2B261E; box-shadow: 0 20px 60px rgba(0,0,0,0.8);
}
.paper-title { font-size: 22px; letter-spacing: 0.12em; border-bottom: 3px double #2B261E; padding-bottom: 10px; }
.paper-title.small { font-size: 20px; }
.tokenomics-lines { font-size: 15px; line-height: 2.3; margin-top: 24px; }
.declassified {
font-size: 12px; color: #C0392B; margin-top: 24px; transform: rotate(-2deg);
border: 2px solid #C0392B; display: inline-block; padding: 4px 12px;
}
.bestiary-list { display: flex; flex-direction: column; gap: 18px; margin-top: 22px; font-size: 14px; line-height: 1.8; }
.bestiary-list .b-name { font-weight: 600; font-size: 15px; }
.bestiary-list .b-desc { font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; color: #55503F; }
.bestiary-footer { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: #8A8272; margin-top: 22px; }
.news-modal { background: #EDE8D8; padding: 36px 34px; box-shadow: 0 20px 60px rgba(0,0,0,0.8); width: min(480px, 88vw); }
.news-modal-masthead {
font-family: 'Special Elite', monospace; font-size: 11px; color: #8A8272;
border-bottom: 3px double #1E1A14; padding-bottom: 6px; display: flex; justify-content: space-between;
}
.news-modal-headline { font-family: 'Special Elite', monospace; font-size: 34px; line-height: 1.1; color: #1E1A14; margin-top: 16px; }
.news-modal-body { font-size: 13px; color: #4A4436; margin-top: 14px; line-height: 1.8; }
#news-name {
margin-top: 18px; width: 100%; background: transparent; border: none;
border-bottom: 2px solid #2B261E; font-family: 'Caveat', cursive; font-size: 22px;
color: #2B261E; padding: 6px 2px; outline: none;
}
.dark-btn {
margin-top: 18px; background: #1E1A14; color: #E8E2D0; border: none;
font-family: 'IBM Plex Mono', monospace; font-size: 13px; padding: 12px 22px;
cursor: pointer; min-height: 44px;
}
.dark-btn:hover, .dark-btn:focus-visible { background: #C0392B; }
.dark-btn.wide { margin-top: 20px; width: 100%; padding: 14px; min-height: 48px; }
.clip-modal {
background: #F0EAD8; padding: 36px 34px; box-shadow: 0 20px 60px rgba(0,0,0,0.8);
width: min(440px, 88vw); font-family: 'Special Elite', monospace; color: #2B261E;
}
.clip-modal-title { font-size: 19px; border-bottom: 2px solid #2B261E; padding-bottom: 8px; }
.signatures { display: flex; flex-direction: column; gap: 6px; margin-top: 16px; max-height: 220px; overflow: auto; }
.sig-row { display: flex; justify-content: space-between; align-items: baseline; }
.sig-name { font-family: 'Caveat', cursive; font-size: 22px; color: #3A342A; }
.sig-when { font-family: 'IBM Plex Mono', monospace; font-size: 10px; color: #A09880; }
.clip-modal-count { font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: #6B6455; margin-top: 16px; text-align: center; }