:root{ --cell: clamp(30px, 9.2vw, 42px); --tcell: clamp(15px, 4.6vw, 21px); --gap: 4px; } *{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; } html,body{ height:100%; margin:0; } /* Shared LearnIT wallpaper — matches every other game so the dashboard → game transition is seamless. Wallpaper lives on so it stays fixed; is transparent over it. */ html{ background: #5a8edd url('../../Windows XP Background.svg') center center / cover no-repeat fixed; } body{ font-family: Tahoma, "Segoe UI", Verdana, sans-serif; font-size:13px; color:#000; background: transparent; display:flex; align-items:flex-start; justify-content:center; padding:18px 10px 40px; min-height:100%; overflow-x:hidden; } /* ─── Window frame — blockware's own cream box, NOT the canonical blue-gradient frame from index.html. Kept so the body stays the light XP look without a thick blue border bleeding around the edges. ONLY the titlebar + button styles below are unified with the dashboard. */ .xp-window { width: 100%; max-width: 520px; background: #ece9d8; border: 1px solid #0831d9; border-radius: 8px 8px 0 0; box-shadow: 0 6px 26px rgba(0,0,0,.45); overflow: hidden; user-select: none; } .xp-titlebar { background: linear-gradient(to bottom, #0058e6 0%, #3893ff 3%, #1d72e0 9%, #0c5fd5 50%, #045fda 90%, #0455b7 100%); color: #ffffff; font-weight: bold; font-size: 13px; padding: 3px 4px 3px 6px; height: 28px; display: flex; align-items: center; justify-content: space-between; text-shadow: 1px 1px 0 rgba(0,0,0,0.35); border-radius: 6px 6px 0 0; /* Sit above the start/game-over overlays (z-index:10000) so the window controls — notably the X to close — stay clickable while the start screen is up. */ position: relative; z-index: 10001; } .xp-titlebar-left { flex: 1 1 auto; display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; } .xp-titlebar-left > span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .xp-icon { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; flex-shrink: 0; } .xp-icon svg { display: block; } .xp-titlebar-buttons { display: flex; gap: 2px; flex-shrink: 0; } .xp-tb-btn { width: 22px; height: 22px; background: linear-gradient(to bottom, #4791ed 0%, #2772d4 50%, #205fc4 100%); color: #ffffff; border: 1px solid rgba(0,0,0,0.55); border-radius: 3px; display: flex; align-items: center; justify-content: center; cursor: default; box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), inset 0 -1px 0 rgba(0,0,0,0.18); } .xp-tb-btn svg { display: block; } .xp-tb-btn:hover { filter: brightness(1.1); } a.xp-tb-btn { text-decoration: none; } .xp-tb-btn.close { background: linear-gradient(to bottom, #e96d65 0%, #c93630 50%, #9d1410 100%); border-color: #500000; } /* Blockware-specific menubar — solid cream with a wider gap. The canonical dashboard menubar uses a subtle gradient + 0 gap; that's reverted here per request — only the titlebar + buttons were meant to be unified. */ .xp-menubar { background: #ece9d8; border-bottom: 1px solid #aca899; padding: 2px 6px; display: flex; gap: 14px; /* Pin the font so the bar reads identically across every game. */ font-family: Tahoma, "Segoe UI", "MS Sans Serif", Arial, sans-serif; font-size: 11px; } .xp-menubar span { padding: 1px 5px; border-radius: 3px; cursor: default; } .xp-menubar span:hover { background: #316ac5; color: #fff; } /* ---------- body ---------- */ .body{ padding:10px; } .statbar{ display:flex; align-items:stretch; gap:8px; margin-bottom:9px; } .panel{ background:#fff; border:1px solid #7f9db9; border-top-color:#404a52; border-left-color:#404a52; border-radius:2px; padding:5px 9px; box-shadow: inset 1px 1px 0 #c9d3df; } .score-panel{ flex:1; display:flex; gap:14px; } .stat{ display:flex; flex-direction:column; } .stat .lbl{ font-size:10px; color:#34508a; font-weight:bold; text-transform:uppercase; letter-spacing:.4px; } .stat .val{ font-size:20px; font-weight:bold; color:#0a2f7a; line-height:1.05; font-variant-numeric:tabular-nums; } .combo-tag{ align-self:center; margin-left:auto; font-size:14px; font-weight:bold; color:#ff9e00; opacity:0; white-space:nowrap; text-shadow:0 0 6px rgba(255,170,0,.7), 1px 1px 1px rgba(0,0,0,.4); } .combo-tag.show{ opacity:1; } .combo-tag.mega{ font-size:16px; color:#ff4d2e; } .combo-tag.punch{ animation: combopunch .45s ease-out; } @keyframes combopunch{ 0%{ transform:scale(1.7) rotate(-5deg); } 35%{ transform:scale(1.06) rotate(2deg); } 70%{ transform:scale(1) rotate(-1deg); } 100%{ transform:scale(1) rotate(0); } } .ctrls{ display:flex; flex-direction:column; gap:5px; justify-content:center; } .xbtn{ font-family:Tahoma,"Segoe UI",sans-serif; font-size:12px; padding:3px 10px; border:1px solid #003c74; border-radius:3px; background: linear-gradient(180deg,#fdfdfd,#e3e3d2 48%,#dad6c4 52%,#eef0e6); cursor:pointer; white-space:nowrap; box-shadow: inset 0 0 0 1px #fff, inset 0 -2px 3px rgba(0,0,0,.06); } .xbtn:hover{ background: linear-gradient(180deg,#fff,#eef4ff 48%,#dfeafe 52%,#f2f7ff); border-color:#2a6fd6; } .xbtn:active{ background:#d6d2c2; } /* ---------- game board ---------- */ .board-wrap{ display:flex; justify-content:center; padding:10px; margin:0 auto 9px; width:max-content; max-width:100%; --bg1:#243049; --bg2:#161d2e; --cell1:#2c3954; --cell2:#212c42; background: linear-gradient(160deg, var(--bg1), var(--bg2)); border:2px solid #0b1322; border-radius:10px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), inset 0 2px 8px rgba(0,0,0,.55); --ld: 8s; /* dot-run speed (lower = faster) */ transition: box-shadow .25s, background .5s ease; } /* glowing dotted border lights */ .board-lights{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:3; color:#3ecb5e; overflow:visible; opacity:0; transition: color .25s, opacity .35s; } /* dots only appear once the board passes 60% full (a "getting crowded" warning) */ .board-wrap.lights-on .board-lights{ opacity:.85; } .board-lights .ring{ animation: runlights var(--ld) linear infinite; } @keyframes runlights{ to{ stroke-dashoffset: -15; } } /* combo: brighter, gold, faster, bigger glow (only visible while lights are on) */ .board-wrap.combo{ --ld: 1.5s; box-shadow: inset 0 0 0 1px rgba(255,210,80,.25), inset 0 2px 8px rgba(0,0,0,.55), 0 0 16px rgba(255,190,40,.45); } .board-wrap.combo .board-lights{ color:#ffd23d; filter: drop-shadow(0 0 4px currentColor) drop-shadow(0 0 8px currentColor); } .board-wrap.combo.mega{ --ld: .85s; box-shadow: inset 0 0 0 1px rgba(255,120,60,.3), inset 0 2px 8px rgba(0,0,0,.55), 0 0 24px rgba(255,90,40,.6); } .board-wrap.combo.mega .board-lights{ color:#ff6a3c; filter: drop-shadow(0 0 5px currentColor) drop-shadow(0 0 11px currentColor); } .board{ display:grid; grid-template-columns: repeat(8, var(--cell)); grid-template-rows: repeat(8, var(--cell)); gap: var(--gap); touch-action:none; } .cell{ width:var(--cell); height:var(--cell); border-radius:6px; background: linear-gradient(160deg, var(--cell1,#2c3954), var(--cell2,#212c42)); box-shadow: inset 0 2px 3px rgba(0,0,0,.5), inset 0 -1px 0 rgba(255,255,255,.04); } .cell.filled{ background:none; } /* glossy gem block */ .block{ width:100%; height:100%; border-radius:6px; position:relative; background: linear-gradient(155deg, hsl(var(--h), var(--s), calc(var(--l) + 16%)) 0%, hsl(var(--h), var(--s), var(--l)) 46%, hsl(var(--h), var(--s), calc(var(--l) - 16%)) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -3px 4px rgba(0,0,0,.30), inset 0 0 0 1px hsl(var(--h), var(--s), calc(var(--l) - 24%)), 0 1px 1px rgba(0,0,0,.25); } .block::after{ content:""; position:absolute; left:14%; top:9%; width:42%; height:30%; border-radius:50%; background: linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,0)); } .cell.preview-ok .block, .cell.preview-ok.ghost{ outline:2px solid rgba(255,255,255,.85); outline-offset:-2px; } .cell.preview-ghost{ background: linear-gradient(160deg, hsla(var(--h),var(--s),calc(var(--l) + 10%),.55), hsla(var(--h),var(--s),var(--l),.45)); box-shadow: inset 0 0 0 2px rgba(255,255,255,.6); } .cell.preview-bad{ background: linear-gradient(160deg,#7a2330,#5a1822); box-shadow: inset 0 0 0 2px rgba(255,120,120,.7); } /* line that WILL clear if the piece is dropped here (anticipation glow) */ @keyframes willpulse{ 0%,100%{ box-shadow: inset 0 0 0 2px rgba(255,255,255,.9), 0 0 6px 1px rgba(255,240,150,.7); } 50%{ box-shadow: inset 0 0 0 2px rgba(255,255,255,1), 0 0 12px 3px rgba(255,225,80,.95); } } .cell.will-clear{ animation: willpulse .6s ease-in-out infinite; z-index:2; } .cell.will-clear .block{ filter: brightness(1.25); } @keyframes pop{ 0%{ transform:scale(1); filter:brightness(1); } 45%{ transform:scale(1.18); filter:brightness(1.9); } 100%{ transform:scale(0); filter:brightness(2.4); opacity:0; } } .cell.clearing .block{ animation:pop .26s ease-in forwards; } /* board-fills-up-on-loss effect */ .block.dead{ background: linear-gradient(155deg,#9aa3b0,#6c7585 46%,#474e5b 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -3px 4px rgba(0,0,0,.32), inset 0 0 0 1px #353b45, 0 1px 1px rgba(0,0,0,.25); animation: fillin .2s ease-out backwards; } .block.dead::after{ display:none; } @keyframes fillin{ 0%{ transform:scale(0); opacity:0; } 70%{ transform:scale(1.14); } 100%{ transform:scale(1); opacity:1; } } /* floating score popup */ .popup{ position:absolute; left:50%; top:42%; transform:translate(-50%,-50%); pointer-events:none; z-index:50; text-align:center; white-space:nowrap; animation: floatup 1s ease-out forwards; } .popup .pts{ font-size:30px; font-weight:bold; color:#fff; text-shadow:0 0 8px rgba(255,210,61,.9), 1px 1px 2px rgba(0,0,0,.6); } .popup .praise{ font-size:15px; font-weight:bold; color:#ffe14d; text-shadow:1px 1px 2px rgba(0,0,0,.7); margin-top:1px; } .place-popup{ animation-duration:.8s; } .place-popup .pts{ font-size:17px; color:#eaf4ff; text-shadow:0 0 6px rgba(90,160,255,.85), 1px 1px 2px rgba(0,0,0,.6); } /* perfect-fit / clutch-save thumbs up */ .thumb{ position:absolute; pointer-events:none; z-index:40; display:flex; align-items:center; justify-content:center; animation: thumbpop 1s ease-out forwards; } .thumb .ray{ position:absolute; inset:-35%; border-radius:50%; background: repeating-conic-gradient(rgba(255,224,120,0) 0deg, rgba(255,210,70,.9) 5deg, rgba(255,170,40,0) 11deg); animation: rayspin 1s linear forwards; } .thumb .tu{ position:relative; font-size:.66em; line-height:1; filter: drop-shadow(0 1px 1px rgba(0,0,0,.4)); } @keyframes thumbpop{ 0%{ transform:scale(.2); opacity:0; } 30%{ transform:scale(1.25); opacity:1; } 55%{ transform:scale(1); } 80%{ opacity:1; } 100%{ transform:scale(1); opacity:0; } } @keyframes rayspin{ 0%{ transform:rotate(0) scale(.4); opacity:0; } 30%{ opacity:.95; } 100%{ transform:rotate(70deg) scale(1.15); opacity:0; } } .perfect-pop .praise{ font-size:21px !important; font-weight:900; color:#ffd23d; text-shadow:0 0 10px rgba(255,170,0,.95), 2px 2px 2px rgba(0,0,0,.6); animation: comboshake .5s ease-out; } /* combo popup — big and punchy */ .combo-pop .combo-head{ font-size:22px; font-weight:900; color:#ffd23d; letter-spacing:1px; text-shadow:0 0 10px rgba(255,160,0,.95), 2px 2px 2px rgba(0,0,0,.6); animation: comboshake .5s ease-out; } .combo-pop.mega .combo-head{ font-size:30px; color:#ff5a3c; text-shadow:0 0 14px rgba(255,80,30,.95), 2px 2px 2px rgba(0,0,0,.6); } .combo-pop.mega .pts{ font-size:42px; } .combo-pop.mega .praise{ font-size:18px; color:#ffcaa0; } @keyframes comboshake{ 0%{ transform:scale(1.8) rotate(-6deg); opacity:0; } 35%{ transform:scale(1.08) rotate(3deg); opacity:1; } 65%{ transform:scale(1) rotate(-2deg); } 100%{ transform:scale(1) rotate(0); } } .val.tierup{ animation: tierpop .55s ease-out; } @keyframes tierpop{ 0%{ transform:scale(1); } 40%{ transform:scale(1.35); filter:brightness(1.4); } 100%{ transform:scale(1); } } /* full-screen burst when the score crosses into a new colour tier */ .tier-flash{ position:fixed; inset:0; z-index:9000; pointer-events:none; background: radial-gradient(circle at 50% 45%, var(--fc) 0%, transparent 62%); mix-blend-mode:screen; animation: tierflash .9s ease-out forwards; } .tier-flash::after{ content:""; position:absolute; left:50%; top:45%; width:12vmax; height:12vmax; margin:-6vmax 0 0 -6vmax; border-radius:50%; border:6px solid var(--fc); animation: tierring .9s ease-out forwards; } @keyframes tierflash{ 0%{ opacity:0; transform:scale(.25); } 22%{ opacity:.9; } 100%{ opacity:0; transform:scale(1.7); } } @keyframes tierring{ 0%{ transform:scale(.1); opacity:.9; } 100%{ transform:scale(9); opacity:0; } } @keyframes floatup{ 0%{ opacity:0; transform:translate(-50%,-30%) scale(.6); } 18%{ opacity:1; transform:translate(-50%,-50%) scale(1.12); } 35%{ transform:translate(-50%,-52%) scale(1); } 100%{ opacity:0; transform:translate(-50%,-130%) scale(1); } } .board-wrap{ position:relative; } .val.newbest{ animation: bestflash .6s ease-out 2; } @keyframes bestflash{ 0%,100%{ color:#0a2f7a; } 50%{ color:#1c9c1c; text-shadow:0 0 6px rgba(40,200,40,.6); } } /* ---------- tray ---------- */ .tray{ display:flex; justify-content:space-around; align-items:center; gap:6px; min-height:calc(var(--tcell) * 5 + 8px); background:#fff; border:1px solid #7f9db9; border-top-color:#404a52; border-left-color:#404a52; border-radius:3px; padding:8px 4px; margin-bottom:10px; box-shadow: inset 1px 1px 0 #c9d3df; } .tray-slot{ flex:1; display:flex; align-items:center; justify-content:center; min-height:calc(var(--tcell) * 5); } .piece{ display:grid; gap:3px; cursor:grab; touch-action:none; padding:2px; transition:transform .08s; } .piece:active{ cursor:grabbing; } .piece.used{ opacity:0; pointer-events:none; } .pc{ width:var(--tcell); height:var(--tcell); border-radius:4px; } .pc.on{ background: linear-gradient(155deg, hsl(var(--h), var(--s), calc(var(--l) + 16%)) 0%, hsl(var(--h), var(--s), var(--l)) 46%, hsl(var(--h), var(--s), calc(var(--l) - 16%)) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 3px rgba(0,0,0,.3), inset 0 0 0 1px hsl(var(--h), var(--s), calc(var(--l) - 24%)); } /* drag ghost */ #ghost{ position:fixed; left:0; top:0; z-index:9999; pointer-events:none; display:grid; gap:var(--gap); opacity:.92; display:none; filter: drop-shadow(0 6px 8px rgba(0,0,0,.4)); } #ghost .pc.on{ width:var(--cell); height:var(--cell); border-radius:6px; } /* ---------- keyword panel ---------- */ .kw-head{ display:flex; align-items:center; gap:8px; margin-bottom:6px; } .kw-head h2{ font-size:13px; margin:0; color:#0a2f7a; } .kw-progress{ flex:1; height:14px; background:#fff; border:1px solid #7f9db9; border-radius:3px; overflow:hidden; box-shadow: inset 1px 1px 0 #c9d3df; } .kw-progress > div{ height:100%; width:0%; background: linear-gradient(180deg,#86d24a,#3a9c1c); transition:width .3s; background-size:18px 100%; } .kw-count{ font-size:11px; font-weight:bold; color:#34508a; white-space:nowrap; } .kw-hint{ font-size:11px; color:#5a6470; margin:5px 2px 0; font-style:italic; } /* scrolling keyword marquee */ .marquee-bar{ display:flex; align-items:stretch; gap:0; margin-bottom:9px; background:#fff; border:1px solid #7f9db9; border-top-color:#404a52; border-left-color:#404a52; border-radius:3px; box-shadow: inset 1px 1px 0 #c9d3df; overflow:hidden; } .marquee-label{ flex:none; display:flex; align-items:center; font-size:10px; font-weight:bold; color:#fff; letter-spacing:.6px; padding:0 9px; background: linear-gradient(180deg,#3d95f0,#0a52d6); } .marquee{ flex:1; overflow:hidden; white-space:nowrap; padding:6px 0; min-width:0; } .marquee .track{ display:inline-block; padding-left:100%; font-size:12px; color:#333; animation: marquee 16s linear infinite; } .marquee .track .term{ font-weight:bold; color:#0a3f9e; } @keyframes marquee{ 0%{ transform:translateX(0); } 100%{ transform:translateX(-100%); } } .kw-card{ border:1px solid #c8d4e3; border-radius:4px; padding:5px 7px; background: linear-gradient(180deg,#f3f8ff,#e6effb); } .kw-card .term{ font-weight:bold; color:#0a3f9e; font-size:12px; } .kw-card .def{ font-size:11px; color:#333; line-height:1.3; margin-top:1px; } /* ---------- power-ups ---------- */ .powerbar{ display:flex; gap:6px; margin-bottom:5px; } .pu{ flex:1; position:relative; display:flex; align-items:center; gap:6px; padding:5px 7px; cursor:pointer; text-align:left; font-family:Tahoma,"Segoe UI",sans-serif; border:1px solid #003c74; border-radius:4px; background: linear-gradient(180deg,#fdfdfd,#e3e3d2 48%,#dad6c4 52%,#eef0e6); box-shadow: inset 0 0 0 1px #fff; } .pu:hover:not(:disabled){ background: linear-gradient(180deg,#fff,#eef4ff 48%,#dfeafe 52%,#f2f7ff); border-color:#2a6fd6; } .pu:disabled{ opacity:.45; cursor:not-allowed; filter:grayscale(.6); } .pu.armed{ border-color:#e8a000; box-shadow: inset 0 0 0 1px #fff, 0 0 0 2px #ffce4d, 0 0 8px rgba(255,190,40,.8); background: linear-gradient(180deg,#fffbe8,#ffe9a8); } .pu-ico{ font-size:18px; line-height:1; } .pu-text{ display:flex; flex-direction:column; line-height:1.15; } .pu-name{ font-size:12px; font-weight:bold; color:#13315f; } .pu-sub{ font-size:9.5px; color:#5a6470; text-transform:uppercase; letter-spacing:.3px; } .pu-count{ margin-left:auto; min-width:18px; height:18px; padding:0 4px; border-radius:9px; background:#0a52d6; color:#fff; font-size:11px; font-weight:bold; display:flex; align-items:center; justify-content:center; box-shadow: inset 0 1px 0 rgba(255,255,255,.4); } .pu:disabled .pu-count{ background:#9a9a86; } .charge-row{ display:flex; align-items:center; gap:8px; margin-bottom:9px; } .charge-lbl{ font-size:10px; color:#34508a; font-weight:bold; text-transform:uppercase; letter-spacing:.4px; white-space:nowrap; } .charge-bar{ flex:1; height:10px; background:#fff; border:1px solid #7f9db9; border-radius:3px; overflow:hidden; box-shadow: inset 1px 1px 0 #c9d3df; } .charge-bar > div{ height:100%; width:0%; background: linear-gradient(180deg,#7fb8ff,#2566cf); transition:width .3s; } .board.arming .cell{ cursor:crosshair; } .board.arming{ box-shadow:0 0 0 2px #ffce4d inset; border-radius:8px; } /* ---------- revive ---------- */ .revive-intro{ color:#444; } .revive-q{ font-size:14px !important; font-weight:bold; color:#0a2f7a; margin:12px 4px !important; line-height:1.35; } .revive-opts{ display:grid; grid-template-columns:1fr 1fr; gap:7px; } .revive-opts .opt{ font-family:Tahoma,"Segoe UI",sans-serif; font-size:13px; padding:9px 8px; border:1px solid #003c74; border-radius:4px; cursor:pointer; color:#13315f; font-weight:bold; background: linear-gradient(180deg,#fdfdfd,#e3e3d2 48%,#dad6c4 52%,#eef0e6); box-shadow: inset 0 0 0 1px #fff; } .revive-opts .opt:hover:not(:disabled){ background: linear-gradient(180deg,#fff,#eef4ff 48%,#dfeafe 52%,#f2f7ff); border-color:#2a6fd6; } .revive-opts .opt:disabled{ cursor:default; } .revive-opts .opt.correct{ background: linear-gradient(180deg,#c7f0b8,#7fce5e); border-color:#3a9c1c; color:#14400a; } .revive-opts .opt.wrong{ background: linear-gradient(180deg,#f5b8b8,#e07a7a); border-color:#b22; color:#400; } .revive-feedback{ min-height:16px; font-weight:bold; margin-top:10px !important; } @media (max-width:420px){ .revive-opts{ grid-template-columns:1fr; } } /* ---------- game over ---------- */ .overlay{ position:fixed; inset:0; background:rgba(0,0,40,.45); z-index:10000; display:none; align-items:center; justify-content:center; padding:16px; } .overlay.show{ display:flex; } /* ─── XP button + start/intro card (matches Bit Boost & Keyword Outbreak) ─── */ .xp-btn { font-family: Tahoma, sans-serif; font-size: 11px; background: linear-gradient(to bottom, #f6f6f6 0%, #ece9d8 45%, #ddd9c0 55%, #d6d2c2 100%); border: 1px solid #003c74; border-radius: 3px; padding: 3px 12px; color: #000; cursor: pointer; min-width: 75px; min-height: 22px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), inset 0 -1px 0 rgba(0,0,0,0.05); } .xp-btn:hover:not(:disabled) { background: linear-gradient(to bottom, #fff7d2 0%, #ffe589 45%, #ffb04a 55%, #ffa12d 100%); border-color: #c66902; } .xp-btn:active:not(:disabled) { background: linear-gradient(to bottom, #d6d2c2 0%, #ddd9c0 45%, #ece9d8 55%, #f6f6f6 100%); } .xp-btn:disabled { opacity:.5; cursor:not-allowed; } .xp-btn.primary { box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 0 0 1px #0855c4; font-weight: bold; } .overlay-card { background: linear-gradient(to bottom, #0058e6 0%, #245edb 9%, #245edb 100%); border-radius: 6px 6px 0 0; padding: 0 3px 3px; box-shadow: 0 12px 28px rgba(0,0,0,0.55); max-width: 380px; width: 100%; margin: 0 16px; } .overlay-card > * { background: #ece9d8; } .overlay-card > *:first-child { background: linear-gradient(to bottom, #0058e6 0%, #3893ff 3%, #1d72e0 9%, #0c5fd5 50%, #045fda 90%, #0455b7 100%); color: #fff; font-weight: bold; text-shadow: 1px 1px 0 rgba(0,0,0,0.35); padding: 6px 12px; font-size: 13px; border-radius: 4px 4px 0 0; } .overlay-card .oc-title { text-align: left; } .overlay-card .oc-sub { padding: 14px 16px 6px; font-size: 12px; color: #003399; text-align: center; line-height: 1.45; } .overlay-card ul.oc-controls { list-style: none; margin: 0; padding: 8px 18px; font-size: 11px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px; } .overlay-card ul.oc-controls li { display: flex; align-items: center; gap: 4px; } .overlay-card ul.oc-controls kbd { background: #fff; border: 1px solid #aca899; border-radius: 2px; padding: 1px 5px; font: 10px Tahoma, sans-serif; box-shadow: 1px 1px 0 #888; } .overlay-card .xp-btn { display: block; margin: 14px auto 14px; min-width: 160px; } .dialog{ width:100%; max-width:300px; background:#ece9d8; border:1px solid #0831d9; border-radius:8px 8px 0 0; box-shadow:0 8px 30px rgba(0,0,0,.5); overflow:hidden; } #go-dialog{ max-width:440px; } .dialog .dbody{ padding:16px; text-align:center; } .dialog .dbody h3{ margin:0 0 4px; color:#0a2f7a; } .dialog .dbody p{ margin:3px 0; font-size:12px; } .dialog .big{ font-size:30px; font-weight:bold; color:#b8002e; } .go-kw-title{ font-size:12px !important; font-weight:bold; color:#0a2f7a; margin:12px 0 6px !important; } .go-kw-list{ text-align:left; background:#fff; border:1px solid #7f9db9; border-top-color:#404a52; border-left-color:#404a52; border-radius:3px; padding:7px; box-shadow: inset 1px 1px 0 #c9d3df; max-height:260px; overflow-y:auto; display:grid; grid-template-columns:1fr 1fr; gap:6px; } .go-kw-list .none{ grid-column:1/-1; text-align:center; color:#7a7a6a; font-style:italic; padding:12px; } #playagain[disabled]{ opacity:.65; cursor:not-allowed; color:#6b6b5c; background: linear-gradient(180deg,#f3f1e6,#e1ddcc); border-color:#9a9a86; } @media (max-width:420px){ .go-kw-list{ grid-template-columns:1fr; } } .statusbar{ background:#ece9d8; border-top:1px solid #fff; box-shadow:inset 0 1px 0 #aca899; padding:3px 8px; font-size:11px; color:#444; display:flex; justify-content:space-between; } .statusbar .pill{ border:1px solid #aca899; border-radius:2px; padding:0 6px; box-shadow:inset 0 0 0 1px #fff; }