html, body { margin: 0; height: 100%; overflow: hidden; background: #9fc3e0; font-family: "Noto Sans", "DejaVu Sans", sans-serif; }
canvas { display: block; width: 100%; height: 100%; }
.boks { position: absolute; background: rgba(18, 32, 28, 0.82); color: #f4f1e8; border-radius: 10px; padding: 14px 18px; box-shadow: 0 4px 18px rgba(0,0,0,.35); }
#panel { top: 16px; left: 16px; width: 330px; }
#panel.skjult table, #panel.skjult .under, #panel.skjult .knapper { display: none; }
h1 { font-size: 20px; margin: 0 0 2px; }
.under { margin: 0 0 10px; font-size: 13px; color: #cfe3c5; }
.taster { border-collapse: collapse; font-size: 15px; width: 100%; }
.taster td { padding: 3px 4px; vertical-align: middle; }
.taster td:first-child { white-space: nowrap; width: 46%; }
kbd { display: inline-block; min-width: 18px; padding: 1px 6px; margin-right: 3px; border-radius: 4px; background: #f4f1e8; color: #1b2b25; font-family: inherit; font-size: 13px; font-weight: bold; text-align: center; }
.knapper { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
button { font: inherit; font-size: 15px; font-weight: bold; padding: 9px 12px; border-radius: 7px; border: none; cursor: pointer; background: #e9c46a; color: #1b2b25; }
button:hover { background: #f4d98b; }
#knappNull { background: #cfe3c5; }
button.liten { margin-top: 10px; font-size: 12px; padding: 4px 8px; background: transparent; color: #cfe3c5; border: 1px solid #cfe3c5; }
#status { top: 16px; right: 16px; min-width: 210px; font-size: 15px; }
#modus { font-weight: bold; font-size: 17px; margin-bottom: 4px; }
#turlinje { margin-top: 8px; height: 6px; background: rgba(255,255,255,.2); border-radius: 3px; overflow: hidden; }
#turfremdrift { height: 100%; width: 0; background: #e9c46a; }
#kreditt { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); font-size: 12px; color: #fff; background: rgba(0,0,0,.45); padding: 4px 10px; border-radius: 6px; white-space: nowrap; }
#etiketter { position: absolute; inset: 0; pointer-events: none; }
.etikett { position: absolute; transform: translate(-50%, -100%); background: rgba(255,255,255,.9); color: #1b2b25; font-weight: bold; font-size: 15px; padding: 3px 9px; border-radius: 12px; white-space: nowrap; border: 2px solid #1b2b25; }
.etikett::after { content: ""; position: absolute; left: 50%; bottom: -8px; margin-left: -1px; width: 2px; height: 7px; background: #1b2b25; }