* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    user-select: none;
    -webkit-user-select: none;
}

body {
    background-color: #050505;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    overflow: hidden;
    font-family: 'Courier New', monospace;
}

#global-payment-hub {
    width: 100%;
    max-width: 177.78vh;
    background: linear-gradient(90deg, #000, #151515, #000);
    border-bottom: 2px solid #70c7b7;
    color: #fff;
    padding: 8px 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 1rem;
    z-index: 999;
}
#global-payment-hub img { height: 24px; width: auto; }
#global-payment-hub strong { color: #00ffcc; text-shadow: 0 0 8px #00ffcc; }

#game-container {
    position: relative;
    width: 100vw;
    height: 56.25vw;
    max-height: calc(100vh - 45px);
    max-width: 177.78vh;
    background-color: #000;
    overflow: hidden;
    border: 3px solid #111;
}

/* HAUPTMENÜ IM FUSSEREICH */
#main-menu {
    position: absolute;
    width: 100%; height: 100%;
    background-image: url('startbild.png');
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 3% 2%;
    z-index: 20;
}
#title-area { text-align: center; background: rgba(0,0,0,0.7); padding: 12px 50px; border-radius: 8px; border: 2px solid rgba(0,255,204,0.4); }
#title-area h1 { color: #00ffcc; font-size: 3.5rem; letter-spacing: 8px; text-shadow: 0 0 15px #00ffcc; }
#demo-sub-title { color: #ff3333; font-weight: bold; font-size: 1.2rem; letter-spacing: 4px; margin-top: 5px; text-shadow: 0 0 8px #ff3333; }
#menu-buttons-row { display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 12px; width: 95%; background: rgba(0, 0, 0, 0.88); padding: 15px; border-radius: 10px; border: 2px solid #70c7b7; }
#story-lock-container { display: flex; gap: 5px; }
#story-pass-input { width: 65px; background: #000; border: 2px solid #ff3333; color: #fff; font-weight: bold; text-align: center; border-radius: 6px; }

.menu-btn { background-color: #050505; color: #00ffcc; border: 2px solid #00ffcc; padding: 10px 5px; font-size: 0.95rem; font-weight: bold; cursor: pointer; border-radius: 6px; }
.menu-btn:hover:not(:disabled) { background-color: #00ffcc; color: #000; box-shadow: 0 0 15px #00ffcc; }
.menu-btn:disabled { border-color: #333; color: #444; background: #111; }

/* TRANSPARENTE SETUP MASKE */
.game-setup-mask {
    text-align: center;
    width: 50%;
    max-width: 550px;
    background-color: rgba(0, 0, 0, 0.78);
    backdrop-filter: blur(4px);
    padding: 20px 25px;
    border-radius: 12px;
    border: 2px solid #00ffcc;
    box-shadow: 0 0 35px rgba(0, 255, 204, 0.4);
    margin: 1.2% auto 0 auto;
    z-index: 30;
}
.game-setup-mask h2 { color: #00ffcc; font-size: 1.6rem; margin-bottom: 4px; }
.pricing-info { color: #70c7b7; margin-bottom: 10px; font-size: 1rem; }
.mask-name-input { background:#000; border:1px solid #00ffcc; color:#fff; padding:6px; text-align:center; border-radius:5px; width:220px; font-weight:bold; }
.setup-row-box { display: flex; justify-content: center; align-items: center; gap: 15px; width: 100%; margin-top: 8px; }

.kryptris-menu-stack { display: flex; flex-direction: column; gap: 10px; width: 100%; margin-top: 10px; }
.stack-btn { width: 100% !important; padding: 10px !important; font-size: 1.05rem !important; }
.multiplayer-stack-box { border: 1px dashed rgba(255, 102, 0, 0.4); padding: 8px; border-radius: 6px; background: rgba(0,0,0,0.4); }
.stack-join-row { display: flex; gap: 10px; margin-top: 6px; width: 100%; }
.session-id-field { flex: 1; background: #000; color: #fff; border: 1px solid #ff6600; text-align: center; border-radius: 4px; padding: 6px; font-weight: bold; }
.mp-lobby-text { margin-top: 10px; color: #ff3333; font-size: 1.1rem; font-weight: bold; text-shadow: 1px 1px 2px #000; }

#highscore-scroll-area { max-height: 220px; overflow-y: auto; margin-top: 10px; border: 1px solid #555; }
#highscore-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; color: #fff; }
#highscore-table th, #highscore-table td { padding: 6px; text-align: center; border-bottom: 1px solid #222; }
#highscore-table th { background: #111; color: #ffff00; font-weight: bold; }

.local-wallet-ui { background: rgba(10,10,10,0.8); border: 1px solid #70c7b7; border-radius: 8px; padding: 10px; margin-bottom: 12px; width: 100%; }
.wallet-ui-split { display: flex; justify-content: center; align-items: center; gap: 15px; }
.qr-svg-holder { background:#fff; padding:4px; border-radius:4px; width:75px; height:75px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.wallet-status-text { font-size:0.85rem; font-weight:bold; display:block; }
.wallet-software-text { font-size:0.8rem; color: #ff9900; }
.wallet-address-display { font-family: monospace; font-size: 0.65rem; color: #00ffcc; margin-top: 1px; word-break: break-all; }

.ingame-cancel-btn { position: absolute; top: 15px; left: 15px; background: #ff3333; color: #fff; border: 2px solid #fff; padding: 6px 14px; font-weight: bold; border-radius: 4px; cursor: pointer; z-index: 999; }

#pong-screen, #kryptris-screen { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url('startbild.png'); background-size: cover; background-position: center; z-index: 25; }
#pong-back-btn { position: absolute; top: 15px; right: 15px; background: #000; color: #fff; border: 1px solid #fff; padding: 5px 12px; cursor: pointer; border-radius: 4px; z-index: 30; }

#pong-game-area { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(5, 5, 5, 0.75); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 35; }
#pong-field { position: relative; width: 800px; height: 380px; background-color: rgba(10, 10, 10, 0.85); border: 4px solid #00ffcc; box-shadow: 0 0 30px rgba(0, 255, 204, 0.5); overflow: hidden; }

/* BILDCHIRMFÜLLENDER KRYPTRIS GAMEPLAY LAYER */
#kryptris-game-area { 
    position: absolute; 
    top: 0; left: 0; width: 100%; height: 100%; 
    background: rgba(4, 4, 4, 0.75); 
    display: flex; justify-content: center; align-items: center; 
    z-index: 35; padding: 5px; 
}

/* FIX INTERFACES: OBERKANTE FLUSH MIT SCOREBOX ALIGNMENT */
#kryptris-fullscreen-layout { 
    display: flex; 
    gap: 40px; 
    align-items: flex-start; /* ÄNDERUNG: Richtet alle Elemente exakt an der Oberkante aus! */
    justify-content: center; 
    width: 95%; height: 85%;
    margin-top: 50px; /* Bringt das Gesamtsystem auf eine harmonische, tiefere Position */
}

.kryptris-player-zone { display: flex; flex-direction: column; align-items: center; }
.kryptris-player-zone h3 { color: #fff; margin-bottom: 6px; font-size: 1.1rem; text-shadow: 0 0 6px #00ffcc; }

/* 20 % SKALIERUNGS UPGRADE AM NEON RAHMEN */
.kryptris-matrix-border {
    background: transparent;
    border: 4px solid #00ffcc; 
    box-shadow: 0 0 30px #00ffcc;
    padding: 0; 
    border-radius: 4px;
    display: flex;
    align-items: center;
}

/* QUADRATE UM EXAKT 20% VERGRÖSSERT (VON 320x640px AUF 384x768px) */
.kryptris-grid-canvas {
    width: 384px;  /* 20% größer für maximale Griffigkeit */
    height: 768px; /* Sync im perfekten 2:1 Retro-Format */
    display: grid;
    grid-template-rows: repeat(20, 1fr);
    grid-template-columns: repeat(10, 1fr);
    gap: 1px;
    background: rgba(1, 1, 1, 0.82); 
}
.k-cell { background-color: rgba(12, 12, 12, 0.65); border-radius: 1px; }

/* BLOCK CHASSIS MATRIX CONFIG */
.block-I { background-color: #00ffff; box-shadow: inset 0 0 8px #fff; }
.block-O { background-color: #ffff00; box-shadow: inset 0 0 8px #fff; }
.block-T { background-color: #aa00ff; box-shadow: inset 0 0 8px #fff; }
.block-L { background-color: #ffaa00; box-shadow: inset 0 0 8px #fff; }
.block-J { background-color: #0000ff; box-shadow: inset 0 0 8px #fff; }
.block-S { background-color: #00ff00; box-shadow: inset 0 0 8px #fff; }
.block-Z { background-color: #ff0000; box-shadow: inset 0 0 8px #fff; }

/* HUD PANEL */
#kryptris-hud-panel { display: flex; flex-direction: column; gap: 15px; width: 220px; }
.hud-block { background: rgba(10, 10, 10, 0.92); border: 2px solid #00ffcc; padding: 12px; text-align: center; border-radius: 6px; box-shadow: 0 0 10px rgba(0,255,204,0.2); }
.hud-title { color: #888; font-size: 0.85rem; font-weight: bold; margin-bottom: 4px; }
.hud-value { color: #00ffcc; font-size: 1.6rem; font-weight: bold; font-family: monospace; text-shadow: 0 0 5px #00ffcc; }

#kryptris-next-preview { width: 80px; height: 80px; margin: 5px auto 0 auto; display: grid; grid-template-rows: repeat(4, 1fr); grid-template-columns: repeat(4, 1fr); gap: 1px; background: #000; border: 1px solid #333; }
.casia-ingame-window { width: 100%; background: #0c0c0c; border: 2px solid #ff9900; border-radius: 6px; overflow: hidden; }
.casia-window-header { background: #ff9900; color: #000; padding: 4px 10px; font-weight: bold; font-size: 0.7rem; }
.casia-window-body { padding: 8px; background: #000; font-family: monospace; font-size: 0.75rem; }

.hidden { display: none !important; }