/* =====================================
   Page
===================================== */

.page {

  width: min(100%, var(--content-width));

  margin: 0 auto;

  padding:
    var(--space-8)
    var(--space-4)
    var(--space-12);

}



/* =====================================
   Header
===================================== */

.page-header {

  margin-bottom: var(--space-8);

}


.page-header h1 {

  margin:
    0
    0
    var(--space-4);

  font-size: var(--font-size-2xl);

}


.page-header p {

  margin: 0;

}



/* =====================================
   Setting
===================================== */

.setting-card {

  display: flex;

  flex-direction: column;

  gap: var(--space-5);

  padding: var(--space-6);

  margin-bottom: var(--space-8);

}


.setting-card h2 {

  margin: 0;

  font-size: var(--font-size-lg);

}


.setting-row {

  display: flex;

  align-items: center;

  gap: var(--space-4);

}


.setting-row label {

  min-width: 90px;

}


.setting-row input {

  width: 140px;

}


.setting-note {

  margin: 0;

  color: var(--text-secondary);

  font-size: var(--font-size-sm);

}


.setting-card .button {

  align-self: center;

  min-width: 220px;

}



/* =====================================
   Timer
===================================== */

.timer-screen {

  position: relative;

  display: none;

  margin-bottom: var(--space-8);

}


.timer-screen.active {

  display: block;

}



/* =====================================
   Canvas
===================================== */

#canvas {

  display: block;

  width: 100%;

  height: 70dvh;

  background: var(--bg-primary);

  border: 1px solid var(--border-color);

  border-radius: var(--radius-lg);

}



/* =====================================
   Time Display
===================================== */

.time-display {

  position: absolute;

  top: var(--space-4);

  right: var(--space-4);

  z-index: 10;

  padding:
    var(--space-2)
    var(--space-3);

  border-radius: var(--radius-full);

  background: var(--bg-primary);
  opacity: 0.85;

  color: var(--text-primary);

  backdrop-filter: blur(8px);

  font-size: var(--font-size-sm);

  font-weight: 600;

  pointer-events: none;

}


.dark .time-display {

  background: rgb(32 33 36 / 0.75);

}


/* =====================================
   Finish Overlay
===================================== */

.finish-overlay {

  position: absolute;

  inset: 0;

  display: none;

  justify-content: center;

  align-items: center;

  z-index: 20;

  border-radius: var(--radius-lg);

}


.finish-overlay.active {

  display: flex;

}


.finish-message {

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: var(--space-6);

  padding: var(--space-8);

  border-radius: var(--radius-lg);

  background: var(--bg-primary);
  opacity: 0.85;

  
  color: var(--text-primary);

  backdrop-filter: blur(8px);

  text-align: center;

}


.dark .finish-message {

  background:
    rgb(32 33 36 / 0.7);

}


.finish-message h2 {

  margin: 0;

  font-size:
    var(--font-size-2xl);

}


/* =====================================
   Utility
===================================== */

.hidden {

  display: none;

}



/* =====================================
   Information
===================================== */

.information {

  padding: var(--space-6);

}


.information h2 {

  margin:
    0
    0
    var(--space-4);

  font-size: var(--font-size-lg);

}


.information ul {

  margin: 0;

  padding-left: 1.25rem;

}


.information li {

  margin-bottom: var(--space-2);

  color: var(--text-secondary);

}


.information li:last-child {

  margin-bottom: 0;

}



/* =====================================
   Responsive
===================================== */

@media (max-width:768px){

  .page{

    padding:
      var(--space-6)
      var(--space-4)
      var(--space-8);

  }


  .setting-row{

    flex-direction: column;

    align-items: stretch;

  }


  .setting-row input{

    width:100%;

  }


  .setting-card .button{

    width:100%;

    min-width:auto;

  }


  #canvas{

    height:60dvh;

    position:relative;

    z-index:1;

  }


  .finish-message{

    min-height:60dvh;

  }


  .time-display{

    top:var(--space-3);

    right:var(--space-3);

    font-size:var(--font-size-xs);

  }

}