/*
 * RTTY Online – Darstellung und Bedienoberfläche
 *
 * Zentrale Farben stehen in :root. Danach folgen Gehäuse, Anzeigen,
 * Bedienelemente sowie die responsiven Anpassungen für Tablet/Smartphone.
 */
:root {
    font-family:"Courier New",Courier,monospace;
    
    --phosphor:#0ee000;
    --case:#34342e;
    --case2:#22231f;
    --edge:#777566;
    --screen:#000;
    --label:#e7e5d1;
    --muted:#a7a797;
    --cream:#d8d5b6;
    --blue:#6f9db0;
    --red:#b95043
}

* {
    box-sizing:border-box
}

body {
    margin:0;
    background:#111;
    color:var(--label);
    font-family:Arial,Helvetica,sans-serif
}



.machine {
    max-width:1240px;
    margin:18px auto;
    background:linear-gradient(145deg,#48483f,#272823 42%,#3a3a33);
    border:2px solid #777568;
    box-shadow:0 12px 45px #000,inset 0 0 0 2px #191a17;
    padding:18px;
    border-radius:5px
}

header {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:4px 8px 16px;
    border-bottom:1px solid #777568
}

h1 {
    font-family:Arial Black,Arial,sans-serif;
    margin:0;
    font-size:clamp(27px,4vw,44px);
    letter-spacing:.08em;
    color:#f1efdc;
    text-shadow:1px 2px #111
}

header p {
    margin:4px 0 0;
    font-size:12px;
    letter-spacing:.13em;
    color:#c9c7b4
}

.lampbox {
    display:flex;
    align-items:center;
    gap:9px;
    font-size:12px;
    font-weight:bold;
    letter-spacing:.08em
}

.lampbox i {
    width:13px;
    height:13px;
    border-radius:50%;
    background:#e44739;
    box-shadow:0 0 8px #ff3828,0 0 2px 2px #171713 inset
}

main {
    padding:15px 0 0
}

.panel {
    position:relative;
    background:linear-gradient(#3b3b34,#292a25);
    border:1px solid #777568;
    padding:30px 14px 14px;
    margin-bottom:13px;
    box-shadow:inset 0 0 18px #0005,0 2px 5px #0008
}

.panel a:link, a:visited {color:#F7F207}

.panel-title {
    position:absolute;
    top:8px;
    left:14px;
    font:bold 11px Arial,Helvetica,sans-serif;
    letter-spacing:.12em;
    color:#f1efdc
}

.crt {
    background:#171813;
    border-color:#68685d
}

.crt canvas,.crt textarea {
    box-shadow:inset 0 0 22px #0ee00012,0 0 0 3px #0b0b09
}

canvas {
    display:block;
    width:100%;
    background:#000;
    border:1px solid #090a08;
    touch-action:none
}

.wf-scale {
    display:flex;
    justify-content:space-between;
    color:#9b9b89;
    font:10px Arial,sans-serif;
    margin-top:4px
}

.legend {
    display:grid;
    grid-template-columns:1fr auto 1fr;
    gap:10px;
    color:var(--phosphor);
    font:12px "Courier New",monospace;
    margin-top:4px;
    text-shadow:0 0 5px #0ee00099
}

.legend span:last-child {
    text-align:right
}

.manual-hint {
    text-align:center;
    color:#aaa994!important;
    text-shadow:none!important;
    font:10px Arial,sans-serif
}

.grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:10px
}

label {
    display:flex;
    flex-direction:column;
    gap:5px;
    color:#e2e0ca;
    font:bold 11px Arial,Helvetica,sans-serif;
    letter-spacing:.04em
}

select,input[type=number] {
    width:100%;
    padding:8px;
    background:#11120f;
    color:var(--phosphor);
    border:1px solid #777568;
    font:15px "Courier New",monospace
}

select option:checked,
select option:hover,
select option:focus {
    background: #333 !important;
    background-color: #333 !important;
    color: #0ee000 !important;
}


.switchrow {
    display:flex;
    gap:8px;
    margin-top:12px;
    flex-wrap:wrap
}

.switchrow label {
    display:flex;
    flex-direction:row;
    align-items:center;
    gap:6px;
    background:#1b1c18;
    border:1px solid #6c6b60;
    padding:7px 10px
}

.switchrow input {
    accent-color:var(--phosphor)
}

.buttons {
    display:flex;
    flex-wrap:wrap;
    gap:7px;
    margin-top:12px
}

.key,.filebtn {
    font:bold 11px Arial,Helvetica,sans-serif;
    letter-spacing:.05em;
    color:#111;
    border:0;
    border-bottom:4px solid #171713;
    border-right:2px solid #171713;
    border-radius:2px;
    padding:10px 14px;
    cursor:pointer;
    box-shadow:inset 0 1px #fff8;
    text-align:center
}

.key:active,.filebtn:active {
    transform:translateY(2px);
    border-bottom-width:2px
}

.cream {
    background:var(--cream)
}

.blue {
    background:var(--blue)
}

.red {
    background:var(--red);
    color:#fff
}

.filebtn {
    display:inline-block
}

.filebtn input {
    display:none
}

.meters {
    display:grid;
    grid-template-columns:1fr auto;
    gap:20px;
    align-items:end;
    margin-top:13px;
    font:12px "Courier New",monospace;
    color:var(--phosphor)
}

.meters div:first-child {
    display:flex;
    flex-direction:column;
    gap:4px
}

meter {
    width:100%;
    height:16px;
    accent-color:var(--phosphor)
}

#output,#testText {
    width:100%;
    resize:vertical;
    background:#000;
    color:var(--phosphor);
    border:1px solid #090a08;
    padding:10px;
    font-family:"Courier New",Courier,monospace;
    line-height:1.4;
    text-shadow:0 0 5px #0ee000aa
}

#output {
    min-height:185px;
    font-size:17px
}

#testText {
    min-height:72px
}

.hint,footer {
    color:#aaa997;
    font-size:12px
}

footer {
    text-align:center;
    padding:4px 0 0;
    letter-spacing:.08em
}

footer a:link, a:visited {color:var(--muted);}

dialog {
    width:min(620px,calc(100% - 24px));
    background:#34342e;
    color:#eee;
    border:2px solid #777568;
    padding:38px 18px 18px;
    box-shadow:0 0 40px #000
}

dialog::backdrop {
    background:#000c
}

dialog p {
    color:#c3c1ae
}

dialog .panel-title {
    top:14px
}

dialog select {
    margin-top:3px
}

@media(max-width:750px) {
    body {
        background:#24241f
    }

    .machine {
        margin:0;
        border-radius:0;
        padding:10px
    }

    .grid {
        grid-template-columns:1fr 1fr
    }

    .meters {
        grid-template-columns:1fr
    }

    .panel {
        padding:30px 10px 10px
    }

    .manual-hint {
        display:none
    }

}

@media(max-width:430px) {
    .grid {
        grid-template-columns:1fr
    }

    header {
        align-items:flex-start;
        gap:12px
    }

    .buttons>* {
        flex:1 1 44%
    }

    .legend {
        grid-template-columns:1fr 1fr
    }

}

.save-row {
    display:flex;
    align-items:center;
    gap:14px;
    flex-wrap:wrap;
    margin:14px 0 4px
}

.save-option {
    display:flex!important;
    flex-direction:row!important;
    align-items:center;
    gap:9px;
    color:#0ee000!important;
    font-family:"Courier New",Courier,monospace;
    font-weight:bold;
    letter-spacing:.05em
}

.save-option input {
    width:19px;
    height:19px;
    accent-color:#0ee000
}

.key:disabled {
    opacity:.38;
    cursor:not-allowed;
    filter:grayscale(.7)
}

.center-control {
    align-items:stretch
}

.mini-scope-title {
    width: 150px;
    max-width: 100%;
    margin: 10px 0 4px auto;

    color: #e2e0ca;
    font: bold 10px Arial, Helvetica, sans-serif;
    letter-spacing: .06em;
    text-align: center;
}

.mini-scope {
    display: block;
    width: 150px !important;
    height: 150px !important;
    max-width: 100%;
    margin-left: auto;

    border: 2px solid #090a08;
    box-shadow:
        inset 0 0 18px #0ee00012,
        0 0 0 2px #20211c;
}

.mini-scope-hint {
    width: 150px;
    max-width: 100%;
    margin: 4px 0 0 auto;

    font: 9px/1.25 Arial, Helvetica, sans-serif;
    color: #aaa997;
    letter-spacing: 0;
    text-align: center;
}

.center-control canvas {
    background:#000
}

@media(max-width:750px) {
    .mini-scope,.mini-scope-hint {
        align-self:flex-start
    }

}

/* v1.5: Funktionsblock und klassische XY-Abstimmanzeige */
.receiver-lower {
    display:grid;
    grid-template-columns:minmax(0,1fr) 170px;
    gap:22px;
    align-items:start;
    margin-top:12px
}

.function-block {
    min-width:0
}

.function-block .switchrow {
    margin-top:0
}

.scope-block {
    width:170px;
    justify-self:end;
    display:flex;
    flex-direction:column;
    align-items:center
}

.scope-block .mini-scope-title {
    width:150px;
    margin:0 0 5px
}

.scope-block .mini-scope-hint {
    align-self:center
}

.mini-scope {
    border:1px solid #666658;
    background:#000;
    background-image:linear-gradient(#0ee00018 1px,transparent 1px),linear-gradient(90deg,#0ee00018 1px,transparent 1px);
    background-size:25% 25%;
    border-radius:3px;
    box-shadow:inset 0 0 22px #0ee00018,0 0 0 3px #20211c
}

@media(max-width:750px) {
    .receiver-lower {
        grid-template-columns:1fr 160px;
        gap:12px
    }

    .scope-block {
        width:160px
    }

    .scope-block .mini-scope-title,.scope-block .mini-scope-hint {
        width:150px
    }

}

@media(max-width:560px) {
    .receiver-lower {
        grid-template-columns:1fr
    }

    .scope-block {
        justify-self:start;
        width:150px;
        margin-top:6px
    }

}

/* v1.6: Mitschriftstatus */
.file-status {
    align-self:center;
    color:var(--phosphor);
    font:11px "Courier New",monospace;
    max-width:260px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
}

/* v1.8: Anleitung */
.guide {
    font-family:Arial,Helvetica,sans-serif;
    color:#d8d7c5;
    line-height:1.55
}

.guide h2 {
    margin:2px 0 10px;
    color:#f1efdc;
    font-size:18px
}

.guide p {
    margin:8px 0
}

.guide ol {
    margin:10px 0 0;
    padding-left:24px
}

.guide li {
    margin:0 0 10px
}

.guide strong,.guide b {
    color:#F7F207
}

.guide-note {
    border-left:3px solid red;
    padding:8px 10px;
    background:#11120f
}