body {
    margin: 0;
    background: black;
}

/* Room container */
.room {
    position: relative;
    width: 1366px;
    height: 768px;
    margin: auto;
    background: url("images/room.png") no-repeat center;
    background-size: cover;
}

/* All clickable objects */
.object {
    position: absolute;
    cursor: pointer;
}

/* POSITIONING (based on what you told me) */

/* TV - bottom right */
#tv {
    width: 355px;
    height: 482px;
    right: 75px;
    bottom: 0px;
}

/* Radio - top left */
#radio {
    width: 69px;
    height: 65px;
    top: 138px;
    left: 415px;
}

/* PC - center left */
#pc {
    width: 432px;
    height: 328px;
    left: 274px;
    top: 232px;
}

/* Me - bottom left */
#me {
    width: 370px;
    height: 425px;
    left: 0px;
    bottom: 0;
}

/* Door - center right */
#door {
    width: 220px;
    height: 385px;
    right: 430px;
    top: 122px;
}

/* Base window */
.window {
    position: absolute;
    top: 120px;
    left: 150px;
    width: 300px;
    display: none;
    z-index: 10;
    border-radius: 10px;
    overflow: hidden;
    font-family: sans-serif;
}

/* Title bar */
.title-bar {
    padding: 6px;
    font-weight: bold;
    cursor: move;
    display: flex;
    justify-content: space-between;
}

/* Close button */
.close {
    cursor: pointer;
}

/* Content */
.content {
    padding: 10px;
}

/* ========================= */
/* TV STYLE (blue / purple) */
/* ========================= */

.tv {
    width: 585px;
    height: 538px;
    background: linear-gradient(135deg, #8a2be2, #00e5ff);
    border: 2px solid #7df9ff;
    box-shadow: 0 0 18px rgba(0,255,255,.35);
}

.tv-layout {
    padding: 15px;
}

/* container */

/*tvbackground */

.tv-panel {
    position: relative;
    width: 470px;
    height: 320px;
    margin: 40px auto 0 auto;
}

/* background art */
.tv-bg {
    width: 100%;
    height: 100%;
    display: block;

    opacity: .98;

    border: 7px solid #3a3a3a;
    border-radius: 8px;

    box-shadow:
        inset 0 0 8px rgba(0,0,0,.35),
        0 2px 6px rgba(0,0,0,.25);
}

/* clickable thumbnails */
/* change wdth to resize thumbnails */
.show-thumb {
    position: absolute;
    width: 85px;
    cursor: pointer;
    transition: .2s;
}

.show-thumb:hover {
    transform: scale(1.06);
    filter: brightness(1.1);
}

/* place them */
.show1 {
    left: 68px;
    top: 83px;
}

.show2 {
    left: 178px;
    top: 83px;
}

/* textbox */
.tv-dialogue {
    margin-top: 15px;
    background: rgba(0,0,50,.65);
    border: 2px solid cyan;
    border-radius: 14px;
    padding: 12px;
    color: white;
}

/* X to exit dialougue */

.dialogue-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.dialogue-close {
    border: none;
    background: transparent;
    color: white;
    cursor: pointer;
    font-size: 14px;
    opacity: .7;
    transition: .2s;
}

.dialogue-close:hover {
    opacity: 1;
    transform: scale(1.15);
}
 /* Add on */ 
 
.tv-dialogue {
    display: none;
}

/* ========================= */
/* PC STYLE (cyberpunk) */
/* ========================= */

.pc {
    background: black;
    color: #0ff;
    border: 2px solid #ff00ff;
    box-shadow: 0 0 10px #ff00ff;
}

.pc .title-bar {
    background: #111;
    color: #ff00ff;
}

/* ========================= */
/* ME STYLE (cute pink) */
/* ========================= */
.me {
    width: 800px;
    height: 520px;
    background: #fff0f6;
    color: #ff4fa0;
    border: 3px solid #98ff98;
    box-shadow: 0 0 20px rgba(255,182,193,.7);
}

.me .title-bar {
    background: linear-gradient(90deg, #ffb6d9, #98ff98);
    color: white;
}

.me-layout {
    display: flex;
    height: 100%;
    padding: 0;
}

/* LEFT COLUMN */
.me-left {
    width: 50%;
    display: flex;
    flex-direction: column;
    padding: 20px;
    box-sizing: border-box;
}

/* BIO */
.bio-box {
    flex: 1;
    min-height: 0;

    max-height: 240px;   /* adjust this */
    overflow-y: auto;

    padding-right: 8px;
}

/* Chrome / Opera / Edge */
.bio-box::-webkit-scrollbar {
    width: 8px;
}

.bio-box::-webkit-scrollbar-track {
    background: #fff4fa;
    border-radius: 999px;
}

.bio-box::-webkit-scrollbar-thumb {
    background: linear-gradient(#ffb6d9, #ff86c0);
    border-radius: 999px;
}

.bio-box::-webkit-scrollbar-thumb:hover {
    background: #ff6eb4;
}

/* Firefox */
.bio-box {
    scrollbar-width: thin;
    scrollbar-color: #ff9ccc #fff4fa;
}

/* GENERATOR */
.fact-box {
    margin-top: auto;
    padding-top: 20px;
    border-top: 2px dashed #ffb6d9;
}

/* RIGHT COLUMN */
.me-right {
    width: 50%;
    height: 100%;
    overflow: hidden;
}

.me-pic {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ========================= */
/* RADIO STYLE (simple for now) */
/* ========================= */

.radio {
    background: #222;
    color: white;
}

.radio {
    width: 360px;
    background: linear-gradient(135deg, #ffe0f0, #d8ffe6);
    border: 2px solid #ff9ccc;
    box-shadow: 0 0 16px rgba(255,182,193,.35);
}

.radio-layout {
    padding: 15px;
}

.radio-header h3 {
    margin: 0;
    color: #ff4fa0;
    font-size: 16px;
}

.divider {
    height: 1px;
    background: #ffb6d9;
    margin: 10px 0;
}

.suggest-box input {
    width: 100%;
    padding: 6px;
    border-radius: 8px;
    border: 1px solid #ff9ccc;
    margin-top: 5px;
}

.suggest-box button {
    margin-top: 8px;
    padding: 6px 10px;
    border: none;
    border-radius: 8px;
    background: #ff9ccc;
    color: white;
    cursor: pointer;
}

#radioMsg {
    margin-top: 8px;
    font-size: 12px;
    color: #ff4fa0;
}

/* Added Code for Radio Dial */ 

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

.now-playing{
    margin-bottom:15px;
    padding:10px;
    border-radius:12px;
    background:#fff;
    color:#ff4fa0;
    font-weight:bold;
}

.radio-controls{
    display:flex;
    justify-content:center;
    gap:20px;
    align-items:center;
}

.radio-controls button{
    border:none;
    cursor:pointer;
    font-size:24px;
    background:none;
}

#radioKnob{
    font-size:38px;
    transition:.25s;
}

/* Added Code for YouTube */

.playlist-button {
    display: inline-block;
    margin-top: 8px;
    padding: 8px 12px;
    border-radius: 10px;
    background: #ff9ccc;
    color: white;
    text-decoration: none;
    font-weight: bold;
    transition: .2s;
}

.playlist-button:hover {
    transform: scale(1.05);
    background: #ff6fb0;
}

.hint {
    font-size: 11px;
    opacity: .7;
    margin-top: 6px;
}

/* Added Code for Pink Buttons */

.radio-controls button {
    width: 58px;
    height: 58px;
    border: 2px solid #ff9ccc;
    border-radius: 50%;
    background: linear-gradient(
        145deg,
        #ffd4ea,
        #ffb6d9
    );
    color: #ff4fa0;
    font-size: 24px;
    cursor: pointer;

    box-shadow:
        0 4px 10px rgba(255,105,180,.25),
        inset 0 2px 4px rgba(255,255,255,.5);

    transition: .2s;
}

.radio-controls button:hover {
    transform: scale(1.08);
}

.radio-controls button:active {
    transform: scale(.95);
}

/* FACT AREA */
.fact-box {
    margin-top: 25px;
    margin-bottom: 25px;

    display: flex;
    justify-content: flex-start;
}

/* SHELL */
.tama-shell {
    width: 200px;
    min-height: 150px;
    padding: 18px;
    border-radius: 45% 45% 40% 40%;
    background: linear-gradient(145deg, #ffc7df, #ffb6d9);
    border: 4px solid white;
    box-shadow:
        0 6px 18px rgba(255,105,180,.25),
        inset 0 3px 8px rgba(255,255,255,.45);
    position: relative;
}

/* sparkles */
.tama-shell::before {
    content: "✦ ♡ ✦";
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    font-size: 13px;
    opacity: .9;
}

/* title */
.tama-title {
    text-align: center;
    margin-top: 8px;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: bold;
    color: white;
}

/* screen */
.tama-screen {
    background: #dfffe5;
    border: 3px solid #98ff98;
    border-radius: 14px;
    min-height: 58px;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow: inset 0 2px 6px rgba(0,0,0,.08);
}

/* fact text */
#factText {
    margin: 0;
    color: #2f6b48;
    font-size: 12px;
    line-height: 1.35;
}

/* flower button holder */
.tama-buttons {
    display: flex;
    justify-content: center;
    margin-top: 12px;
}

/* FLOWER BUTTON */
.tama-btn {
    width: 46px;
    height: 46px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 28px;
    line-height: 1;
    transition: .18s;
}

.tama-btn:hover {
    transform: scale(1.12) rotate(8deg);
}

.tama-btn:active {
    transform: scale(.92);
}