.extra-app .app-content { overflow:auto; min-height:0; flex:1; background:#ece9d8; color:#111; font:12px Tahoma, sans-serif; }
.extra-app button, .extra-app input { font:inherit; }
.extra-app button { cursor:pointer; }
.extra-app button:focus-visible { outline:2px solid #ffb828; outline-offset:-3px; }
.game-toolbar, .browser-toolbar { display:flex; align-items:center; gap:7px; padding:7px; flex-wrap:wrap; }
.game-toolbar button, .browser-toolbar button, .pin-controls button { padding:3px 10px; }
.game-toolbar output, #sol-count { margin-left:auto; }
.app-content > p { margin:0; padding:7px 10px; border-top:1px solid #aaa; }
.game-launchers { display:grid; gap:8px; padding:16px; }
.game-launchers button { background:#fff; border:1px solid #a8b6c7; border-radius:3px; text-align:left; font-size:27px; padding:12px; }
.game-launchers strong, .game-launchers small { display:block; font-size:14px; padding:2px 0; }
.game-launchers small { font-size:11px; color:#555; }
#recent-files { padding:14px; }
#recent-files button { display:block; width:100%; text-align:left; padding:8px; }
.mine-dashboard { display:flex; align-items:center; justify-content:space-between; margin:8px auto; width:270px; padding:8px; box-sizing:border-box; border:2px inset #eee; background:#c0c0c0; }
.mine-dashboard output { color:#f22; background:#160000; font:bold 25px monospace; padding:0 4px; }
.mine-dashboard span { font-size:28px; background:#ddd; border:2px outset #eee; width:34px; text-align:center; color:#866800; }
#mine-board { display:grid; grid-template-columns:repeat(9,1fr); width:min(270px,95%); margin:0 auto 12px; border:3px inset #eee; }
#mine-board button { aspect-ratio:1; min-width:0; padding:0; border:3px outset #eee; background:#c0c0c0; font:bold 18px monospace; }
#mine-board button.revealed { border:1px solid #999; }
#mine-board button.exploded { background:#f44; }
#mine-board [data-number="1"] { color:blue; }
#mine-board [data-number="2"] { color:green; }
#mine-board [data-number="3"] { color:#c00; }
#mine-board [data-number="4"] { color:navy; }
#sol-table { padding:12px; background:radial-gradient(ellipse at top,#198054,#066139); min-height:340px; }
#sol-top, #sol-columns { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:8px; }
#sol-top { margin-bottom:24px; }
.playing-card { width:100%; height:80px; padding:4px; border:1px solid #aaa; border-radius:4px; background:#fffdf7; box-shadow:1px 2px 2px #0005; font:bold 17px Georgia,serif !important; color:#111; text-align:left; display:flex; align-items:flex-start; }
.playing-card.red-card { color:#c01421; }
.playing-card.card-back { background:repeating-linear-gradient(45deg,#143f9a 0 3px,#5079c1 3px 5px); border:4px solid #f5f2e8; opacity:1; }
.playing-card.empty-card { background:#00452755; border:1px solid #a0c7ac77; box-shadow:none; color:#a4c8b0; align-items:center; justify-content:center; font-size:25px !important; }
.playing-card.selected-card { outline:3px solid #ffe16b; filter:brightness(1.08); }
.sol-column { position:relative; }
.sol-column .playing-card { position:absolute; left:0; }
#pin-table { display:block; width:min(100%,360px); height:auto; margin:auto; background:#091029; touch-action:none; }
.pin-controls { display:flex; justify-content:space-between; padding:8px; gap:8px; }
.pin-controls button { touch-action:none; user-select:none; flex:1; min-height:34px; }
.browser-toolbar { background:#ece9d8; border-bottom:1px solid #a8a8a8; }
#browser-address { flex:1; min-width:100px; padding:4px; }
#browser-external { margin-left:auto; color:#1648a3; }
#browser-homepage { padding:35px 24px; min-height:265px; background:linear-gradient(#e2edff,#fff); }
#browser-homepage h2 { font:italic bold 27px Georgia,serif; color:#1952ad; }
.browser-bookmarks { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:24px 0; }
.browser-bookmarks button { background:white; color:#174485; padding:12px; border:1px solid #aabedc; }
#browser-page { width:100%; height:380px; border:0; background:white; }
.extra-app [hidden] { display:none !important; }
@media(max-width:450px) { #sol-table { padding:6px; } #sol-top,#sol-columns { gap:3px; } .playing-card { font-size:13px !important; height:66px; } }
