/* ============================================
   VITA LATE - CSS (Legacy Compatible, No Grid/Flexbox)
   Target: PS Vita 960x544 / WebKit lama
   ============================================ */

/* === RESET & BASE === */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    width: 960px;
    height: 544px;
    overflow: hidden;
    background-color: #0d0d0d;
    color: #e8e0d0;
    font-family: 'Courier New', Courier, monospace;
}

/* === EFEK VISUAL AMBIENCE === */

/* Grain/Noise overlay - simulasi tekstur kertas buram */
#grain-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 960px;
    height: 544px;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.08'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 200px 200px;
    pointer-events: none;
    z-index: 10;
    opacity: 0.6;
}

/* Glow efek di bagian atas (lampu cafe) */
#glow-top {
    position: fixed;
    top: -60px;
    left: 200px;
    width: 560px;
    height: 120px;
    background-color: #c8a96e;
    border-radius: 50%;
    opacity: 0.07;
    pointer-events: none;
    z-index: 5;
    -webkit-animation: glow-flicker 4s ease-in-out infinite;
    animation: glow-flicker 4s ease-in-out infinite;
}

@-webkit-keyframes glow-flicker {
    0%   { opacity: 0.07; }
    20%  { opacity: 0.09; }
    40%  { opacity: 0.06; }
    60%  { opacity: 0.10; }
    80%  { opacity: 0.07; }
    100% { opacity: 0.08; }
}
@keyframes glow-flicker {
    0%   { opacity: 0.07; }
    20%  { opacity: 0.09; }
    40%  { opacity: 0.06; }
    60%  { opacity: 0.10; }
    80%  { opacity: 0.07; }
    100% { opacity: 0.08; }
}

/* Hujan / Rain drops */
#rain-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 960px;
    height: 544px;
    pointer-events: none;
    z-index: 4;
    overflow: hidden;
}

.rain-drop {
    position: absolute;
    top: -100px;
    width: 1px;
    height: 12px;
    background-color: #7ab8d4;
    border-radius: 0 0 2px 2px;
    opacity: 0.2;
    -webkit-animation: rain-fall linear infinite;
    animation: rain-fall linear infinite;
}

@-webkit-keyframes rain-fall {
    0%   { -webkit-transform: translateY(0px) skewX(-10deg); opacity: 0; }
    5%   { opacity: 0.25; }
    90%  { opacity: 0.2; }
    100% { -webkit-transform: translateY(700px) skewX(-10deg); opacity: 0; }
}
@keyframes rain-fall {
    0%   { transform: translateY(0px) skewX(-10deg); opacity: 0; }
    5%   { opacity: 0.25; }
    90%  { opacity: 0.2; }
    100% { transform: translateY(700px) skewX(-10deg); opacity: 0; }
}

/* === WRAPPER UTAMA === */
#wrapper {
    position: relative;
    width: 960px;
    height: 544px;
    overflow: hidden;
    z-index: 20;
    border: 1px solid #3a3328;
    background-color: #13110e;
    background-image:
        -webkit-linear-gradient(top, #1a1610 0%, #13110e 30%, #111009 100%);
    background-image:
        linear-gradient(to bottom, #1a1610 0%, #13110e 30%, #111009 100%);
}

/* === HEADER (tinggi: 95px) === */
#header {
    height: 95px;
    text-align: center;
    padding: 14px 20px 10px 20px;
    border-bottom: 1px solid #3a3020;
    background-color: #0f0d0a;
    background-image:
        -webkit-linear-gradient(top, #1c1810 0%, #0f0d0a 100%);
    background-image:
        linear-gradient(to bottom, #1c1810 0%, #0f0d0a 100%);
}

#title-block {
    font-size: 36px;
    font-weight: bold;
    letter-spacing: 10px;
    color: #f0d890;
    text-shadow: 0 0 20px #c8a020, 0 0 40px #8a6010;
    font-family: 'Courier New', Courier, monospace;
}

.title-deco {
    color: #8a7040;
    font-size: 24px;
    letter-spacing: 2px;
}

#subtitle {
    font-size: 11px;
    color: #7a6840;
    letter-spacing: 3px;
    margin-top: 6px;
    text-transform: uppercase;
}

/* === MAIN (tinggi: 370px) === */
#main {
    position: relative;
    height: 370px;
    overflow: hidden;
}

/* Panel Kiri - position absolute, hindari float + box-sizing issues di old WebKit PS Vita */
#left-panel {
    position: absolute;
    left: 0;
    top: 0;
    width: 340px;
    height: 370px;
    border-right: 1px solid #2a2318;
    overflow: hidden;
}

#left-panel-inner {
    padding: 24px 20px;
}

/* Divider vertikal */
#divider-v {
    display: none;
}

/* Panel Kanan - position absolute mulai dari 341px */
#right-panel {
    position: absolute;
    left: 341px;
    top: 0;
    width: 619px;
    height: 370px;
    overflow: hidden;
}

#right-panel-inner {
    padding: 20px 28px;
}

/* === PANEL KIRI: JAM === */
#clock-section {
    text-align: center;
    margin-bottom: 18px;
}

#clock-label {
    font-size: 10px;
    color: #5a4f38;
    letter-spacing: 2px;
    margin-bottom: 8px;
}

#clock {
    font-size: 56px;
    font-weight: bold;
    color: #f5e070;
    text-shadow: 0 0 15px #c0980a, 0 0 30px #8a6005;
    letter-spacing: 4px;
    font-family: 'Courier New', Courier, monospace;
    line-height: 1;
}

#date-display {
    font-size: 12px;
    color: #9a8858;
    letter-spacing: 1px;
    margin-top: 8px;
}

/* Divider horizontal di panel kiri */
#divider-h {
    border: none;
    border-top: 1px dashed #3a3020;
    margin: 16px 0;
}

/* Info section */
#info-section {
    text-align: left;
}

.info-label {
    font-size: 10px;
    color: #6a5f3a;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 4px;
}

#status-text, #ambience-text {
    font-size: 13px;
    color: #c8b878;
    padding-left: 8px;
}

/* === PANEL KIRI: COFFEE COUNTER === */
#divider-h2 {
    border: none;
    border-top: 1px dashed #3a3020;
    margin: 12px 0;
}

#coffee-section {
    text-align: center;
}

#counter-row {
    margin: 8px 0 4px 0;
    font-size: 15px;
    color: #f0d060;
    letter-spacing: 4px;
}

#btn-dec, #btn-inc {
    cursor: pointer;
    color: #9a7838;
    font-size: 13px;
    padding: 4px 6px;
    letter-spacing: 0;
}

#btn-dec:active, #btn-inc:active {
    color: #f0d060;
    background-color: #2a2010;
}

#coffee-count {
    font-size: 32px;
    font-weight: bold;
    color: #f5e070;
    text-shadow: 0 0 12px #c0980a;
    display: inline-block;
    min-width: 44px;
    text-align: center;
    vertical-align: middle;
    letter-spacing: 0;
}

#coffee-msg {
    font-size: 11px;
    color: #7a6848;
    letter-spacing: 1px;
    margin-top: 2px;
}

/* === PANEL KANAN: MENU INTERAKTIF === */
#board-header {
    font-size: 12px;
    color: #d4b860;
    letter-spacing: 2px;
    text-align: center;
    padding-bottom: 8px;
    border-bottom: 2px solid #3a3020;
    margin-bottom: 6px;
    text-shadow: 0 0 10px #a07820;
}

/* Kategori menu */
.menu-cat {
    font-size: 10px;
    color: #6a5838;
    letter-spacing: 2px;
    padding: 5px 0 3px 0;
    text-transform: uppercase;
}

/* Item menu - tappable */
.menu-item {
    position: relative;
    height: 34px;
    line-height: 34px;
    border-bottom: 1px dotted #2a2318;
    cursor: pointer;
    overflow: hidden;
    -webkit-tap-highlight-color: rgba(200, 160, 30, 0.15);
}

.menu-item:active {
    background-color: #221e0e;
}

.item-add {
    color: #7a6030;
    font-size: 12px;
    margin-right: 6px;
}

.menu-item:active .item-add {
    color: #f0d060;
}

.item-name {
    font-size: 14px;
    color: #e0d0a0;
}

.item-price {
    position: absolute;
    right: 0;
    top: 0;
    font-size: 12px;
    color: #8a7848;
    line-height: 34px;
}

/* Struk pesanan */
#order-section {
    border-top: 1px solid #3a3020;
    margin-top: 6px;
    padding-top: 6px;
}

#order-header {
    font-size: 10px;
    color: #6a5838;
    letter-spacing: 2px;
    margin-bottom: 4px;
    text-transform: uppercase;
}

#order-body {
    font-size: 13px;
    min-height: 20px;
    overflow: hidden;
}

#order-list {
    color: #c8b870;
}

#order-total {
    float: right;
    color: #f0d060;
    font-weight: bold;
    font-size: 14px;
}

#order-actions {
    margin-top: 4px;
    overflow: hidden;
}

#order-clear {
    font-size: 11px;
    color: #7a4a30;
    cursor: pointer;
    letter-spacing: 1px;
}

#order-clear:active {
    color: #c06030;
}

/* Flash animasi saat item ditambah */
@-webkit-keyframes item-flash {
    0%   { background-color: #3a2e10; }
    100% { background-color: transparent; }
}
@keyframes item-flash {
    0%   { background-color: #3a2e10; }
    100% { background-color: transparent; }
}

.menu-item.flashed {
    -webkit-animation: item-flash 0.4s ease;
    animation: item-flash 0.4s ease;
}

/* === FOOTER: TICKER (tinggi: 79px) === */
#footer {
    clear: both;
    height: 79px;
    border-top: 1px solid #3a3020;
    background-color: #0a0908;
    overflow: hidden;
    position: relative;
}

#ticker-bar {
    height: 79px;
    line-height: 79px;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
}

#ticker-prefix {
    position: absolute;
    left: 0;
    top: 0;
    height: 79px;
    line-height: 79px;
    padding: 0 12px;
    background-color: #1a1508;
    color: #8a7040;
    font-size: 18px;
    z-index: 2;
    border-right: 1px solid #3a2e18;
}

#ticker-wrapper {
    position: absolute;
    left: 60px;
    top: 0;
    right: 0;
    height: 79px;
    overflow: hidden;
}

#ticker-text {
    position: absolute;
    left: 960px;
    top: 0;
    height: 79px;
    line-height: 79px;
    white-space: nowrap;
    font-size: 15px;
    color: #c8b060;
    letter-spacing: 1px;
    -webkit-animation: ticker-scroll 30s linear infinite;
    animation: ticker-scroll 30s linear infinite;
}

@-webkit-keyframes ticker-scroll {
    0%   { left: 960px; }
    100% { left: -200%; }
}
@keyframes ticker-scroll {
    0%   { left: 960px; }
    100% { left: -200%; }
}

/* === INDICATOR KONEKSI === */
#connection-dot {
    position: fixed;
    bottom: 88px;
    right: 10px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: #4a4a4a;
    z-index: 30;
    -webkit-transition: background-color 0.5s;
    transition: background-color 0.5s;
}

#connection-dot.connected {
    background-color: #4a8a4a;
    box-shadow: 0 0 6px #2a6a2a;
}

#connection-dot.disconnected {
    background-color: #8a3a3a;
}