/* ROB IN HOOD - early-2000s console UI */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:#000;overflow:hidden;
  font-family:"Trebuchet MS","Lucida Grande",Verdana,sans-serif;
  color:#fff;-webkit-font-smoothing:antialiased;user-select:none;-webkit-user-select:none}
#stage{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#000}
#frame{position:relative;overflow:hidden;background:#000;box-shadow:0 0 60px rgba(0,0,0,.9)}
#screen{position:absolute;inset:0;width:100%;height:100%;display:block;
  image-rendering:pixelated;image-rendering:crisp-edges}
.hidden{display:none !important}

/* ---------- CRT ---------- */
#crt{position:absolute;inset:0;pointer-events:none;z-index:60;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0) 45%, rgba(0,0,0,.55) 100%),
    repeating-linear-gradient(to bottom, rgba(0,0,0,.16) 0 1px, rgba(255,255,255,.02) 1px 3px);
  mix-blend-mode:multiply;opacity:1;transition:opacity .3s}
#crt.off{opacity:0}

/* ---------- generic screen layer ---------- */
.screen{position:absolute;inset:0;z-index:40;display:flex;align-items:center;justify-content:center}

/* ---------- power ---------- */
#scr-power{background:
  radial-gradient(ellipse at 50% 46%, rgba(4,6,10,.60) 0%, rgba(2,3,6,.90) 62%, rgba(2,3,6,.97) 100%)}
.pw{text-align:center;padding:38px 54px;border-radius:12px;
  background:radial-gradient(ellipse at 50% 50%, rgba(3,5,9,.88) 0%, rgba(3,5,9,0) 74%)}
.pw-logo{font-family:"Arial Black",Impact,sans-serif;font-size:clamp(22px,4.6vw,52px);
  letter-spacing:.16em;
  background:linear-gradient(180deg,#fff 0%,#9fb0c4 45%,#4a5b70 55%,#dfe8f2 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 2px 0 rgba(0,0,0,.4)}
.pw-logo b{-webkit-text-fill-color:#67d67a;margin-left:.12em}
#powerBtn{margin-top:26px;padding:14px 34px;font:700 15px/1 "Trebuchet MS",sans-serif;
  letter-spacing:.22em;color:#0b140b;cursor:pointer;border:0;border-radius:3px;
  background:linear-gradient(180deg,#9dfca9,#3fa552);box-shadow:0 4px 0 #1d5f2b,0 0 30px rgba(80,240,120,.35)}
#powerBtn:active{transform:translateY(3px);box-shadow:0 1px 0 #1d5f2b}
.tiny{margin-top:16px;font-size:11px;letter-spacing:.28em;color:#4b5a67;text-transform:uppercase}

/* ---------- boot ---------- */
#scr-boot{background:#000;flex-direction:column;overflow:hidden}
.towers{position:absolute;left:50%;top:50%;transform:translate(-50%,-20%);
  display:flex;gap:10px;align-items:flex-end;height:34%}
.towers i{width:9px;height:0;border-radius:2px;background:linear-gradient(180deg,#e8fff0,#3ba85c);
  box-shadow:0 0 16px rgba(90,240,140,.75);animation:rise 1.15s cubic-bezier(.2,.8,.3,1) forwards}
.towers i:nth-child(1){animation-delay:.02s;--h:34%}
.towers i:nth-child(2){animation-delay:.14s;--h:72%}
.towers i:nth-child(3){animation-delay:.07s;--h:52%}
.towers i:nth-child(4){animation-delay:.26s;--h:100%}
.towers i:nth-child(5){animation-delay:.18s;--h:63%}
.towers i:nth-child(6){animation-delay:.34s;--h:44%}
.towers i:nth-child(7){animation-delay:.43s;--h:80%}
@keyframes rise{from{height:0;opacity:0}30%{opacity:1}to{height:var(--h);opacity:1}}
.boot-brand{position:absolute;bottom:24%;font-family:"Arial Black",Impact,sans-serif;
  font-size:clamp(14px,2.4vw,26px);letter-spacing:.42em;color:#dbe6ef;opacity:0;
  animation:fadein .5s .52s forwards}
.boot-sub{position:absolute;bottom:18%;font-size:clamp(9px,1.3vw,13px);letter-spacing:.6em;
  color:#5e6f80;opacity:0;animation:fadein .45s .78s forwards}
.boot-legal{position:absolute;bottom:6%;font-size:10px;letter-spacing:.16em;color:#2c3540;
  opacity:0;animation:fadein .45s 1.02s forwards}
@keyframes fadein{to{opacity:1}}

/* ---------- title ---------- */
#scr-title{background:transparent;flex-direction:column;justify-content:flex-start;
  padding:5% 4%;cursor:pointer}
.title-wrap{text-align:center;width:100%;margin-top:2%}
#gameLogo{font-family:"Arial Black",Impact,sans-serif;font-weight:900;
  font-size:clamp(38px,9.5vw,120px);line-height:.86;letter-spacing:-.02em;cursor:pointer;
  background:linear-gradient(180deg,#fffbe6 0%,#ffd24a 38%,#c07d12 52%,#ffe98a 74%,#8a5a06 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 3px 0 #2b1a00) drop-shadow(0 7px 14px rgba(0,0,0,.7));
  transform:skewY(-2.2deg)}
#gameLogo em{display:inline-block;font-style:normal;font-size:.52em;transform:translateY(-.34em) rotate(-6deg);
  background:linear-gradient(180deg,#eaffef,#5ad07a 55%,#1d6b33);
  -webkit-background-clip:text;background-clip:text;color:transparent;padding:0 .06em}
.tag{margin-top:6px;font-size:clamp(10px,1.5vw,16px);letter-spacing:.34em;color:#ffe6a8;
  text-transform:uppercase;text-shadow:0 2px 4px #000}
.press{margin-top:min(9vh,70px);font-size:clamp(11px,1.7vw,18px);letter-spacing:.3em;
  color:#fff;text-shadow:0 2px 6px #000;animation:blink 1.15s steps(1) infinite}
.press b{color:#9dfca9}
@keyframes blink{50%{opacity:.12}}
.ctrls{margin-top:14px;font-size:clamp(8px,1.1vw,12px);letter-spacing:.16em;color:#cfd8e2;
  text-shadow:0 1px 3px #000;opacity:.85}
.corner{position:absolute;left:12px;bottom:10px;font-size:10px;letter-spacing:.2em;color:#8a97a4;opacity:.75}
.corner2{position:absolute;right:12px;bottom:10px;font-size:10px;letter-spacing:.14em;color:#8a97a4;opacity:.6}

/* ---------- token bar ---------- */
#tokenBar{position:absolute;top:10px;left:50%;transform:translateX(-50%);
  display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:center;max-width:94%}
#tokenBar a,#tokenBar button{font:700 11px/1 "Trebuchet MS",sans-serif;letter-spacing:.14em;
  text-transform:uppercase;text-decoration:none;color:#0d1a0f;cursor:pointer;border:0;
  padding:8px 12px;border-radius:3px;background:linear-gradient(180deg,#e9fff0,#8fd9a3);
  box-shadow:0 3px 0 rgba(0,0,0,.45)}
#tokenBar .ca{background:linear-gradient(180deg,#20262e,#12161b);color:#9dfca9;
  font-family:ui-monospace,Consolas,monospace;letter-spacing:0;text-transform:none;
  border:1px solid #38414c}
#tokenBar a:active,#tokenBar button:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(0,0,0,.45)}

/* ---------- HUD ---------- */
#hud{position:absolute;inset:0;z-index:30;pointer-events:none;font-size:13px}
#hudTop{position:absolute;top:12px;left:14px;right:14px;display:flex;
  justify-content:space-between;align-items:flex-start;gap:14px}
#coinBox{display:flex;align-items:center;gap:6px;padding:5px 11px;border-radius:20px;
  background:rgba(6,10,14,.6);border:1px solid rgba(255,255,255,.16);
  font:700 15px/1 "Trebuchet MS",sans-serif;text-shadow:0 2px 3px #000}
#coinBox .cn{color:#ffcf3d;font-size:15px;filter:drop-shadow(0 0 5px rgba(255,200,40,.8))}
#coinBox .of{font-size:11px;color:#9fb0be}
#objective{max-width:46%;text-align:right;font-size:12px;letter-spacing:.06em;color:#ffe9b0;
  text-shadow:0 2px 4px #000;line-height:1.4}
#objective:before{content:"OBJECTIVE";display:block;font-size:9px;letter-spacing:.28em;
  color:#8fa0ae;margin-bottom:2px}
#xTag{position:absolute;top:46px;left:14px;display:inline-flex;align-items:center;gap:7px;
  padding:5px 11px 5px 9px;border-radius:20px;text-decoration:none;pointer-events:auto;
  background:rgba(6,10,14,.55);border:1px solid rgba(255,255,255,.14);
  font:700 11px/1 "Trebuchet MS",sans-serif;letter-spacing:.1em;color:#cfe0ea;
  text-shadow:0 2px 3px #000;transition:background .15s,border-color .15s,color .15s}
#xTag b{font-size:13px;color:#fff;line-height:1}
#xTag:hover{background:rgba(10,18,24,.85);border-color:rgba(157,252,169,.55);color:#9dfca9}
#prompt{position:absolute;left:50%;bottom:7%;transform:translateX(-50%);
  display:flex;align-items:center;gap:9px;padding:7px 15px 7px 8px;border-radius:24px;
  background:rgba(6,10,14,.72);border:1px solid rgba(255,255,255,.2);white-space:nowrap;
  text-shadow:0 2px 3px #000;animation:pop .18s ease-out}
#prompt b{display:inline-flex;width:22px;height:22px;align-items:center;justify-content:center;
  border-radius:50%;background:linear-gradient(180deg,#9dfca9,#3fa552);color:#08170c;font-size:12px}
@keyframes pop{from{transform:translateX(-50%) scale(.85);opacity:0}}
#toast{position:absolute;left:50%;top:24%;transform:translateX(-50%);display:flex;
  flex-direction:column;gap:8px;align-items:center;width:80%}
.toast{padding:10px 20px;border-radius:4px;font:700 13px/1.3 "Trebuchet MS",sans-serif;
  letter-spacing:.16em;text-transform:uppercase;text-align:center;
  background:linear-gradient(180deg,rgba(255,236,170,.96),rgba(230,176,40,.96));color:#26190a;
  box-shadow:0 6px 0 rgba(0,0,0,.4),0 0 40px rgba(255,200,60,.35);
  animation:toastin .3s cubic-bezier(.2,1.6,.4,1)}
.toast.green{background:linear-gradient(180deg,rgba(190,255,205,.96),rgba(70,190,110,.96));color:#08210f}
.toast.red{background:linear-gradient(180deg,rgba(255,190,190,.96),rgba(200,70,70,.96));color:#280808}
@keyframes toastin{from{transform:translateY(-14px) scale(.9);opacity:0}}

/* ---------- dialog ---------- */
#dialog{position:absolute;left:0;right:0;bottom:0;z-index:45;padding:0 4% 4%;
  display:flex;justify-content:center}
.dbox{position:relative;width:min(760px,100%);padding:16px 22px 20px;border-radius:6px;
  background:linear-gradient(180deg,rgba(12,20,30,.94),rgba(6,10,16,.96));
  border:2px solid rgba(157,252,169,.35);box-shadow:0 0 0 2px rgba(0,0,0,.6),0 10px 40px rgba(0,0,0,.7)}
#dname{position:absolute;top:-13px;left:16px;padding:4px 14px;border-radius:3px;
  font:700 11px/1 "Trebuchet MS",sans-serif;letter-spacing:.24em;color:#08170c;
  background:linear-gradient(180deg,#9dfca9,#3fa552);box-shadow:0 2px 0 rgba(0,0,0,.5)}
#dtext{font-size:clamp(13px,1.7vw,17px);line-height:1.55;color:#eef5ff;min-height:2.6em;
  text-shadow:0 1px 2px #000}
#dmore{position:absolute;right:14px;bottom:8px;color:#9dfca9;font-size:12px;animation:blink 1s steps(1) infinite}

/* ---------- pause ---------- */
#scr-pause{background:rgba(2,6,10,.72);z-index:50}
.pause-card{width:min(430px,88%);max-height:96%;overflow-y:auto;scrollbar-width:none;padding:14px 20px 10px;border-radius:6px;
  background:linear-gradient(180deg,rgba(14,22,32,.97),rgba(7,11,17,.98));
  border:2px solid rgba(157,252,169,.3);box-shadow:0 18px 60px rgba(0,0,0,.8)}
.pause-card h2{font-family:"Arial Black",Impact,sans-serif;font-size:16px;letter-spacing:.3em;
  color:#9dfca9;margin-bottom:9px;text-align:center}
.pause-card::-webkit-scrollbar{display:none}
#pauseMenu{list-style:none}
#pauseMenu li{position:relative;display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:6px 12px 6px 20px;border-radius:3px;cursor:pointer;font-size:13px;letter-spacing:.14em;
  color:#c9d6e2;border:1px solid transparent}
#pauseMenu li span{color:#8fa0ae;font-size:12px}
#pauseMenu li.sel{background:linear-gradient(90deg,rgba(157,252,169,.16),transparent);
  border-color:rgba(157,252,169,.35);color:#fff}
#pauseMenu li.sel:before{content:"\25B8";position:absolute;left:7px;color:#9dfca9}
.mc{margin-top:9px;padding-top:8px;border-top:1px solid rgba(255,255,255,.1);
  font-size:10px;letter-spacing:.2em;color:#63727f;text-align:center}

/* ---------- touch ---------- */
#touch{position:absolute;inset:0;z-index:35}
#stick{position:absolute;left:5%;bottom:8%;width:120px;height:120px;border-radius:50%;
  background:rgba(255,255,255,.07);border:2px solid rgba(255,255,255,.18)}
#stick i{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;
  border-radius:50%;background:rgba(157,252,169,.35);border:2px solid rgba(157,252,169,.6)}
#btnA,#btnJ{position:absolute;right:6%;width:74px;height:74px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font:700 20px/1 "Trebuchet MS",sans-serif;
  color:#08170c;background:linear-gradient(180deg,#9dfca9,#3fa552);box-shadow:0 4px 0 rgba(0,0,0,.4)}
#btnA{bottom:9%}
#btnJ{bottom:9%;right:calc(6% + 88px);background:linear-gradient(180deg,#cfe3ff,#5b8fd6)}

/* ---------- stats + shop ---------- */
.statgrp{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
#goldBox{display:flex;align-items:center;gap:6px;padding:5px 11px;border-radius:20px;
  background:rgba(6,10,14,.6);border:1px solid rgba(255,255,255,.16);
  font:700 15px/1 "Trebuchet MS",sans-serif;text-shadow:0 2px 3px #000}
#goldBox .gd{color:#9dfca9;font-size:13px;filter:drop-shadow(0 0 5px rgba(120,240,150,.7))}
#goldBox .of,#robBox .of{font-size:10px;color:#9fb0be;letter-spacing:.1em}
#robBox{display:flex;align-items:center;gap:6px;padding:5px 11px;border-radius:20px;
  background:rgba(6,10,14,.6);border:1px solid rgba(120,250,215,.28);
  font:700 15px/1 "Trebuchet MS",sans-serif;text-shadow:0 2px 3px #000}
#robBox .rb{color:#5cf5cc;font-size:10px;filter:drop-shadow(0 0 5px rgba(90,240,215,.8))}
#shopList li i{display:block;font-style:normal;font-size:10px;color:#7d8b98;letter-spacing:.05em}
#scr-shop{background:rgba(2,6,10,.72);z-index:52}
.shop-card{width:min(520px,94%)}
#shopList li{padding:6px 12px 6px 20px;font-size:12px}
#shopList li i{display:block;font-style:normal;font-size:10px;color:#7d8b98}
.shop-gold{text-align:center;font-size:11px;letter-spacing:.22em;color:#8fa0ae;margin-bottom:12px}
.shop-gold b{color:#9dfca9}
#shopList{list-style:none}
#shopList li{position:relative;display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:8px 12px 8px 20px;border-radius:3px;cursor:pointer;font-size:13px;letter-spacing:.1em;
  color:#c9d6e2;border:1px solid transparent}
#shopList li span{color:#ffd76a;font-size:12px;white-space:nowrap}
#shopList li.sel{background:linear-gradient(90deg,rgba(157,252,169,.16),transparent);
  border-color:rgba(157,252,169,.35);color:#fff}
#shopList li.sel:before{content:"\25B8";position:absolute;left:7px;color:#9dfca9}

/* ---------- claim terminal ---------- */
#scr-claim{background:rgba(2,8,10,.78);z-index:53}
.claim-card{width:min(540px,94%);border-color:rgba(92,245,204,.35)}
.claim-card h2{color:#5cf5cc;margin-bottom:4px}
.claim-sub{text-align:center;font-size:9px;letter-spacing:.24em;color:#5d7a76;margin-bottom:12px}
.claim-warn{padding:9px 11px;margin-bottom:12px;border-radius:3px;font-size:11px;line-height:1.5;
  color:#cfe8e2;background:rgba(92,245,204,.07);border:1px solid rgba(92,245,204,.3)}
.claim-warn b{display:block;color:#ffe14d;letter-spacing:.14em;margin-bottom:3px}
.claim-stats{font-family:ui-monospace,Consolas,monospace;font-size:12px;margin-bottom:12px}
.claim-stats .row{display:flex;justify-content:space-between;gap:10px;padding:3px 2px;
  border-bottom:1px dotted rgba(255,255,255,.12)}
.claim-stats .row span{color:#8fa0ae}
.claim-stats .row b{color:#eaf7f3;font-weight:400}
.claim-run{font-family:ui-monospace,Consolas,monospace;font-size:11px;line-height:1.55;
  color:#5cf5cc;background:rgba(0,0,0,.45);border:1px solid rgba(92,245,204,.2);
  border-radius:3px;padding:8px 10px;margin-bottom:12px;white-space:pre-wrap;min-height:2em}
.claim-menu{list-style:none;margin-bottom:12px}
.claim-menu li{position:relative;padding:7px 12px 7px 20px;border-radius:3px;cursor:pointer;
  font-size:13px;letter-spacing:.14em;color:#c9d6e2;border:1px solid transparent}
.claim-menu li.sel{background:linear-gradient(90deg,rgba(92,245,204,.16),transparent);
  border-color:rgba(92,245,204,.35);color:#fff}
.claim-menu li.sel:before{content:"\25B8";position:absolute;left:7px;color:#5cf5cc}
.claim-foot{font-size:10px;line-height:1.6;color:#7d8b98;letter-spacing:.04em;
  padding-top:9px;border-top:1px solid rgba(255,255,255,.1)}
.claim-foot code{color:#9dfca9;font-size:10px;word-break:break-all}
.claim-foot a{color:#5cf5cc}

/* ---------- claim: wallet field + notes ---------- */
.claim-field{margin-bottom:10px}
.claim-field input{width:100%;padding:10px 12px;border-radius:3px;
  background:rgba(0,0,0,.5);border:1px solid rgba(92,245,204,.35);color:#eaf7f3;
  font-family:ui-monospace,Consolas,monospace;font-size:13px;letter-spacing:.02em;outline:none}
.claim-field input:focus{border-color:rgba(92,245,204,.75);box-shadow:0 0 0 2px rgba(92,245,204,.12)}
.claim-field input::placeholder{color:#4d6b66}
.claim-note{margin-bottom:10px;padding:7px 10px;border-radius:3px;font-size:11px;line-height:1.5;
  color:#bfe8dc;background:rgba(92,245,204,.09);border:1px solid rgba(92,245,204,.28)}
.claim-note.bad{color:#ffd2d2;background:rgba(226,86,79,.12);border-color:rgba(226,86,79,.4)}
.claim-menu li.off{opacity:.45;cursor:default}
.claim-stats .row a.txl{color:#5cf5cc;text-decoration:none;font-size:11px}
.claim-stats .row a.txl:hover{text-decoration:underline}