:root {
  --gc-purple: #4d4d8f;
  --gc-indigo: #6a5acd;
  --gc-deep: #2b2b4a;
  --a-green: #5cbf3f;
  --b-red: #e04a3f;
  --grey: #b0b0bc;
  --c-yellow: #f5c518;
}
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; overflow: hidden; font-family: 'Chakra Petch', sans-serif; }
#root { height: 100%; }

/* ===== BOOT ===== */
.boot-screen {
  position: fixed; inset: 0; background: radial-gradient(circle at 50% 45%, #16162e, #05050c 80%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  z-index: 1000; overflow: hidden;
}
.boot-cube-stage { position: relative; width: 200px; height: 160px; perspective: 600px; }
.roll-cube {
  position: absolute; left: 70px; top: 50px; width: 60px; height: 60px;
  transform-style: preserve-3d; transform: translateX(-260px) rotateX(-45deg) rotateY(0deg);
  transition: transform 1s cubic-bezier(.3,1.4,.5,1);
}
.roll-cube.rolled { transform: translateX(0) rotateX(-20deg) rotateY(30deg); animation: cubeSpin 6s linear infinite 1s; }
@keyframes cubeSpin { to { transform: rotateX(-20deg) rotateY(390deg); } }
.face { position: absolute; width: 60px; height: 60px; background: linear-gradient(135deg, #7d6ce0, #4a3a9e);
  border: 2px solid #9a8ae0; box-shadow: inset 0 0 20px rgba(255,255,255,.2); }
.f-front { transform: translateZ(30px); }
.f-back { transform: rotateY(180deg) translateZ(30px); }
.f-right { transform: rotateY(90deg) translateZ(30px); }
.f-left { transform: rotateY(-90deg) translateZ(30px); }
.f-top { transform: rotateX(90deg) translateZ(30px); }
.f-bottom { transform: rotateX(-90deg) translateZ(30px); }
.mini-cube { position: absolute; width: 14px; height: 14px; background: var(--gc-indigo);
  border-radius: 2px; opacity: 0; transition: all .8s ease .2s; }
.mc-0 { left: 30px; top: 20px; } .mc-1 { left: 150px; top: 30px; } .mc-2 { left: 20px; top: 110px; }
.mc-3 { left: 160px; top: 120px; } .mc-4 { left: 90px; top: 10px; } .mc-5 { left: 95px; top: 130px; }
.mini-cube.assembled { opacity: .9; transform: translate(0,0) rotate(45deg); }
.mc-0.assembled { left: 76px; top: 46px; } .mc-1.assembled { left: 108px; top: 46px; }
.mc-2.assembled { left: 76px; top: 74px; } .mc-3.assembled { left: 108px; top: 74px; }
.mc-4.assembled { left: 92px; top: 40px; } .mc-5.assembled { left: 92px; top: 90px; }

.boot-text { text-align: center; margin-top: 40px; opacity: 0; transform: translateY(12px); transition: all .6s ease; }
.boot-text.show { opacity: 1; transform: translateY(0); }
.boot-title { font-size: 32px; font-weight: 700; color: #cfc4ff; letter-spacing: 2px; text-shadow: 0 0 20px #6a5acd; }
.boot-sub { font-size: 13px; color: #8888b0; margin-top: 6px; font-family: 'JetBrains Mono', monospace; }
.boot-bar { width: 220px; height: 8px; background: #1e1e3a; border-radius: 4px; margin: 20px auto 0; overflow: hidden; border: 1px solid #3a3a6e; }
.boot-fill { height: 100%; width: 0; background: linear-gradient(90deg, #6a5acd, #9a8ae0); border-radius: 4px; animation: fill 2.4s ease forwards .8s; }
@keyframes fill { to { width: 100%; } }
.skip-btn { position: absolute; bottom: 24px; right: 28px; background: none; border: 1px solid #4a4a7e;
  color: #9a9ac0; padding: 6px 14px; border-radius: 20px; font-family: inherit; cursor: pointer; font-size: 12px; transition: .2s; }
.skip-btn:hover { background: #4a4a7e; color: #fff; }

/* ===== DESKTOP ===== */
.desktop { position: relative; width: 100%; height: 100%; overflow: hidden; transition: background .6s; }
.desktop.rumble { animation: rumble .08s linear infinite; }
@keyframes rumble { 0%{transform:translate(0,0)} 25%{transform:translate(-2px,1px)} 50%{transform:translate(2px,-1px)} 75%{transform:translate(-1px,-2px)} 100%{transform:translate(1px,2px)} }
.cube-particles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.floating-cube { position: absolute; top: -40px; background: #fff; border-radius: 3px;
  animation-name: floatDown; animation-iteration-count: infinite; animation-timing-function: linear; transform: rotate(20deg); }
@keyframes floatDown { to { transform: translateY(110vh) rotate(380deg); } }

/* ===== MENUBAR ===== */
.menubar { position: absolute; top: 0; left: 0; right: 0; height: 26px; z-index: 500;
  background: linear-gradient(180deg, rgba(90,80,160,.95), rgba(50,45,90,.92)); backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: space-between; padding: 0 10px;
  color: #eee; font-size: 12px; box-shadow: 0 1px 6px rgba(0,0,0,.3); border-bottom: 1px solid rgba(150,140,220,.4); }
.mb-left { display: flex; align-items: center; gap: 14px; position: relative; }
.gc-logo { background: none; border: none; color: #cfc4ff; font-size: 18px; font-weight: 700; cursor: pointer; line-height: 1;
  text-shadow: 0 0 6px #6a5acd; padding: 0 4px; }
.mb-app { font-weight: 700; }
.mb-menu { opacity: .85; cursor: default; }
.mb-menu:hover { opacity: 1; }
.mb-dropdown { position: absolute; top: 24px; left: -4px; background: rgba(40,38,70,.97); backdrop-filter: blur(10px);
  border: 1px solid rgba(150,140,220,.4); border-radius: 8px; padding: 4px; min-width: 200px; z-index: 600;
  box-shadow: 0 8px 24px rgba(0,0,0,.5); }
.mb-item { display: block; width: 100%; text-align: left; background: none; border: none; color: #eee;
  padding: 7px 12px; border-radius: 5px; cursor: pointer; font-family: inherit; font-size: 13px; }
.mb-item:hover { background: var(--gc-indigo); }
.mb-right { display: flex; align-items: center; gap: 12px; font-family: 'JetBrains Mono', monospace; }
.mb-stat { opacity: .9; letter-spacing: 1px; }
.mb-clock { font-weight: 700; }

/* ===== DESK ICONS ===== */
.desk-icons { position: absolute; top: 40px; right: 16px; display: flex; flex-direction: column; gap: 18px; z-index: 100; }
.desk-icon { background: none; border: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 76px; }
.desk-block { width: 48px; height: 40px; border-radius: 8px; box-shadow: 0 4px 10px rgba(0,0,0,.35), inset 0 2px 6px rgba(255,255,255,.3);
  position: relative; }
.desk-block::after { content:''; position:absolute; bottom:4px; left:6px; right:6px; height:5px; background:rgba(0,0,0,.2); border-radius:3px; }
.desk-icon span { color: #fff; font-size: 11px; text-shadow: 0 1px 3px rgba(0,0,0,.7); word-break: break-word; }
.desk-icon:hover .desk-block { transform: scale(1.08); }

/* ===== WINDOWS ===== */
.gc-window { position: absolute; background: rgba(245,244,252,.97); border-radius: 12px; overflow: hidden;
  box-shadow: 0 16px 44px rgba(0,0,0,.45); border: 1px solid rgba(120,110,180,.3); min-width: 200px;
  display: flex; flex-direction: column; }
.dark .gc-window { background: rgba(34,32,54,.97); color: #e8e6f5; border-color: rgba(120,110,180,.4); }
.gc-titlebar { height: 34px; background: linear-gradient(180deg, #7d6ce0, #5a4aae); display: flex; align-items: center;
  padding: 0 12px; gap: 12px; cursor: grab; user-select: none; }
.gc-titlebar:active { cursor: grabbing; }
.lights { display: flex; gap: 7px; }
.light { width: 13px; height: 13px; border-radius: 50%; border: 1px solid rgba(0,0,0,.25); display: inline-block;
  box-shadow: inset 0 1px 2px rgba(255,255,255,.5); }
.light.green { background: var(--a-green); cursor: pointer; padding: 0; }
.light.red { background: var(--b-red); }
.light.grey { background: var(--grey); }
.light.green:hover { transform: scale(1.15); }
.win-title { color: #fff; font-weight: 600; font-size: 13px; text-shadow: 0 1px 2px rgba(0,0,0,.3); }
.gc-body { padding: 14px; overflow: auto; flex: 1; max-height: 70vh; }

/* Blockfinder */
.bf-bar-wrap { margin-bottom: 14px; }
.bf-bar-label { font-size: 12px; margin-bottom: 5px; font-family: 'JetBrains Mono', monospace; opacity: .8; }
.bf-bar { height: 12px; background: rgba(120,110,180,.2); border-radius: 6px; overflow: hidden; }
.bf-bar-fill { height: 100%; background: linear-gradient(90deg, var(--gc-indigo), #9a8ae0); border-radius: 6px; }
.bf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.bf-item { background: rgba(120,110,180,.1); border: 1px solid rgba(120,110,180,.25); border-radius: 8px; padding: 10px; text-align: center; }
.bf-chip { width: 100%; height: 26px; border-radius: 5px; margin-bottom: 6px; box-shadow: inset 0 2px 4px rgba(255,255,255,.3); }
.bf-name { font-size: 11px; font-weight: 600; word-break: break-all; }
.bf-blocks { font-size: 10px; opacity: .6; font-family: 'JetBrains Mono', monospace; }

/* Terminal */
.term { background: #0e0e18; border-radius: 6px; padding: 10px; font-family: 'JetBrains Mono', monospace; font-size: 12px;
  height: 320px; display: flex; flex-direction: column; }
.term-out { flex: 1; overflow-y: auto; color: #b8f0b8; }
.term-line { margin: 2px 0; white-space: pre-wrap; word-break: break-word; }
.term-line.sys { color: #7db9ff; }
.term-line.cmd { color: #f5c518; }
.term-line.out { color: #cfe8cf; }
.term-line.ai { color: #d8b8ff; }
.term-line.err { color: #ff7d7d; }
.term-in { display: flex; align-items: center; gap: 6px; border-top: 1px solid #2a2a44; padding-top: 6px; margin-top: 6px; }
.term-prompt { color: #5cbf3f; }
.term-in input { flex: 1; background: none; border: none; color: #b8f0b8; font-family: inherit; font-size: 12px; outline: none; }

/* Settings */
.settings { display: flex; flex-direction: column; gap: 18px; }
.set-group { display: flex; flex-direction: column; gap: 8px; }
.set-label { font-size: 12px; font-weight: 600; opacity: .8; }
.set-wall { display: flex; gap: 8px; }
.wall-swatch { width: 48px; height: 32px; border-radius: 6px; border: 2px solid transparent; cursor: pointer; }
.wall-swatch.active { border-color: var(--gc-indigo); box-shadow: 0 0 0 2px rgba(106,90,205,.4); }
.set-row { display: flex; align-items: center; justify-content: space-between; font-size: 13px; }
.toggle { width: 46px; height: 24px; border-radius: 12px; background: #b0b0bc; border: none; position: relative; cursor: pointer; transition: .2s; }
.toggle.on { background: var(--a-green); }
.toggle .knob { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; background: #fff; border-radius: 50%; transition: .2s; }
.toggle.on .knob { left: 24px; }
.slider { width: 100%; accent-color: var(--gc-indigo); }
.ports { display: flex; gap: 8px; }
.port { flex: 1; padding: 8px; border-radius: 6px; border: 1px solid rgba(120,110,180,.3); background: rgba(120,110,180,.1);
  font-family: 'JetBrains Mono', monospace; font-weight: 700; cursor: pointer; }
.port.on { background: var(--a-green); color: #fff; border-color: var(--a-green); }

/* About */
.about { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.about-cube { width: 80px; height: 80px; perspective: 400px; flex-shrink: 0; margin: 0 auto; }
.about-cube { transform-style: preserve-3d; position: relative; }
.ac-face { position: absolute; width: 60px; height: 60px; left: 10px; top: 10px; background: linear-gradient(135deg, #7d6ce0, #4a3a9e);
  border: 2px solid #9a8ae0; display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 700; color: #cfc4ff; }
.about-cube { animation: aboutSpin 8s linear infinite; }
@keyframes aboutSpin { from { transform: rotateX(-20deg) rotateY(0); } to { transform: rotateX(-20deg) rotateY(360deg); } }
.acf-front { transform: translateZ(30px); }
.acf-back { transform: rotateY(180deg) translateZ(30px); }
.acf-right { transform: rotateY(90deg) translateZ(30px); }
.acf-left { transform: rotateY(-90deg) translateZ(30px); }
.acf-top { transform: rotateX(90deg) translateZ(30px); }
.acf-bottom { transform: rotateX(-90deg) translateZ(30px); }
.about-specs { flex: 1; min-width: 200px; }
.about-h { font-size: 20px; font-weight: 700; }
.about-v { font-size: 12px; opacity: .6; margin-bottom: 10px; }
.spec-table { width: 100%; font-size: 12px; border-collapse: collapse; }
.spec-table td { padding: 4px 6px; border-bottom: 1px solid rgba(120,110,180,.2); }
.sk { opacity: .6; font-weight: 600; }
.remix-link { display: inline-block; margin-top: 12px; font-size: 12px; color: var(--gc-indigo); text-decoration: none; font-weight: 600; }
.remix-link:hover { text-decoration: underline; }

/* Camera */
.camera { display: flex; flex-direction: column; gap: 10px; }
.cam-input { display: flex; gap: 8px; }
.cam-input input { flex: 1; padding: 8px; border-radius: 6px; border: 1px solid rgba(120,110,180,.3); background: rgba(120,110,180,.08); font-family: inherit; }
.cam-btn { padding: 8px 14px; border-radius: 6px; border: none; background: var(--c-yellow); font-weight: 700; cursor: pointer; }
.cam-preview { min-height: 200px; border-radius: 8px; background: rgba(120,110,180,.1); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.cam-img { width: 100%; border-radius: 8px; }
.cam-load, .cam-empty { font-size: 13px; opacity: .6; }
.cam-load { animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: .3; } }

/* Notes / Calc */
.notes-area { width: 100%; height: 240px; border: none; background: rgba(120,110,180,.06); border-radius: 6px; padding: 10px;
  font-family: 'JetBrains Mono', monospace; font-size: 13px; resize: none; outline: none; color: inherit; }
.calc-disp { background: #1a1a2a; color: #5cbf3f; font-family: 'JetBrains Mono', monospace; font-size: 24px; text-align: right;
  padding: 12px; border-radius: 6px; margin-bottom: 8px; overflow: hidden; }
.calc-keys { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.calc-key { padding: 14px 0; border-radius: 6px; border: none; background: rgba(120,110,180,.15); font-size: 16px; font-weight: 600; cursor: pointer; }
.calc-key:active { transform: scale(.95); }
.calc-key.eq { background: var(--a-green); color: #fff; }
.calc-key.clr { background: var(--b-red); color: #fff; grid-column: span 4; }

/* ===== DOCK / CONTROLLER ===== */
.dock-wrap { position: absolute; bottom: 10px; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; z-index: 400; }
.controller { position: relative; width: 320px; height: 130px; }
.ctrl-body { position: absolute; left: 50px; top: 20px; width: 220px; height: 90px; border-radius: 50px;
  background: linear-gradient(160deg, #7a6ad0, #46367e); box-shadow: 0 8px 24px rgba(0,0,0,.5), inset 0 2px 10px rgba(255,255,255,.25); }
.ctrl-handle { position: absolute; width: 90px; height: 100px; background: linear-gradient(160deg, #6a5abf, #3a2c6e);
  border-radius: 50% 50% 45% 45%; top: 22px; box-shadow: 0 6px 16px rgba(0,0,0,.4); }
.ctrl-handle.left { left: 8px; transform: rotate(-18deg); }
.ctrl-handle.right { right: 8px; transform: rotate(18deg); }

.gc-ctrl-btn, .stick, .c-stick, .dpad, .start-btn { position: absolute; border: none; cursor: pointer; z-index: 3;
  box-shadow: 0 3px 6px rgba(0,0,0,.4), inset 0 2px 4px rgba(255,255,255,.4); transition: transform .1s; }
.gc-ctrl-btn:active, .stick:active, .c-stick:active, .dpad:active, .start-btn:active { transform: scale(.9); }

.a-btn { width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #8ee070, var(--a-green)); right: 62px; top: 40px; }
.b-btn { width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ff8078, var(--b-red)); right: 100px; top: 58px; }
.x-btn { width: 16px; height: 30px; border-radius: 10px; background: radial-gradient(circle at 35% 20%, #d8d8e2, var(--grey)); right: 40px; top: 34px; }
.y-btn { width: 30px; height: 16px; border-radius: 10px; background: radial-gradient(circle at 35% 30%, #d8d8e2, var(--grey)); right: 78px; top: 26px; }
.z-btn { width: 30px; height: 12px; border-radius: 6px; background: radial-gradient(circle at 35% 30%, #9a8ae0, var(--gc-indigo)); right: 66px; top: 6px; }

.stick { width: 38px; height: 38px; border-radius: 50%; background: radial-gradient(circle, #2a2a3a, #14141f); left: 62px; top: 30px;
  display: flex; align-items: center; justify-content: center; }
.stick-cap { width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #5a5a7a, #2a2a3a); box-shadow: inset 0 -2px 4px rgba(0,0,0,.5); }
.c-stick { width: 28px; height: 28px; border-radius: 50%; background: radial-gradient(circle, #c9a010, var(--c-yellow)); right: 118px; top: 78px;
  display: flex; align-items: center; justify-content: center; }
.c-cap { width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffe070, #d8a808); }
.dpad { width: 30px; height: 30px; background: none; box-shadow: none; left: 76px; top: 78px; }
.dpad-h, .dpad-v { position: absolute; background: linear-gradient(160deg, #6a5abf, #3a2c6e); border-radius: 3px; box-shadow: inset 0 1px 2px rgba(255,255,255,.3); }
.dpad-h { width: 30px; height: 11px; top: 10px; }
.dpad-v { width: 11px; height: 30px; left: 10px; }
.start-btn { width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #d8d8e2, var(--grey)); left: 153px; top: 45px; }

/* tooltips */
[data-tip] { position: absolute; }
[data-tip]::after { content: attr(data-tip); position: absolute; bottom: 115%; left: 50%; transform: translateX(-50%);
  background: rgba(20,20,36,.95); color: #fff; font-size: 10px; padding: 3px 7px; border-radius: 4px; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: .15s; z-index: 10; font-family: 'Chakra Petch', sans-serif; }
[data-tip]:hover::after { opacity: 1; }
.dock-label { margin-top: 4px; font-size: 10px; color: rgba(255,255,255,.6); font-family: 'JetBrains Mono', monospace; letter-spacing: 1px; text-shadow: 0 1px 2px rgba(0,0,0,.6); }

/* confetti */
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 900; overflow: hidden; }
.confetti-bit { position: absolute; top: -20px; width: 10px; height: 10px; border-radius: 2px; animation: confFall 2.4s ease-in forwards; }
@keyframes confFall { to { transform: translateY(110vh) rotate(720deg); opacity: 0; } }

/* mobile */
@media (max-width: 767px) {
  .desk-icons { top: 34px; right: 8px; gap: 12px; }
  .desk-block { width: 40px; height: 34px; }
  .controller { transform: scale(.85); }
  .gc-body { max-height: none; }
  .mb-stat:nth-child(3) { display: none; }
}
</parameter>