* {
    box-sizing: border-box;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background: 
        url("use_image/noise.svg"),
        linear-gradient(
       -45deg,
        #eee2b1,
        #efede8,
        rgb(112, 39, 3)
        /*#f3b6d4 #ddf0f5 #f5e4c5 #cae2ea 컬러 아카이브 // 하늘색 #bcdde8 잠깐 보관*/);

        background-size:
        200px 200px,
        400% 400%;

        background-repeat:
        repeat,
        no-repeat;

        animation: colorChange 30s ease infinite;
        /*ease 원래 6초엿음*/
        pointer-events: none;

    
}

.sphereField{
    animation: moveShape 35s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    pointer-events: none;

}

.sphere{

    width: 600px;
    aspect-ratio: 1/1;
    background: linear-gradient(
       
        rgba(251, 253, 253, 0.3) 0%,
        rgba(239, 171, 142, 0.4) 60%,
        rgba(235, 229, 207, 0.4) 100%

    );

    border-radius: 40% 70% 70% 30% / 30% 30% 70% 70%;
    filter: blur(25px);
    animation: changeShape 6s linear infinite, rotateShape 12s linear infinite alternate;
}

@keyframes rotateShape {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(36deg);
    }
}

@keyframes moveShape {

    0%,
    100% {
        transform: translate(20%,0);
    }
    25% {
        transform: translate(40%, 15vh);
    }
    50% {
        transform: translate(70%, 40vh);
    }
    75% {
        transform: translate(15%, 55vh);
    }

}

@keyframes changeShape {

    0%,
    100% {
        border-radius: 40% 70% 70% 30% / 30% 30% 70% 70%;
    }
    20% {
        border-radius: 20% 50% 40% 50% / 40% 36% 20% 50%;
    }
    40% {
        border-radius: 25% 50% 50% 30% / 65% 50% 35% 25%;
    }
    60% {
        border-radius: 30% 45% 40% 50% / 25% 30% 75% 60%;
    }
    80% {
        border-radius: 30% 40% 40% 60% / 40% 40% 55% 47%;
    }

}


@keyframes colorChange{
    0%{
        background-position: 0 0, 0% 50%;
    }
    50%{
        background-position: 0 0, 100% 50%;
    }
    100%{
        background-position: 0 0, 0% 50%;
    }
}

body {
    position: relative;
    isolation: isolate;
    margin: 0;
    padding-left: 40px;
    padding-right: 40px;
    box-sizing: border-box;
}

.scrollStart {
    font-size: 20px;
    font-family: 'Courier New', Courier, monospace;
    font-style: oblique;
    height: 100vh;
    display: flex;
    justify-content: center;
    margin-bottom: 100px;
    position: relative;
    overflow: hidden;
}

.door img {
    height: 100vh;
    width: auto;
    position: absolute;
    right: 0;
}

.doortext {
    position: absolute;
    padding: 40px;
}

.startButton {
    width: 70px;
    height: 35px;
    font-size: 20px;
    border: 1.5px dotted ;
    border-color: rgb(119, 100, 68);
    font-family: 'Courier New', Courier, monospace;
    cursor: pointer;
    color: black;
}

/*팝업들*/

.popupArea {
    position: fixed;
    inset: 0;
    z-index: 15;
    pointer-events: none;
}

.randomPopup {

    position: absolute;
    pointer-events: auto;

    width: min(80vw, 400px);
    max-height: calc(100vh - 40px);
    max-height: calc(100dvh - 40px);
    overflow-y: auto;
    padding: 30px 20px 20px;

    border: 1.5px dotted #b1cff7;
    background: rgba(248, 240, 226, 0.95);

    box-sizing: border-box;

    font-family: "Courier New", Courier, monospace;
    font-size: 14px;
}

.popupContent {
    display: block;
    white-space: pre-line;
    line-height: 1.4;
}

.popupChoices {
    margin-top: 10px;
}

.popupClose {
    position: absolute;
    top: 5px;
    right: 5px;

    border: 1px;
    background: transparent;
    cursor: pointer;

    font-family: inherit;
}

.popupChoices button {
    border: 1.5px dotted #b1cff7;
    background: rgba(240, 239, 237, 0.95);
    cursor: pointer;
    font-family: inherit;
    margin-right: 2px;
    margin-left: 2px;
}

/*이벤트 템플릿*/

.eventTemplate {
  font-family: 'Courier New', Courier, monospace;
}

.letterTemplate {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 230px;
    box-sizing: border-box;
    position: relative;
    width: 100%;
    max-width: 600px;
    display : flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    
    
    font-family : 'Courier New', Courier, monospace; 
    cursor : pointer;
    
}



@keyframes Glow {
    from {
        filter: drop-shadow(0px 0px 0px rgb(83, 196, 248));
        -webkit-filter: drop-shadow(0 0 0 rgb(83, 196, 248));
    }
    to {
        filter: drop-shadow(0px 0px 20px rgb(83, 196, 248));
        -webkit-filter: drop-shadow(0 0 20px rgb(83, 196, 248));
    }
}

.letterGuide {
    text-align: center;
    font-size: 14px;
}

.clipGlow {
    position: absolute;
    top: 10px;
    left: 0;
    z-index: 2;
    
    width: 100%;
    /*filter: drop-shadow(0 0 0 white);
    -webkit-filter: drop-shadow(0 0 0 white);
    animation: Glow 2s ease-in infinite alternate; */

}
.clipImage {
    /*clip-path: polygon(45% 34%, 46% 34%, 50% 85%, 48% 86%);*/
    
    clip-path: polygon(45% 35%, 46% 35%, 50% 85%, 48% 85%);
    
    padding: 2px;
    display: block;
    width: 100%;
    height: auto;
    

    
}



.lettersImage {
  
    z-index: 1;
    display: block;
    position: relative;
    top: 10px;
    border: 1.5px dotted;
    border-color: rgb(167, 134, 87);
    width: 100%;
    height: auto;
    animation: blinkClip 1.5s ease-in-out infinite alternate; 
   
    
}

@keyframes blinkClip {
    from {
        filter: brightness(0.5);
    }
    to {
        filter: brightness(1);
    }
}



.letterPaper {
    width: 100%;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    border: 1px dotted;
    border-color: rgb(167, 134, 87);
    font-family : 'Courier New', Courier, monospace; 
    cursor : pointer;
    display : none;
    position: relative;
}

.letterPaper img {
    max-width: 100%;
    width: 100%;
    height: auto;
}

.letterButton {
    margin-left: 10px;
    width: auto;
    height: 34px;
    background: #c0d5f2;
    color: #ffffff;
    font-family: 'Courier New', monospace;
    font-size: 14px;
    font-weight: 600;
    border-radius: 0px;
    border-width: 1px;
    border-color: #b1cff7;
    border-style: solid;
    padding: 10px 22px;
    transition: all 0.3s ease;
    cursor: pointer;
    display: inline-flex;
    user-select: auto;
    position: relative;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.letterButton:hover {
  transform: none;
  background: #d0dce2;
  color: #ffffff;
}


/* letter box 편지 내용*/
.writtenLetter {
    position: absolute;
    inset: 0;
    box-sizing: border-box;
    margin: 0;
    font-family : 'Courier New', Courier, monospace;
    padding-top : 21%;
    padding-left: 15%;
    padding-right: 1%;
    font-size: 20px;
    align-self: flex-start;
    width: 600px;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.6;

}

.wordsField {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.5;

    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;

    /* z-index 는 필요 시 넣기 */
}

.scatteredWord {
    position: absolute;
    white-space: nowrap;

    font-family: 'Courier New', Courier, monospace;
    font-size: 16px;
}

.debris {
    position: fixed;
    inset: 0;
    z-index: 5;
    overflow: hidden;
    pointer-events: none;
}

.debrisParticle {
    position: absolute;
    bottom: -50px; /*화면 아래쪽 바깥에서부터 시작*/

    width: 30px;
    height: auto;

    pointer-events: auto;
    cursor: pointer;

    animation-name: debrisFloat;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    z-index: 10;

}


@font-face {
    font-family: punkbabe;
    src: url("fonts/PUNKBABE.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;

}

@keyframes debrisFloat {
    from {
        transform: translateY(0) rotate(0deg);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    to {
        transform: translateY(-120vh) rotate(180deg);
        opacity: 0;
    }
}


/* CSS Variables - input */
:root {
  --input-width: 360px;
  --input-font-size: 14px;
  --input-pad-x: 12px;
  --input-pad-y: 8px;
  --input-radius: 0px;
  --input-bg: #ffffff;
  --input-color: #111827;
  --input-placeholder: #c0d5f2;
  --input-border: 1.5px dotted #c0d5f2;
  --input-focus-color: #b1cff7;
  --input-focus-ring: 2px;
  --input-shadow: 0px 0px 9px 3px rgba(191,219,254,0.03);
}

/* Styles */
.input-wrapper {
  position: absolute;
  
  top: 87%;
  width: var(--input-width);
  display: flex;
  flex-direction: row;
  align-items: center;
}

.custom-input {
  width: 100%;
  font-family: inherit;
  font-size: var(--input-font-size);
  padding: var(--input-pad-y) var(--input-pad-x);
  border-radius: var(--input-radius);
  background: var(--input-bg);
  color: var(--input-color);
  border: var(--input-border);
  box-shadow: var(--input-shadow);
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.custom-input::placeholder {
  color: var(--input-placeholder);
}

.custom-input:focus {
  border-color: var(--input-focus-color);
  box-shadow: 0px 0px 9px 3px rgba(191,219,254,0.03), 0 0 0 2px rgba(177,207,247,0.35);
}

/*코인 누르기*/

.coinImage {
  
  display: none;
  position: fixed;
  top: 5%;
  right: 20px;
  z-index: 2;

  width: 75px;
  height: 75px;
  background-image: url("use_image/coin_sheet.png");
  background-size: 300px 75px;
  background-position: 0 0;
  background-repeat: no-repeat;

  animation: play 2.7s steps(4) infinite;

  cursor: pointer;
} 

.coinImage.isVisible {
    display: block;
}
@keyframes play {
  100% {
    background-position: -300px;
  }
}

/*끝나기 버튼*/

.owariButton {
    position: fixed;
    top: 5%;
    left: 30px;
    z-index: 10;

    width: auto;
    height: 34px;

    background: rgba(192, 213, 242, 0.5);
    color: #ffffff;

    font-family: "Courier New", monospace;
    font-size: 14px;
    font-weight: 600;

    border-radius: 0;
    border-width: 1.5px;
    border-color: #b1cff7;
    border-style: dotted;

    padding: 10px 22px;
    transition: all 0.3s ease;
    cursor: pointer;

    display: inline-flex;
    user-select: auto;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.owariButton:hover {
    transform: none;
    background: #d0dce2;
    color: #ffffff;
}

.owariModal {
    position: fixed;
    inset: 0;
    z-index: 20;

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(0, 0, 0, 0.5);
}

.owariModal[hidden] {
    display: none;
}

.owariModalContent {
    width: min(90vw, 400px);
    padding: 30px;

    border: 1.5px dotted #b1cff7;
    background: rgba(248, 240, 226, 0.95);

    font-family: "Courier New", Courier, monospace;
    font-size: 14px;
    text-align: center;
}

.owariModalButtons {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
}

.owariModalButtons button {
    height: 34px;
    padding: 10px 22px;

    border: 1.5px dotted #b1cff7;
    border-radius: 0;

    background: #c0d5f2;
    color: white;

    font-family: "Courier New", Courier, monospace;
    font-size: 14px;
    font-weight: 600;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;
}

.owariModalButtons button:hover {
    background: #d0dce2;
}


/*담배*/

.tabakoImage {
  position: fixed;
  width: 80px;
  top: 10%;
  right: 3%;
  display: none;
  flex-direction: column;

  cursor: pointer;

  
}

.tabakoImage.isVisible {
    display: flex;
}

.tabakoImage img {
    width: 100%;
    height: auto;
}

.ashTrace {
    position: absolute;
    width: 200px;
    height: auto;
    z-index: 2;
    pointer-events: none;
    
}

.puffButton {
    width: 80px;
    height: 34px;
    
    background: #f1b2a9;
    color: #ffffff;
    font-family: 'Courier New', monospace;
    font-size: 14px;
    font-weight: 600;
    border-radius: 20px;
    border-width: 1.6px;
    border-color: #bb6650;
    border-style: dotted;

    margin-top: 10px;
    padding: 5px;
    cursor: pointer;
    display: inline-flex;
    user-select: auto;
    position: relative;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.puffButton:hover {
  transform: none;
  background: #d58c74;
  color: #ffffff;
}



/*원경 그리드 모음 */

.nekoGrid {

  margin-left: 7%;
 
  margin-bottom: 250px;
  padding-bottom: 5px;
  display: grid;
  border: 2px dotted;
  border-color: rgb(119, 100, 68);
  box-sizing: border-box;
  place-items: center; 
 
  width: 400px;
  grid-template-columns: 1fr; 
  grid-template-rows: 1.8fr 0.2fr; 
  gap: 0px 0px; 
  grid-template-areas: 
    "."
    "."; 
}

.nekoRow1 img {
    
    padding: 10px;
    width: 390px;
    max-width: 100%;
   
}

.nekoRow2 {
    line-height: 1.3;
    text-align: center;
    margin-top: 1px;
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 5px;
    font-size: 14px;
}

.nekoButton1

{
    width: 100px;
    margin-right: 10px;
    height: 60px;
    background: url("use_image/saryo1.png") no-repeat;
    border: transparent;
    cursor: pointer;
}

.nekoButton2

{
    width: 100px;
    margin-right: 10px;
    height: 60px;
    background: url("use_image/saryo1.png") no-repeat;
    border: transparent;
    cursor: pointer;
}

.nekoButton3

{
    width: 100px;
    height: 60px;
    background: url("use_image/saryo1.png") no-repeat;
    border: transparent;
    cursor: pointer;
}

/* 쥬크박스 그리드 */

.jukeGrid {

  margin-right: 10%;
  margin-left: auto;
 
  margin-bottom: 200px;
  padding-bottom: 5px;
  display: grid;
  border: 2px dotted;
  border-color: rgb(119, 100, 68);
  box-sizing: border-box;
  place-items: center; 
 
  width: 500px;
  grid-template-columns: 1fr; 
  grid-template-rows: 1.8fr 0.2fr; 
  gap: 0px 0px; 
  grid-template-areas: 
    "."
    "."; 
}

.jukeRow1 img {
    
    padding: 10px;
    width: 490px;
    max-width: 100%;
   
}

.jukeRow2 {
    display:flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.3;
    text-align: center;
    margin-top: 1px;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 5px;
    font-size: 14px;
}

.chooseTrack {
    width: 300px;
    height: 25px;
    border: 1px solid;
    border-color: rgb(119, 100, 68);
    font-family: 'Courier New', Courier, monospace;
    font-size: 14px;
    color: black;

    background-color: transparent;
    cursor: pointer;
    margin-bottom: 5px;
}

.track1 {
    width: 300px;
    height: 25px;
    border: 1px solid;
    border-color: rgb(119, 100, 68);
    font-family: 'Courier New', Courier, monospace;
    color: black;
    font-size: 14px;
    background-color: transparent;
    cursor: pointer;
    margin-bottom: 5px; 
}

.track2 {
    width: 300px;
    height: 25px;
    border: 1px solid;
    border-color: rgb(119, 100, 68);
    font-family: 'Courier New', Courier, monospace;
    color: black;
    font-size: 14px;
    background-color: transparent;
    cursor: pointer;
    margin-bottom: 5px; 
}

.track3 {
    width: 300px;
    height: 25px;
    border: 1px solid;
    border-color: rgb(119, 100, 68);
    font-family: 'Courier New', Courier, monospace;
    color: black;
    font-size: 14px;
    background-color: transparent;
    cursor: pointer;
    margin-bottom: 5px; 
}


/*하나비 그리드*/

.hanabi {
  
  width: 100vw;
  height: 500px;   
  margin-left: -40px;
  margin-bottom: 200px;
  padding-bottom: 5px;
  display: grid;
  border: 1px solid;
  border-color: rgb(198, 204, 206);
  background-image: url(use_image/firework_capture.png);
  background-repeat: repeat-x;
  background-size: contain;
  box-sizing: border-box;
  place-items: center; 
  font-family : 'Courier New', Courier, monospace;
  text-align: center;
 
 
  grid-template-columns: 1fr; 
  grid-template-rows: 1.8fr 0.2fr; 
  gap: 0px 0px; 
  grid-template-areas: 
    "."
    "."; 
}

.hanabiRow2
{
    padding: 5px;
    line-height: 1.4;
}

.hanabi:hover {
  box-shadow:0 0 0 1600px rgba(0,0,0,0.65);/* dark around it */
  z-index: 10;
  position: relative;
}


/* 하나비 드롭다운 */
:root {
  --select-width: 84px;
  --select-font-size: 16px;
  --select-pad-x: 10px;
  --select-pad-y: 0px;
  --select-radius: 0px;
  --select-bg: rgba(246,250,254,0.60);
  --select-color: #111827;
  --select-border: 1px dotted #d1d5db;
  --select-focus-color: #acc5ec;
  --select-arrow-color: #6b7280;
  --select-arrow-size: 14px;
}

/* Styles */
.select-wrapper {
  position: relative;
  display: inline-flex;
  width: var(--select-width);
}

.custom-select {
  width: 100%;
  font-family: 'Courier New', Courier, monospace;
  font-size: var(--select-font-size);
  padding: var(--select-pad-y) 36px var(--select-pad-y) var(--select-pad-x);
  border-radius: var(--select-radius);
  background: var(--select-bg);
  color: var(--select-color);
  border: var(--select-border);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.custom-select:focus {
  border-color: var(--select-focus-color);
  box-shadow: 0 0 0 2px rgba(172,197,236,0.35);
}

.select-arrow {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  width: var(--select-arrow-size);
  height: var(--select-arrow-size);
}

/*퍼즐*/

.puzzleTemplate {
    width: 100%;
    padding: 30px 200px;
    margin-bottom: 200px;

    display: flex;
    flex-direction: column;
    align-items: left;

    box-sizing: border-box;
}

.puzzleBoard {
    width: min(90vw, 600px);
    background-color:rgba(251, 243, 233, 0.2);
    touch-action: none;
}

.puzzleTile {
    background-repeat: no-repeat;
    cursor: grab;
    image-rendering: auto;
    filter: blur(0.2px); 
}

.puzzleTile:active {
    cursor: grabbing;
}

.puzzleGuide {
    margin-top: 15px;
    font-family: 'Courier New', Courier, monospace;
    text-align: left;
}

/*캔버스*/

.canvasGrid {

  margin-left: 50%; 
  margin-bottom: 200px;
  padding-bottom: 5px;
  display: grid;
  border: 2px dotted;
  border-color: rgb(119, 100, 68);
  box-sizing: border-box;
  place-items: center; 
 
  width: 500px;
 grid-template-columns: minmax(0, 1fr);
 grid-template-rows: auto auto auto;

}

.drawingCanvas {
    display: block;
    width: 100%;
    background-color: rgba(251, 253, 253, 0.4);
    height: auto;
    touch-action: none;
    cursor: crosshair;
    border: 2px dotted;
    border-color: rgb(119, 100, 68);
    box-sizing: border-box;

}


.scatteredDrawing {
    position: absolute;
    width: min(45vw, 400px);
    height: auto;
    opacity: 0.5;
    pointer-events: none;
}



.canvasRow1 {
     width: 100%;
     min-width: 0;
     text-align: center;
     font-size: 16px;
    padding: 20px;
    padding-bottom: 10px;
    max-width: 100%;
    box-sizing: border-box;
   
}

.canvasRow2 {
    
    padding: 10px;
    max-width: 100%;
    box-sizing: border-box;
   
}

.canvasRow3 {
    display:flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.3;
    text-align: center;
    margin-top: 1px;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: 14px;
}

.canvasButton {
    width: 300px;
    max-width: 100%;
    height: 25px;
    border: 1px solid;
    border-color: rgb(119, 100, 68);
    font-family: 'Courier New', Courier, monospace;
    font-size: 14px;
    color: black;

    background-color: transparent;
    cursor: pointer;
    margin-bottom: 5px;
}

.birdCloudTemplate {
    position: relative;
    width: 100%;
    height: 450px;
    overflow: hidden;
}

.birdCloudImage {
    position: absolute;
    top: 0;
    left: 0;
    height: auto;
    pointer-events: none;
}

.birdCloudImage.bird {
    width: 200px;
}

.birdCloudTemplate.cloud {
    margin-bottom: 150px;
    background-image: url("use_image/sky2.png");
    background-size: 600px auto;
    background-repeat: repeat-x;
    background-position: 0 center;

    width: calc(100% + 80px);
    margin-left: -40px;


}

.brokenWindow {
    width: 100%;
    max-width: 1000px;
    margin-bottom: 200px;
    margin-inline: auto;
}

.brokenWindowContainer {
    position: relative;
    border: dotted 1.5px;
    border-color:  rgb(119, 100, 68);
}

.brokenWindowCaption {
    margin-top: 20px;
    text-align: center;
}

.brokenWindowLandscape,
.brokenWindowBlur,
.brokenWindowFrame {
    display: block;
    width: 100%;
    height: auto;
}

.brokenWindowBlur,
.brokenWindowFrame {
    position: absolute;
    top: 0;
    left: 0;
}

.brokenWindowGrid {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: 441fr 118fr 18fr 119fr 20fr 103fr 50fr 99fr 32fr;
    grid-template-rows: 35fr 161fr 23fr 166fr 16fr 168fr 22fr 159fr;
    pointer-events: none;
}

/* 창문 칸 클릭 영역 */
.brokenWindowPane {
    min-width: 0;
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: 0;
    cursor: pointer;
    pointer-events: auto;
}

.brokenWindowPane.revealed {
    cursor: default;
}

.brokenWindowPane img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: scale-down;
}

.brokenWindowPane[data-pane^="1_"] { grid-row: 2; }
.brokenWindowPane[data-pane^="2_"] { grid-row: 4; }
.brokenWindowPane[data-pane^="3_"] { grid-row: 6; }
.brokenWindowPane[data-pane^="4_"] { grid-row: 8; }

.brokenWindowPane[data-pane$="_1"] { grid-column: 2; }
.brokenWindowPane[data-pane$="_2"] { grid-column: 4; }
.brokenWindowPane[data-pane$="_3"] { grid-column: 6; }
.brokenWindowPane[data-pane$="_4"] { grid-column: 8; }

.windowButton {
    width: 300px;
    max-width: 100%;
    height: 25px;
    border: 1px solid;
    border-color: rgb(119, 100, 68);
    font-family: 'Courier New', Courier, monospace;
    font-size: 16px;
    color: black;

    background-color: transparent;
    cursor: pointer;
    margin-bottom: 5px;
}

.singleEvent {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    width: 600px;
    max-width: 100%;
    margin: 0 0 200px;
    margin-left: var(--single-x, 0px);
}

.singleEventImageRow,
.singleEventInfoRow {
    min-width: 0;
}

.singleEventInfoRow {
    padding-inline: 10px;
}

.singleEventImage {
    display: block;
    width: 100%;
    height: auto;
}

.singleEventText {
    margin: 0;
    padding-top: 16px;
    text-align: center;
}

.singleEventButtonRow {
    display: flex;
    justify-content: center;
    gap: 12px;
    padding-top: 10px;
}

.singleEventButtonRow .windowButton {
    flex: 1;
    min-width: 0;
    max-width: 300px;
    height: auto;
    min-height: 30px;
    margin-bottom: 0;
    padding: 4px;
}

.restoreEvent {
    grid-template-rows: auto auto auto;
}

.restoreDoll {
    grid-template-rows: auto auto;
}

.restoreText {
    max-width: 600px;
    margin: 0 auto 12px;
    padding: 0 12px;
    text-align: center;
}

.restoreText:empty {
    display: none;
}

.restoreEvent.completed .restoreText,
.restoreDoll .restoreText {
    margin-top: 12px;
}

.restoreEvent:not(.restoreDoll) {
    display: grid;
    width: 100vw;
    margin: 0 0 200px calc(50% - 50vw);
}

.restoreBoard {
    position: relative;
    width: 100%;
    height: 600px;
    overflow: hidden;
}

.restorePart {
    position: absolute;
    display: block;
    max-width: none;
}

.restorePart {
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-drag: none;
    transition: left 250ms ease, top 250ms ease;
}

.restoreBoard:not(.ready) .restorePart {
    visibility: hidden;
}

.restorePart.dragging {
    cursor: grabbing;
    transition: none;
}

.restoreButtonRow {
    display: flex;
    justify-content: center;
    padding: 12px;
}

/*모바일의 경우*/
@media (max-width: 600px) {
    .singleEvent {
        width: 100vw;
        max-width: none;
        margin-left: calc(50% - 50vw);
    }

    body {
        padding-left: 10px;
        padding-right: 10px;
    }

    .hanabi:hover {
        box-shadow: none;
        z-index: auto;
        position: static;
    }

    .sphere {
        width: 300px;
    }

    @keyframes moveShape {

    0%,
    100% {
        transform: translate(20%,10vh);
    }
    25% {
        transform: translate(35%, 30vh);
    }
    50% {
        transform: translate(45%, 40vh);
    }
    75% {
        transform: translate(25%, 50vh);
    }

}

    .puzzleTemplate {
        padding: 30px 0;
    }

    .owariButton {
        top: 3%;
    }
    .door img {
        right: -400px;
       
        height: 100vh;
        width: auto;
    }

    .doortext {
    position: absolute;
    margin: 100px;
    }
    .letterPaper {
        width: 90vw;
    }
    #testdebris {
        left: auto;
        right: 0;
    }

    .writtenLetter {
        inset: 0;
        width: auto;
        box-sizing: border-box;
        margin: 0;
        padding-top : 20%;
        padding-left: 15%;
        padding-right: 1%;
        font-size: 14px;
    }

    .input-wrapper {
        top: 84%;
        width: 330px;
    }

    .nekoGrid {
        max-width: 85%;
        box-sizing: border-box;
        
        place-items: center; 
        margin-left: 1%;
    }

    .nekoRow2 {
        text-align: center;
    }
    .nekoButton1{
        width: 80px;
        margin-right: 5px;
        height: 48px;
        background: url("use_image/saryo1.png") no-repeat;
        border: transparent;
    }

     .nekoButton2{
        width: 80px;
        margin-right: 5px;
        height: 48px;
        background: url("use_image/saryo1.png") no-repeat;
        border: transparent;
    }

     .nekoButton3{
        width: 80px;
        margin-right: 5px;
        height: 48px;
        background: url("use_image/saryo1.png") no-repeat;
        border: transparent;
    }

    .tabakoImage {
        width: 60px;
        right: 1%;

    }

    .puffButton {
        margin-top: 10px;
        width: 60px;
        height: 34px;
        padding: 0;
        font-size: 13.5px;
    }

    .ashTrace {
        width: 150px;
    }

    .hanabi {
        margin-left: -10px;
        margin-top: 20px;
        margin-bottom: 150px;
        background-repeat: repeat-y;
        height: 800px;
        
    }

    .jukeGrid {
        max-width: 85%;
        margin-right: auto;
        margin-left: auto;
        grid-template-columns: minmax(0, 1fr);

        position: relative;
        left: 10px;
    }

    .jukeRow1 {
        width: 100%;
        min-width: 0;
    }

    .jukeRow1 img {
        width: 100%;
        height: auto;
    }

    .jukeRow2 {
        padding-left: 5px;
        padding-right: 5px;
    }

    .chooseTrack,
    .track1,
    .track2,
    .track3 {
        width: 100%;
        max-width: 100%;
    }

    .canvasGrid {
    width: 85%;
    margin-left: auto;
    margin-right: auto;
    }

    .canvasRow1 {
        font-size: 14px;
    }

    .puzzleBoard {
        width: 80vw;
        
    }

    .birdCloudImage.bird {
    width: clamp(90px, 30vw, 130px);
    }

    .birdCloudTemplate.cloud {
    width: calc(100% + 20px);
    margin-left: -10px;
    }


    






    .wordsField {
        max-width: 100%;
    }
}





/*
Source - https://stackoverflow.com/a/68217932
Posted by Temani Afif, modified by community. See post 'Timeline' for change history
Retrieved 2026-08-25, License - CC BY-SA 4.0  

.shimmer {
  color: grey;
  display: inline-block;
  mask: linear-gradient(-60deg, #000 30%, #0005, #000 70%) right/350% 100%;
  animation: shimmer 2.5s infinite;
  max-width: 200px;
  
}

@keyframes shimmer {
  100% {
    mask-position: left
  }
}

 */