/* snippets.css — faithful, scoped recreations of SejrBank's in-game windows,
   for the marketing landing page and the How-to-Play guide. Everything is
   namespaced under .gw so it never touches the surrounding page. */
.gw{ font-family:'Tahoma','MS Sans Serif',Geneva,sans-serif; font-size:12px; color:#000;
  background:#c0c0c0; border-top:2px solid #fff; border-left:2px solid #fff;
  border-bottom:2px solid #000; border-right:2px solid #000; box-shadow:0 20px 50px -22px rgba(0,0,0,.7);
  border-radius:2px; overflow:hidden; text-align:left; }
.gw-bar{ background:linear-gradient(90deg,#000080,#1084d0); color:#fff; font-weight:bold; font-size:12px;
  padding:4px 6px; display:flex; align-items:center; gap:6px; }
.gw-bar .t{ flex:1; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.gw-bar .b{ width:16px; height:14px; background:#c0c0c0; border-top:1px solid #fff; border-left:1px solid #fff;
  border-bottom:1px solid #000; border-right:1px solid #000; display:inline-flex; align-items:center; justify-content:center;
  color:#000; font-size:9px; font-weight:bold; }
.gw-body{ padding:9px 10px 11px; }
.gw-term{ background:#001a00; color:#33ff33; font-family:'Courier New',monospace; font-size:12px; line-height:1.5;
  white-space:pre; padding:10px 12px; overflow:hidden; text-shadow:0 0 4px rgba(51,255,51,.45); }
.gw-term .dim{ color:#1d8f1d; } .gw-term .hi{ color:#b6ffb6; } .gw-term .yel{ color:#ffff66; } .gw-term .red{ color:#ff5555; }

.gw table.grid{ width:100%; border-collapse:collapse; background:#fff; font-size:12px; }
.gw table.grid th{ background:#c0c0c0; text-align:left; padding:3px 7px; font-size:11px;
  border:1px solid; border-color:#fff #808080 #808080 #fff; }
.gw table.grid td{ padding:3px 7px; border-bottom:1px solid #ddd; }
.gw table.grid td.r, .gw table.grid th.r{ text-align:right; font-family:'Courier New',monospace; font-weight:bold; }
.gw .pos{ color:#008000; } .gw .neg{ color:#c00000; } .gw .warn{ color:#b06000; } .gw .small{ font-size:11px; color:#333; }
.gw .tag{ display:inline-block; font-size:10px; font-weight:bold; padding:0 5px; border:1px solid #888; background:#eee; }
.gw .tag.g{ background:#d7f0d7; border-color:#3a7; color:#053; }
.gw .tag.b{ background:#d9e4f6; border-color:#57a; color:#026; }
.gw .tag.y{ background:#fdf3cf; border-color:#ca8; color:#640; }
.gw .tag.r{ background:#f6d6d6; border-color:#b55; color:#600; }

.gw .kpis{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:9px; }
.gw .kpi{ background:#fff; padding:5px 10px; min-width:96px; border-top:2px solid #808080; border-left:2px solid #808080;
  border-bottom:2px solid #fff; border-right:2px solid #fff; }
.gw .kpi .k{ font-size:10px; color:#444; text-transform:uppercase; letter-spacing:.4px; }
.gw .kpi .v{ font-family:'Courier New',monospace; font-weight:bold; font-size:15px; }
.gw .kpi .s{ font-size:10px; font-family:'Courier New',monospace; color:#555; }

.gw .field{ border:1px solid #808080; box-shadow:1px 1px 0 #fff inset,-1px -1px 0 #fff; padding:9px 11px 11px; margin-bottom:9px; position:relative; }
.gw .field > .legend{ position:absolute; top:-8px; left:8px; background:#c0c0c0; padding:0 5px; font-size:11px; font-weight:bold; }
.gw .row{ display:flex; align-items:center; gap:8px; margin:6px 0; flex-wrap:wrap; }
.gw .row label{ min-width:120px; font-size:12px; }
.gw .row .val{ font-family:'Courier New',monospace; font-weight:bold; min-width:56px; text-align:right; }

.gw .meter{ height:14px; background:#fff; position:relative; border-top:2px solid #808080; border-left:2px solid #808080;
  border-bottom:2px solid #fff; border-right:2px solid #fff; }
.gw .meter .fill{ position:absolute; inset:0; background:repeating-linear-gradient(90deg,#000080 0 7px,#1084d0 7px 9px); }
.gw .meter .fill.ok{ background:repeating-linear-gradient(90deg,#087f08 0 7px,#0aa50a 7px 9px); }
.gw .meter .fill.bad{ background:repeating-linear-gradient(90deg,#a00 0 7px,#d33 7px 9px); }
.gw .meter .fill.warn{ background:repeating-linear-gradient(90deg,#b06000 0 7px,#d98a2b 7px 9px); }

.gw .stepbtn{ display:inline-flex; align-items:center; justify-content:center; min-width:26px; height:22px; font-weight:bold;
  background:#c0c0c0; border-top:1px solid #fff; border-left:1px solid #fff; border-bottom:1px solid #000; border-right:1px solid #000; }
.gw .barfill{ display:flex; height:9px; border-radius:5px; overflow:hidden; background:rgba(0,0,0,.08); margin:6px 0; }
.gw .barfill .seg{ height:100%; } .gw .barfill .you{ background:linear-gradient(90deg,#c1213f,#dc3d58); } .gw .barfill .riv{ background:#8d99ae; opacity:.7; }

.gw .cal{ font-family:'Courier New',monospace; font-size:12px; line-height:1.75; }