*, *::before, *::after { box-sizing: border-box; }
 
    body, html {
      margin: 0; padding: 0;
      background: #f4f4f4;
      font-family: 'Courier New', Courier, monospace;
      height: 100%;
      color: #000;
    }
 
    #stage {
      position: relative;
      width: 100%;
      height: 100dvh;
      overflow: hidden;
      touch-action: none;
      user-select: none;
      display: flex;
      justify-content: center;
      align-items: center;
    }
 

    #wrap {
      --ui-top: 100px;
      --ui-bottom: 70px;
      --avail: calc(100dvh - var(--ui-top) - var(--ui-bottom));
      width:  min(70vmin, var(--avail));
      height: min(70vmin, var(--avail));
      flex-shrink: 0;
    }
    #wrap svg { width: 100%; height: 100%; overflow: visible; }
    .dp { fill: #000; }
 
    #ui {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      padding: 20px clamp(16px, 4vw, 32px) 20px;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.9s ease;
    }
    #ui.visible {
      opacity: 1;
      pointer-events: all;
    }
 
    #top-row {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 12px;
    }
 
    #countdown { display: flex; flex-direction: column; gap: 3px; }
    #countdown-label {
      font-size: 9px;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: #666;
      white-space: nowrap;
    }
    #countdown-units { display: flex; align-items: flex-end; }
    .c-unit { display: flex; flex-direction: column; align-items: center; gap: 2px; }
    .c-num {
      font-size: clamp(18px, 5vw, 32px);
      font-weight: 700;
      letter-spacing: 1px;
      line-height: 1;
      min-width: 1.8ch;
      text-align: center;
    }
    .c-lab {
      font-size: clamp(7px, 1.5vw, 9px);
      letter-spacing: 2px;
      text-transform: uppercase;
      color: #666;
    }
    .c-sep {
      font-size: clamp(16px, 4.5vw, 26px);
      color: #bbb;
      padding: 0 2px 2px;
      line-height: 1;
    }
 
    #lang { display: flex; gap: 6px; flex-shrink: 0; }
    #lang span {
      font-family: 'Courier New', Courier, monospace;
      font-size: 9px;
      letter-spacing: 2px;
      text-transform: uppercase;
      cursor: pointer;
      padding: 4px 8px;
      border: 2px solid #000;
      background: transparent;
      color: #000;
      transition: background 0.15s, color 0.15s;
      white-space: nowrap;
    }
    #lang span.active { background: #000; color: #fff; }
 
    #buttons {
      display: flex;
      flex-direction: row;
      gap: 10px;
      /* border: 2px solid #000;
      box-shadow: 5px 5px 0 #000; */
    }
    .btn-h5 {
      font-family: 'Courier New', Courier, monospace;
      font-size: clamp(9px, 2.5vw, 11px);
      font-weight: bold;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: #000;
      background: #f4f4f4;
      padding: 12px clamp(14px, 3vw, 24px);
      cursor: pointer;
      text-decoration: none;
      display: block;
      transition: background 0.15s;
      white-space: nowrap;
      border: none;
      /* border-right: 2px solid #000; */
      text-align: center;
      border: 2px solid #000;
      box-shadow: 5px 5px 0 #000;
    }
    @media (max-width: 500px) {
      #wrap {
        --ui-top: 90px;
        --ui-bottom: 80px;
        --avail: calc(100dvh - var(--ui-top) - var(--ui-bottom));
        width:  min(85vw, var(--avail));
        height: min(85vw, var(--avail));
      }
      #ui { padding: 16px; }
      #countdown-label { font-size: 8px; letter-spacing: 2px; }
      #buttons {
        flex-direction: column;
        /* box-shadow: 4px 4px 0 #000; */
        width: clamp(200px, 75vw, 320px);
      }
      .btn-h5 {
        /* border-right: none; */
        /* border-bottom: 2px solid #000; */
        padding: 13px 20px;
        font-size: 10px;
      }
    }
 
    @media (max-height: 480px) and (orientation: landscape) {
      #wrap {
        --ui-top: 60px;
        --ui-bottom: 55px;
        --avail: calc(100dvh - var(--ui-top) - var(--ui-bottom));
        width:  min(55vmin, var(--avail));
        height: min(55vmin, var(--avail));
      }
      #ui { padding: 10px 16px; }
      .c-num { font-size: clamp(14px, 3.5vw, 22px); }
      .c-sep { font-size: clamp(12px, 3vw, 20px); }
      #buttons { box-shadow: 3px 3px 0 #000; }
      .btn-h5 { padding: 9px 16px; font-size: 9px; }
    }