/* ============================================================
   WM Live Ticker '95  -  Windows 95 Look & Feel
   ============================================================ */
:root {
  --w95-face:#c0c0c0; --w95-hi:#ffffff; --w95-light:#dfdfdf;
  --w95-shadow:#808080; --w95-dark:#000000;
  --w95-navy:#000080; --w95-navy2:#1084d0; --w95-desktop:#008080;
  --w95-text:#000000;
}
* { box-sizing: border-box; }
html, body {
  margin:0; padding:0; height:100%; overflow:hidden;
  font-family:"MS Sans Serif","Pixelated MS Sans Serif",Tahoma,Geneva,sans-serif;
  font-size:12px; color:var(--w95-text);
  -webkit-font-smoothing:none; cursor:default; user-select:none;
  -webkit-text-size-adjust:100%;
}

/* --- Desktop --- */
#desktop { position:absolute; inset:0 0 30px 0; background:var(--w95-desktop); overflow:hidden; }
.desktop-icons { position:absolute; top:8px; left:8px; display:flex; flex-direction:column; gap:18px; }
.desktop-icon { width:74px; text-align:center; color:#fff; cursor:pointer; padding:2px; }
.desktop-icon span { display:block; margin-top:3px; font-size:11px; text-shadow:1px 1px 0 #000; padding:1px 2px; }
.desktop-icon.selected span { background:var(--w95-navy); outline:1px dotted #fff; }
.desktop-icon .icon-img { margin:0 auto; }

/* --- Icons --- */
.icon-img { width:32px; height:32px; background-size:32px 32px; image-rendering:pixelated; }
.icon-tv { background:linear-gradient(#4a90d9,#2f6db3); border:2px solid #000; border-radius:3px;
  box-shadow:inset 0 0 0 2px #c0c0c0, inset 0 0 0 3px #000; position:relative; }
.icon-tv::after { content:"\26BD"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:18px; }
.icon-help { background:#fff; border:2px solid #000; position:relative; }
.icon-help::after { content:"?"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-weight:bold; font-size:22px; color:#000; }
.icon-shutdown::after { content:"\23FB"; font-size:20px; }
.icon-img.icon-tv, .icon-img.icon-help, .icon-img.icon-shutdown { display:inline-block; vertical-align:middle; }
.start-entry .icon-img { width:24px; height:24px; }

/* --- Fenster --- */
.window {
  position:absolute; background:var(--w95-face);
  border-top:2px solid var(--w95-hi); border-left:2px solid var(--w95-hi);
  border-right:2px solid var(--w95-dark); border-bottom:2px solid var(--w95-dark);
  box-shadow:1px 1px 0 0 var(--w95-shadow);
  display:flex; flex-direction:column; min-width:260px; max-width:100%;
}
.window.hidden { display:none; }
.window::before { content:""; position:absolute; inset:0;
  border-top:1px solid var(--w95-light); border-left:1px solid var(--w95-light);
  border-right:1px solid var(--w95-shadow); border-bottom:1px solid var(--w95-shadow); pointer-events:none; }

.title-bar { display:flex; align-items:center; justify-content:space-between; height:20px;
  margin:2px; padding:0 2px 0 3px; background:linear-gradient(90deg,var(--w95-navy),var(--w95-navy2)); color:#fff; cursor:default; }
.window.inactive .title-bar { background:linear-gradient(90deg,#808080,#b5b5b5); }
.title-bar-text { font-weight:bold; font-size:12px; display:flex; align-items:center; gap:4px; white-space:nowrap; overflow:hidden; }
.title-icon { width:16px; height:16px; display:inline-block; background:#fff; border:1px solid #000; position:relative; }
.icon-tv-small::after { content:"\26BD"; position:absolute; inset:-2px 0 0 0; display:flex; align-items:center; justify-content:center; font-size:12px; }
.icon-note-small::after { content:"\1F4C4"; position:absolute; inset:-1px 0 0 0; display:flex; align-items:center; justify-content:center; font-size:11px; }
.title-bar-controls { display:flex; gap:2px; }
.tb-btn { width:16px; height:14px; font-family:inherit; font-size:10px; line-height:1; padding:0;
  background:var(--w95-face);
  border-top:1px solid var(--w95-hi); border-left:1px solid var(--w95-hi);
  border-right:1px solid var(--w95-dark); border-bottom:1px solid var(--w95-dark);
  box-shadow:inset -1px -1px 0 var(--w95-shadow), inset 1px 1px 0 var(--w95-light);
  color:#000; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.tb-btn:active { border-top:1px solid var(--w95-dark); border-left:1px solid var(--w95-dark);
  border-right:1px solid var(--w95-hi); border-bottom:1px solid var(--w95-hi); box-shadow:inset 1px 1px 0 var(--w95-shadow); }

/* --- Menueleiste --- */
.menu-bar { display:flex; gap:2px; padding:1px 2px; margin:0 2px; align-items:center; }
.menu-item { padding:2px 6px; cursor:pointer; font-size:12px; }
.menu-item:hover { background:var(--w95-navy); color:#fff; }
.menu-item u { text-decoration:underline; }
.menu-refresh { margin-left:auto; }

/* --- Fensterinhalt --- */
.window-body { margin:2px; padding:6px; flex:1; display:flex; flex-direction:column; gap:6px; overflow:hidden; }
.sunken { border-top:2px solid var(--w95-shadow); border-left:2px solid var(--w95-shadow);
  border-right:2px solid var(--w95-hi); border-bottom:2px solid var(--w95-hi); background:#fff; }

/* --- Scoreboard --- */
.scoreboard { display:grid; grid-template-columns:40px 1fr auto 1fr 40px; align-items:center; gap:8px;
  padding:10px 12px; background:#000; color:#00ff66; font-family:"Courier New",monospace; }
.sb-flag { width:34px; height:24px; border:1px solid #333; background-size:cover; background-position:center;
  background-repeat:no-repeat; justify-self:center; image-rendering:pixelated; }
.sb-flag.crest { background-size:contain; border-color:#555; }
.sb-team { font-size:15px; font-weight:bold; letter-spacing:1px; color:#ffd23f; text-transform:uppercase;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sb-team:nth-of-type(2) { text-align:right; }
#sb-away { text-align:left; }
.sb-score { font-size:30px; font-weight:bold; color:#00ff66; text-shadow:0 0 6px rgba(0,255,102,.5); white-space:nowrap; padding:0 6px; }
.sb-colon { animation:blink 1s steps(1) infinite; }
.sb-score.flash { animation:scoreflash .6s ease; }
@keyframes scoreflash { 0%,100%{color:#00ff66;} 50%{color:#fff; text-shadow:0 0 12px #fff;} }
@keyframes blink { 50% { opacity:0; } }

.match-meta { display:flex; align-items:center; gap:10px; font-size:11px; }
.live-badge { display:inline-flex; align-items:center; gap:4px; background:#d40000; color:#fff; font-weight:bold; padding:1px 6px; border-radius:2px; }
.live-badge.paused { background:var(--w95-shadow); }
.live-badge.ended { background:#000; }
.live-dot { width:7px; height:7px; border-radius:50%; background:#fff; animation:blink 1s steps(1) infinite; }
.match-clock { font-weight:bold; font-family:"Courier New",monospace; }
.match-stage { color:var(--w95-shadow); margin-left:auto; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:55%; text-align:right; }

/* --- Fieldsets --- */
fieldset { border-top:1px solid var(--w95-shadow); border-left:1px solid var(--w95-shadow);
  border-right:1px solid var(--w95-hi); border-bottom:1px solid var(--w95-hi); padding:6px 8px 8px; margin:0; position:relative; }
fieldset::before { content:""; position:absolute; inset:0;
  border-top:1px solid var(--w95-hi); border-left:1px solid var(--w95-hi);
  border-right:1px solid var(--w95-shadow); border-bottom:1px solid var(--w95-shadow); pointer-events:none; }
legend { padding:0 4px; font-size:11px; }

.matches-fieldset { flex:0 0 auto; }
.matches-list { display:flex; flex-direction:column; gap:2px; max-height:120px; overflow-y:auto; }
.match-row { display:grid; grid-template-columns:1fr auto 1fr 60px; align-items:center; gap:6px; padding:3px 4px; cursor:pointer; font-size:12px; }
.match-row:hover { background:#d8d8d8; }
.match-row.active { background:var(--w95-navy); color:#fff; outline:1px dotted #fff; outline-offset:-2px; }
.match-row .mr-home { text-align:right; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.match-row .mr-away { text-align:left;  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.match-row .mr-score { font-weight:bold; font-family:"Courier New",monospace; }
.match-row .mr-state { text-align:right; font-size:10px; color:#d40000; font-weight:bold; }
.match-row.active .mr-state { color:#ffd23f; }
.match-row .mr-state.state-fin { color:var(--w95-shadow); }
.match-row.active .mr-state.state-fin { color:#dfdfdf; }

/* --- Ereignisliste --- */
.events-fieldset { flex:1; display:flex; flex-direction:column; overflow:hidden; }
.events-list { flex:1; overflow-y:auto; padding:4px; font-size:12px; min-height:120px; }
.event { display:grid; grid-template-columns:36px 20px 1fr; gap:6px; padding:3px 2px; border-bottom:1px dotted #d0d0d0; align-items:start; animation:eventin .3s ease; }
@keyframes eventin { from{background:#fff3b0;} to{background:transparent;} }
.event .ev-min { font-weight:bold; font-family:"Courier New",monospace; color:var(--w95-navy); text-align:right; }
.event .ev-ico { text-align:center; }
.event .ev-txt { line-height:1.35; }
.event.ev-goal .ev-txt { font-weight:bold; }
.event.ev-goal { background:#eaffea; }
.event.ev-kickoff,.event.ev-half,.event.ev-final { color:var(--w95-shadow); font-style:italic; }
.ev-empty { color:var(--w95-shadow); padding:10px; text-align:center; }

/* Scrollbars */
.matches-list::-webkit-scrollbar,.events-list::-webkit-scrollbar,.notepad::-webkit-scrollbar { width:16px; }
.matches-list::-webkit-scrollbar-track,.events-list::-webkit-scrollbar-track,.notepad::-webkit-scrollbar-track { background:#dfdfdf; box-shadow:inset 1px 1px 0 #808080; }
.matches-list::-webkit-scrollbar-thumb,.events-list::-webkit-scrollbar-thumb,.notepad::-webkit-scrollbar-thumb {
  background:var(--w95-face); border-top:1px solid var(--w95-hi); border-left:1px solid var(--w95-hi);
  border-right:1px solid var(--w95-dark); border-bottom:1px solid var(--w95-dark); }

/* --- Statusleiste --- */
.win-status { display:flex; gap:3px; margin-top:2px; }
.status-cell { border-top:1px solid var(--w95-shadow); border-left:1px solid var(--w95-shadow);
  border-right:1px solid var(--w95-hi); border-bottom:1px solid var(--w95-hi);
  padding:2px 6px; font-size:11px; display:flex; align-items:center; gap:4px; white-space:nowrap; }
.status-grow { flex:1; overflow:hidden; text-overflow:ellipsis; }
.conn-dot { width:8px; height:8px; border-radius:50%; background:#00a000; box-shadow:0 0 3px #00ff00; }
#status-conn.demo .conn-dot { background:#c0a000; box-shadow:0 0 3px #ffd000; }

/* --- Notepad --- */
.notepad { background:#fff; padding:0; }
.notepad pre { margin:0; padding:8px; font-family:"Courier New",monospace; font-size:12px; white-space:pre-wrap;
  overflow-y:auto; height:260px; max-height:60vh;
  border-top:2px solid var(--w95-shadow); border-left:2px solid var(--w95-shadow);
  border-right:2px solid var(--w95-hi); border-bottom:2px solid var(--w95-hi); }

/* --- Taskleiste --- */
#taskbar { position:absolute; left:0; right:0; bottom:0; height:30px; background:var(--w95-face);
  border-top:2px solid var(--w95-hi); display:flex; align-items:center; padding:2px 3px; gap:4px; z-index:1000;
  padding-bottom:env(safe-area-inset-bottom); }
#start-btn { display:flex; align-items:center; gap:4px; height:22px; padding:0 6px 0 4px;
  font-family:inherit; font-size:12px; font-weight:bold; background:var(--w95-face);
  border-top:2px solid var(--w95-hi); border-left:2px solid var(--w95-hi);
  border-right:2px solid var(--w95-dark); border-bottom:2px solid var(--w95-dark); cursor:pointer; }
#start-btn.active { border-top:2px solid var(--w95-dark); border-left:2px solid var(--w95-dark);
  border-right:2px solid var(--w95-hi); border-bottom:2px solid var(--w95-hi); }
.start-logo { width:16px; height:16px;
  background:linear-gradient(90deg,#ff0000 50%,#00a800 50%) top/100% 50% no-repeat,
             linear-gradient(90deg,#0000ff 50%,#ffff00 50%) bottom/100% 50% no-repeat;
  transform:skewX(-6deg); border:1px solid #fff; }
.taskbar-divider { width:2px; height:22px; border-left:1px solid var(--w95-shadow); border-right:1px solid var(--w95-hi); }
#task-buttons { flex:1; display:flex; gap:3px; overflow:hidden; }
.task-btn { min-width:150px; max-width:180px; height:22px; display:flex; align-items:center; gap:5px; padding:0 6px;
  font-family:inherit; font-size:11px; background:var(--w95-face);
  border-top:2px solid var(--w95-hi); border-left:2px solid var(--w95-hi);
  border-right:2px solid var(--w95-dark); border-bottom:2px solid var(--w95-dark);
  cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.task-btn.active { border-top:2px solid var(--w95-dark); border-left:2px solid var(--w95-dark);
  border-right:2px solid var(--w95-hi); border-bottom:2px solid var(--w95-hi);
  background:repeating-conic-gradient(#c0c0c0 0% 25%, #b0b0b0 0% 50%) 0/3px 3px; font-weight:bold; }
.task-btn .title-icon { width:14px; height:14px; flex:0 0 auto; }
.tray { display:flex; align-items:center; gap:6px; height:22px; padding:0 6px;
  border-top:1px solid var(--w95-shadow); border-left:1px solid var(--w95-shadow);
  border-right:1px solid var(--w95-hi); border-bottom:1px solid var(--w95-hi); }
.tray-icon { width:14px; height:14px; display:inline-block; }
.tray-sound::after { content:"\1F50A"; font-size:12px; }
.tray-clock { font-size:11px; }

/* --- Startmenue --- */
#start-menu { position:absolute; left:3px; bottom:30px; width:190px; background:var(--w95-face);
  border-top:2px solid var(--w95-hi); border-left:2px solid var(--w95-hi);
  border-right:2px solid var(--w95-dark); border-bottom:2px solid var(--w95-dark);
  display:flex; z-index:1001; padding:2px; }
#start-menu.hidden { display:none; }
.start-banner { width:26px; background:linear-gradient(var(--w95-navy),var(--w95-navy2)); position:relative; }
.start-banner span { position:absolute; bottom:8px; left:50%; transform:rotate(-90deg); transform-origin:left bottom;
  color:#fff; font-weight:bold; font-size:15px; white-space:nowrap; letter-spacing:1px; }
.start-list { flex:1; padding:2px 0; }
.start-entry { display:flex; align-items:center; gap:8px; padding:5px 8px; cursor:pointer; font-size:12px; }
.start-entry:hover { background:var(--w95-navy); color:#fff; }
.start-sep { height:2px; margin:3px 4px; border-top:1px solid var(--w95-shadow); border-bottom:1px solid var(--w95-hi); }
.icon-shutdown { background:#fff; border:1px solid #000; position:relative; }

.hidden { display:none !important; }

/* ============================================================
   MOBILE  -  optimiertes Vollbild-Layout
   ============================================================ */
@media (max-width: 640px) {
  html, body { font-size:14px; }

  #desktop { inset:0 0 44px 0; }
  .desktop-icons { display:none; }              /* mehr Platz auf kleinem Screen */

  /* Ticker-Fenster als Vollbild-App */
  #win-ticker {
    left:0 !important; top:0 !important;
    width:100% !important; height:100% !important;
    border:0; box-shadow:none;
  }
  #win-ticker::before { display:none; }
  #win-info {
    left:0 !important; top:0 !important;
    width:100% !important; height:100% !important;
  }

  .title-bar { height:32px; font-size:15px; }
  .title-bar-text { font-size:15px; }
  .tb-btn { width:26px; height:24px; font-size:14px; }

  .menu-bar { padding:3px 4px; }
  .menu-item { padding:6px 8px; font-size:14px; }

  .window-body { padding:8px; gap:8px; }

  /* Scoreboard groesser & klarer */
  .scoreboard { grid-template-columns:44px 1fr auto 1fr 44px; padding:12px 10px; gap:6px; }
  .sb-flag { width:40px; height:28px; }
  .sb-team { font-size:15px; letter-spacing:0; }
  .sb-score { font-size:38px; }

  .match-meta { font-size:13px; gap:8px; }
  .live-badge { padding:3px 8px; font-size:13px; }

  /* Spiele-Liste: mehr Hoehe + groessere Touch-Ziele */
  .matches-list { max-height:34vh; }
  .match-row { padding:10px 6px; font-size:15px; grid-template-columns:1fr auto 1fr 64px; }
  .match-row .mr-state { font-size:12px; }

  .events-list { min-height:26vh; font-size:14px; }
  .event { grid-template-columns:40px 24px 1fr; padding:6px 2px; }
  .event .ev-ico { font-size:16px; }

  /* Statuszeile: zaehler ausblenden, Platz sparen */
  .win-status { flex-wrap:wrap; }
  #status-count { display:none; }
  .status-cell { font-size:12px; padding:4px 6px; }

  /* Taskleiste groesser */
  #taskbar { height:44px; padding:3px 4px; }
  #start-btn { height:34px; font-size:15px; padding:0 12px 0 6px; }
  .start-logo { width:20px; height:20px; }
  .task-btn { height:34px; min-width:0; flex:1; font-size:13px; }
  .task-btn span:last-child { overflow:hidden; text-overflow:ellipsis; }
  .tray { height:34px; }
  .tray-clock { font-size:13px; }
  .taskbar-divider { height:34px; }

  #start-menu { bottom:44px; width:70%; max-width:260px; }
  .start-entry { padding:12px 10px; font-size:15px; }

  /* horizontales Scrollen komplett verhindern */
  .scoreboard, .match-row, .event { overflow-x:hidden; }
}

/* sehr schmale Geraete: Ligen-/Stage-Text kuerzen */
@media (max-width: 380px) {
  .sb-team { font-size:13px; }
  .sb-score { font-size:32px; }
  .match-stage { max-width:48%; }
}