:root {
  --fg: #fff;
  --amber: #ffb000;
  color-scheme: dark;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  background: #000;
  color: var(--fg);
  font: 12px/1.6 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  letter-spacing: .04em;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  text-transform: lowercase;
}
#c { position: fixed; inset: 0; display: block; width: 100%; height: 100%; touch-action: none; }

.dim  { color: rgba(255,255,255,.45); }
.tiny { font-size: 10px; line-height: 1.7; }
.err  { color: var(--amber); min-height: 1em; font-size: 11px; }

#hud {
  position: fixed; top: 0; left: 0; right: 0;
  padding: calc(16px + env(safe-area-inset-top)) calc(20px + env(safe-area-inset-right)) 0 calc(20px + env(safe-area-inset-left));
  display: flex; justify-content: space-between; align-items: flex-start;
  flex-wrap: wrap; gap: 2px 16px;
  pointer-events: none;
  user-select: none;
}
#chainNo { font-size: 13px; }

#note {
  position: fixed;
  top: calc(64px + env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  max-width: min(360px, calc(100vw - 48px));
  text-align: center;
  color: rgba(255,255,255,.65);
  transition: opacity .6s;
  pointer-events: none;
}
#note.onPage {
  top: auto;
  bottom: calc(30px + env(safe-area-inset-bottom));
  color: var(--amber);
  z-index: 31;
}
#note.ring { color: var(--amber); }

#hover {
  position: fixed;
  top: calc(76px + env(safe-area-inset-top));
  left: 50%; transform: translateX(-50%);
  max-width: min(80vw, 420px);
  text-align: center;
  pointer-events: none;
}
/* the toast steps below the tap label so the two never stack */
#note:not(.onPage) { top: calc(102px + env(safe-area-inset-top)); }

button {
  font: inherit; letter-spacing: inherit; text-transform: inherit;
  background: none; color: var(--fg);
  border: 1px solid rgba(255,255,255,.25);
  padding: 9px 16px;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}
button:hover { background: var(--fg); color: #000; }
button.ghost { border-color: transparent; color: rgba(255,255,255,.45); }
button.ghost:hover { background: none; color: var(--fg); }

#actions {
  position: fixed;
  right: calc(20px + env(safe-area-inset-right));
  bottom: calc(20px + env(safe-area-inset-bottom));
  display: flex; gap: 8px;
}
#actions { flex-direction: column; align-items: flex-end; gap: 12px; }
#navSheet {
  display: flex; flex-direction: column; align-items: flex-end; gap: 12px;
}
#navSheet .navBtn {
  opacity: 0; transform: translateY(14px) scale(.96);
  pointer-events: none;
  transition: opacity .18s ease, transform .22s cubic-bezier(.2,.9,.3,1.2);
}
#actions.open #navSheet .navBtn { opacity: 1; transform: none; pointer-events: auto; }
#actions.open #navSheet .navBtn:nth-last-child(1) { transition-delay: 0s; }
#actions.open #navSheet .navBtn:nth-last-child(2) { transition-delay: .04s; }
#actions.open #navSheet .navBtn:nth-last-child(3) { transition-delay: .08s; }
#actions.open #navSheet .navBtn:nth-last-child(4) { transition-delay: .12s; }
#fab {
  border: 0; background: none; position: relative;
  width: 62px; height: 56px; font-size: 19px;
  color: rgba(255,255,255,.85);
  transition: transform .25s ease;
}
#fab:hover { background: none; color: #fff; }
#fab::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .6;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 44' preserveAspectRatio='none' fill='none'%3E%3Cpath d='M14 22 C 12 9, 44 3, 66 4 C 92 5, 112 9, 110 22 C 108 36, 78 41, 52 40 C 28 39, 8 35, 10 23 C 11 15, 22 10, 34 8' stroke='rgba(255,255,255,.8)' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  transform: rotate(-2deg);
}
#actions.open #fab { transform: rotate(90deg); color: var(--amber); }
#actions.open #fab .navSup { display: none; }
#fab .navSup { position: absolute; top: 2px; right: 6px; }
.navBtn {
  border: 0; background: none; padding: 10px 14px;
  color: rgba(255,255,255,.78);
  position: relative;
}
.navBtn:hover { background: none; color: #fff; }
.navBtn:hover::before { opacity: .9; }
/* a pen looped around each word — the loop never lands twice the same way */
.navBtn::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .55;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 44' preserveAspectRatio='none' fill='none'%3E%3Cpath d='M14 22 C 12 9, 44 3, 66 4 C 92 5, 112 9, 110 22 C 108 36, 78 41, 52 40 C 28 39, 8 35, 10 23 C 11 15, 22 10, 34 8' stroke='rgba(255,255,255,.75)' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  transform: rotate(-1.6deg);
}
.navBtn:nth-child(2)::before { transform: rotate(1.3deg) scaleX(-1); }
.navBtn:nth-child(3)::before { transform: rotate(-.7deg) scaleY(-1); }
.navBtn:nth-child(4)::before { transform: rotate(1.9deg) scale(-1, -1); }
.navSup { color: var(--amber); font-size: 10px; margin-left: 3px; }
/* settings: the same pen draws boxes — wobbly rects, never twice alike */
#more .col > button:not(.ghost):not(.linkish) {
  border: 0; background: none; position: relative;
}
#more .col > button:not(.ghost):not(.linkish)::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 48' preserveAspectRatio='none' fill='none'%3E%3Cpath d='M8 9 C 7 5, 14 3.5, 34 3.5 C 74 3, 140 3, 170 4 C 190 4.5, 196 7, 195.5 13 C 195 22, 196 30, 195 36 C 194.5 42, 186 44.5, 160 44.5 C 118 45, 60 45, 32 44 C 12 43.5, 4.5 41, 5 33 C 5.5 24, 6 16, 8 11' stroke='rgba(255,255,255,.7)' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}
#more .col > button:not(.ghost):not(.linkish):nth-of-type(even)::before { transform: scale(-1, 1) rotate(.4deg); }
#more .col > button:not(.ghost):not(.linkish):nth-of-type(3n)::before { transform: scale(1, -1) rotate(-.35deg); }
#more .col > button:not(.ghost):not(.linkish):hover { background: none; color: inherit; }
#more .col > button:not(.ghost):not(.linkish):hover::before { opacity: .85; }
#drawer {
  position: fixed;
  right: calc(20px + env(safe-area-inset-right));
  bottom: calc(76px + env(safe-area-inset-bottom));
  width: min(300px, calc(100vw - 40px));
  background: #000;
  border: 1px solid rgba(255,255,255,.18);
  padding: 16px;
  display: flex; flex-direction: column; gap: 10px;
}
.page {
  position: fixed; inset: 0; z-index: 30;
  background: #000;
  overflow-y: auto;
}
.page .col {
  max-width: 460px; margin: 0 auto;
  padding: calc(20px + env(safe-area-inset-top)) 24px calc(48px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 14px;
}
.pageHead {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 10px;
}
.pageHead span { font-size: 14px; }
.pageHead button { padding: 6px 12px; }
.setBox { display: flex; justify-content: space-between; align-items: center; gap: 12px; text-align: left; }
.setBox .on { color: var(--amber); }
.setBox:disabled { opacity: .45; cursor: default; }
.setBox:disabled:hover { background: none; color: inherit; }
.center { text-align: center; }
textarea {
  font: inherit; letter-spacing: inherit; text-transform: none;
  background: none; color: var(--fg);
  border: 1px solid rgba(255,255,255,.18);
  padding: 10px 12px;
  resize: none;
  outline: none;
}
textarea::placeholder { color: rgba(255,255,255,.3); }
textarea:focus { border-color: rgba(255,255,255,.5); }
#reachList:empty, #findList:empty { display: none; }
#profile.page { z-index: 32; }
.profFace { font-size: 34px; line-height: 1; }
.profAbout { color: rgba(255,255,255,.75); line-height: 1.8; }
#facePage.page { z-index: 32; }
.avatarGrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.avatarGrid button { padding: 8px 0 4px; border-color: rgba(255,255,255,.12); line-height: 0; }
.avatarGrid button:hover { background: rgba(255,255,255,.1); }
.faceGrid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px;
}
.faceGrid button { padding: 8px 0; font-size: 20px; line-height: 1; border-color: rgba(255,255,255,.12); }
.faceGrid button:hover { background: rgba(255,255,255,.12); color: inherit; }
.miniRow { display: flex; align-items: baseline; gap: 8px; }
.miniRow .pfx { color: rgba(255,255,255,.45); flex: none; }
.miniRow input { flex: 1; min-width: 0; }
.setRow { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.switch {
  flex: none; width: 36px; height: 20px; padding: 0;
  border: 1px solid rgba(255,255,255,.3); border-radius: 999px;
  position: relative; background: none; cursor: pointer;
}
.switch:hover { background: none; color: inherit; }
.switch::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 14px; height: 14px; border-radius: 50%;
  background: rgba(255,255,255,.45);
  transition: transform .2s, background .2s;
}
.switch.on { border-color: rgba(255,176,0,.55); }
.switch.on::after { transform: translateX(16px); background: var(--amber); }
.switchCtl {
  flex: none; margin: 0; cursor: pointer;
  accent-color: var(--amber);
  transform: scale(.72); transform-origin: right center;
  /* the global input dress — underline, padding — stays off the native switch */
  border: 0; padding: 0; width: auto; background: none;
}
.faceStrip {
  display: flex; gap: 8px;
  overflow-x: auto;
  padding: 4px 2px;
  scrollbar-width: none;
}
.faceStrip::-webkit-scrollbar { display: none; }
.faceStrip button { flex: none; padding: 7px; line-height: 0; border-color: rgba(255,255,255,.12); }
.faceStrip button.sel { border-color: var(--amber); }
.faceStrip button:hover { background: rgba(255,255,255,.1); }
.faceCur { font-size: 18px; line-height: 1; }
#reachCard {
  position: fixed; inset: 0; z-index: 33;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.92);
}
.keepcase { text-transform: none; }
.reachBlock {
  border: 1px solid rgba(255,255,255,.15);
  padding: 10px 12px;
  display: flex; flex-direction: column; gap: 7px;
}
.reachBlock .intro { color: rgba(255,255,255,.8); }
.reachBlock .btns { display: flex; gap: 8px; justify-content: flex-end; }
.reachBlock .btns button { padding: 5px 12px; font-size: 11px; }
.findRow { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.findRow .meta { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.findRow .meta .fhash { color: rgba(255,255,255,.85); cursor: pointer; text-decoration: underline dotted rgba(255,255,255,.35); text-underline-offset: 3px; }
.findRow .meta .ftags { color: rgba(255,255,255,.45); }
.findRow button { padding: 4px 10px; font-size: 11px; flex: none; }
.findRow .btns { display: flex; gap: 6px; flex: none; }
#reco {
  position: fixed; inset: 0; z-index: 40;
  display: flex; align-items: center; justify-content: center;
  background: #000;
}
.recHash { font-size: 26px; letter-spacing: .14em; }
.profName { font-size: 24px; }
.why { color: rgba(255,176,0,.75); margin: -6px 0 2px 2px; }
#suggestBlock { margin-top: 34px; }
/* games */
/* game mode: scanlines and square corners — you are at the table now */
#gameShelf::before, #gamePage::before, #arcade::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 1;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.028) 0 1px, transparent 1px 3px);
}
#gameShelf .col, #gamePage .col, #arcade .col { position: relative; z-index: 2; }
.gameHead { display: flex; align-items: flex-start; justify-content: center; gap: 18px; margin: 14px 0 6px; }
.gameCard {
  display: flex; align-items: center; gap: 16px;
  width: 100%; text-align: left; padding: 18px 16px;
  border: 2px solid rgba(255,255,255,.12); border-radius: 4px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
}
.gameCard:hover { border-color: rgba(255,176,0,.45); background: linear-gradient(180deg, rgba(255,176,0,.06), rgba(255,255,255,.02)); color: inherit; }
.gameCard .gIcon { flex: none; width: 52px; height: 52px; line-height: 0; }
.gameCard .gBody { min-width: 0; }
.gameCard .gname { font-size: 16px; margin-bottom: 3px; }
.gameCard .gRec { margin-top: 5px; color: rgba(255,255,255,.5); }
.gameCard .gRec.on { color: var(--amber); }
#shelfList { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.gFace { display: flex; flex-direction: column; align-items: center; gap: 6px; transition: opacity .3s; }
.gFace .fring {
  width: 58px; height: 58px; border-radius: 0;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid rgba(255,255,255,.16); transition: border-color .3s, box-shadow .3s;
}
.gFace.hot .fring { border-color: var(--amber); box-shadow: 0 0 0 2px rgba(255,176,0,.2), 0 0 22px rgba(255,176,0,.25); }
.gFace.cold { opacity: .45; }
.gFace .fname { font-size: 11px; color: rgba(255,255,255,.6); max-width: 74px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gMid { align-self: center; min-width: 70px; text-align: center; display: flex; flex-direction: column; gap: 8px; }
.gScore { font-size: 24px; color: var(--amber); }
.gVs { font-size: 13px; color: rgba(255,255,255,.35); }
.gDots { display: flex; gap: 5px; justify-content: center; }
.gDot { width: 7px; height: 7px; border-radius: 0; background: rgba(255,255,255,.22); }
.gDot.on { background: var(--amber); }
.tiles { display: flex; gap: 6px; justify-content: center; margin: 16px 0 4px; }
.tile {
  width: 42px; height: 50px; padding: 0; position: relative;
  display: flex; align-items: center; justify-content: center;
  font-size: 21px; border: 2px solid rgba(255,255,255,.35); border-radius: 3px;
  background: rgba(255,255,255,.04);
}
.tile .tv { position: absolute; right: 4px; bottom: 2px; font-size: 9px; color: rgba(255,255,255,.5); }
.tile:disabled { opacity: .2; }
.builtWord { font-size: 26px; text-align: center; min-height: 34px; letter-spacing: .12em; margin: 4px 0; }
.seaLabel { margin-top: 10px; }
.mirq { font-size: 15px; margin: 14px 0 4px; }
.miro { display: flex; flex-direction: column; gap: 8px; }
.mirrev { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.mirrev .match { color: var(--amber); }
.profEyes {
  border-left: 2px solid rgba(255,176,0,.4);
  padding: 2px 0 2px 12px;
  display: flex; flex-direction: column; gap: 4px;
}
.eyeLine { color: rgba(255,255,255,.8); }
.gameRow { display: flex; align-items: center; gap: 8px; }
.gameScore { font-size: 22px; margin: 8px 0; }
.recCodes {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px;
  color: rgba(255,255,255,.8); letter-spacing: .08em;
}
button.mark { border-color: rgba(255,176,0,.4); color: var(--amber); }
button.mark:hover { background: var(--amber); color: #000; }
.keyRow .code .tag { color: var(--amber); }
.keyRow {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  border-bottom: 1px solid rgba(255,255,255,.1);
  padding-bottom: 8px;
}
.keyRow .code { color: rgba(255,255,255,.85); }
.keyRow .ttl  { color: var(--amber); font-size: 10px; }
.keyRow button { padding: 4px 10px; font-size: 11px; }
.keyRow .btns { display: flex; gap: 6px; }

#gate, #redeem, #recover, #pushAsk, #selfPage {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: #000;
}
#redeem { background: rgba(0,0,0,.85); }
#install {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  background: #000;
}
.istep { display: flex; align-items: center; gap: 12px; }
.istep .ico {
  flex: none; width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.25); border-radius: 8px;
  color: rgba(255,255,255,.85);
}
.istep b { color: rgba(255,255,255,.9); font-weight: 500; }
.stepNum { flex: none; width: 12px; text-align: right; }
#installSkip { margin-top: 8px; }
#installArrow {
  position: fixed; z-index: 51;
  color: rgba(255,255,255,.8);
}
#installArrow.down      { bottom: calc(env(safe-area-inset-bottom, 0px) + 8px); left: calc(50% - 92px); }
#installArrow.downRight { bottom: calc(env(safe-area-inset-bottom, 0px) + 8px); right: 5%; }
#installArrow.upRight   { top: calc(env(safe-area-inset-top, 0px) + 8px); right: 10px; transform: scaleY(-1); }
#installArrow svg { display: block; animation: sway 2.4s 1.7s ease-in-out infinite; }
#installArrow .curve {
  stroke-dasharray: 210; stroke-dashoffset: 210;
  animation: draw 1.1s .3s ease-out forwards;
}
#installArrow .head { opacity: 0; animation: appear .35s 1.25s forwards; }
@keyframes draw   { to { stroke-dashoffset: 0; } }
@keyframes appear { to { opacity: 1; } }
@keyframes sway {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(5px); }
}
.card {
  width: min(320px, calc(100vw - 48px));
  display: flex; flex-direction: column; gap: 14px;
  text-align: left;
}
#gateTitle, #redeemTitle { font-size: 15px; }
input {
  font: inherit; letter-spacing: inherit; text-transform: none;
  background: none; color: var(--fg);
  border: 0; border-bottom: 1px solid rgba(255,255,255,.35);
  padding: 8px 0;
  outline: none;
}
input::placeholder { color: rgba(255,255,255,.3); }
input:focus { border-color: var(--fg); }
.pfxRow {
  display: flex; align-items: baseline;
  border-bottom: 1px solid rgba(255,255,255,.35);
}
.pfxRow:focus-within { border-color: var(--fg); }
.pfxRow .pfx { color: rgba(255,255,255,.45); padding: 8px 2px 8px 0; }
.pfxRow input { border: none; flex: 1; min-width: 0; }
.row { display: flex; gap: 10px; }
#anchorRow { display: flex; gap: 10px; }
#anchorRow input { flex: 1; min-width: 0; }
.nameHint { font-size: 9px; letter-spacing: 0; }

[hidden] { display: none !important; }

/* while capturing a clip, the interface steps back */
body.capturing .ui {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity .35s;
}

button.linkish {
  border: none;
  padding: 0 1px;
  font-size: inherit;
  color: rgba(255,255,255,.85);
  text-decoration: underline;
  text-underline-offset: 3px;
}
button.linkish:hover { background: none; color: #fff; }
button.linkish:disabled { text-decoration: none; color: inherit; cursor: default; }
a.linkish {
  color: rgba(255,255,255,.85);
  text-decoration: underline;
  text-underline-offset: 3px;
}
a.linkish:hover { color: #fff; }


/* touch devices: no ios zoom-on-focus, bigger targets */
@media (pointer: coarse) {
  input, textarea { font-size: 16px; }
  button { padding: 12px 18px; }
  .keyRow button { padding: 8px 12px; font-size: 12px; }
  button:hover { background: none; color: var(--fg); }
  button.mark:hover { background: none; color: var(--amber); }
  button:active { background: var(--fg); color: #000; }
}

.arcHead { margin-top: 10px; }
.arcRow {
  display: flex; align-items: center; gap: 12px;
  width: 100%; text-align: left; padding: 12px;
  border: 2px solid rgba(255,255,255,.12); border-radius: 4px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
}
.arcRow:hover { border-color: rgba(255,176,0,.45); color: inherit; background: linear-gradient(180deg, rgba(255,176,0,.05), rgba(255,255,255,.015)); }
.arcMark, .arcFace { flex: none; line-height: 0; }
.arcName { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arcSt { flex: none; color: rgba(255,255,255,.5); }
.arcSt.on { color: var(--amber); }
#arcadeList { display: flex; flex-direction: column; gap: 10px; }