/* ===== SHARED STYLES ===== */
@font-face {
  font-family: 'Runa Mono';
  font-style: normal;
  font-display: swap;
  src: url(RunaMono-Medium.otf) format('opentype');
  unicode-range: U+16A0-16F8;
}
#game-container {
    font-family: 'Courier New', 'Runa Mono', monospace;
    line-height: 1.4;
    container-type: size;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    aspect-ratio: 16 / 9;
    width: 100%;
    height: auto;
    position: relative;
    text-align: left;
    margin: 30px 0;
    scrollbar-width: thin;
}
#game-container:fullscreen {
    background-color: #f0f0f0;
}
#left-panel {
    flex: 0 0 45%;
    padding: 2cqmin;
    font-size: 2.25cqmin;
    min-height: 0;
    max-height: 100%;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}
#room-display, #room-display-overlay, #menu-display {
    border: .2cqmin solid #000;
    height:100%;
    width:100%;
    padding: 2.25cqmin;
    overflow-x: hidden;
    overflow-y: auto;
    box-sizing: border-box;
}
#room-display-overlay {
    position: absolute;
    inset: 2cqmin;
    height: unset;
    width: unset;
    pointer-events: none;
    display: none;
}
#room-image {
    text-align: center;
    position: relative;
}
#room-image img {
    max-width: 100%;
    max-height: 36cqh;
    margin-bottom: 2.25cqmin;
    box-sizing: border-box;
}
#room-description {
}

/* game menu */
#menu-display {
    display: none;
}
#left-panel.menumode #menu-display {
    display: flex;
    flex-direction: column;
    gap: 2cqmin;
}
#left-panel.menumode #room-display {
    display: none;
}

#menu-banner {
    position: relative;
}
#menu-banner:empty {
    display: none;
}
#menu-banner img {
    box-sizing: border-box;
    width: 100%;
    vertical-align: bottom;
}

#menu-intro {
    flex-shrink: 1;
    overflow-y: auto;
}

.menu-buttons {
    flex-grow: 1;
}

#game-container button {
    border-radius: 0;
    background-color: #1e1e37;
    color: #f0f0f0;
    border: none;
    padding: 1.2cqmin 1.6cqmin;
    cursor: pointer;
    font-family: inherit;
    font-size: 2.75cqmin;
}
#game-container button:hover {
    background-color: #007;
    box-shadow: none;
}


#game-container button#play-button {
    display: block;
    width: 60%;
    padding: 2cqmin;
    margin: auto;
    font-size: 4cqmin;
    font-weight: bold;
}

.menu-settings.web-style {
    padding: 2cqmin 3cqmin;
    box-sizing: border-box;
    color: #1e1e37;
}
.menu-setting {
    line-height: 2em;
}
.menu-setting * {
    vertical-align: middle;
}
.menu-setting input[type="checkbox"]
{
    width: 2.5cqmin;
    height: 2.5cqmin;
}
.menu-setting input[type="range"] {
    width: 60%;
}
.menu-setting .label {
    display: inline-block;
    width: 30%;
}


/* room transitions */
.room-transition-up.room-transition-trigger,
.room-transition-down.room-transition-trigger,
.room-transition-left.room-transition-trigger,
.room-transition-right.room-transition-trigger
{
    transition: transform .65s ease-out;
}

/* positions for slide transitions */
#room-display-overlay.room-transition-up,
#room-display-overlay.room-transition-down,
#room-display.room-transition-up.room-transition-trigger,
#room-display.room-transition-down.room-transition-trigger {
    transform: translateY(0);
}
#room-display-overlay.room-transition-left,
#room-display-overlay.room-transition-right,
#room-display.room-transition-left.room-transition-trigger,
#room-display.room-transition-right.room-transition-trigger {
    transform: translateX(0);
}

#room-display.room-transition-up,
#room-display-overlay.room-transition-down.room-transition-trigger {
    transform: translateY(calc(-2.25cqmin - 100%));
}
#room-display.room-transition-down,
#room-display-overlay.room-transition-up.room-transition-trigger {
    transform: translateY(calc(2.25cqmin + 100%));
}
#room-display.room-transition-left,
#room-display-overlay.room-transition-right.room-transition-trigger {
    transform: translateX(calc(-2.25cqmin - 100%));
}
#room-display.room-transition-right,
#room-display-overlay.room-transition-left.room-transition-trigger {
    transform: translateX(calc(2.25cqmin + 100%));
}

#room-display-overlay.room-transition-fade
{
    opacity: 1;
}
#room-display-overlay.room-transition-fade.room-transition-trigger
{
    transition: opacity .3s ease-out;
    opacity: 0;
}
#room-display.room-transition-fade
{
    opacity: 0;
}
#room-display.room-transition-fade.room-transition-trigger
{
    transition: opacity .65s ease-out .35s;
    opacity: 1;
}

#room-display-overlay.room-transition-forward,
#room-display-overlay.room-transition-backward
{
    opacity: 1;
    transform: scale(1);
}
#room-display-overlay.room-transition-forward.room-transition-trigger,
#room-display-overlay.room-transition-backward.room-transition-trigger
{
    transition: transform .65s ease-out, opacity .65s ease-out;
    transform-origin: 50% 25%;
    opacity: 0;
}
#room-display.room-transition-forward,
#room-display.room-transition-backward
{
    opacity: 0;
}
#room-display-overlay.room-transition-forward.room-transition-trigger,
#room-display.room-transition-backward
{
    transform: scale(2);
}
#room-display-overlay.room-transition-backward.room-transition-trigger,
#room-display.room-transition-forward
{
    transform: scale(.5);
}
#room-display.room-transition-forward.room-transition-trigger,
#room-display.room-transition-backward.room-transition-trigger
{
    transition: transform .65s ease-out, opacity .65s ease-out;
    transform-origin: 50% 25%;
    transform: scale(1);
    opacity: 1;
}

#right-panel {
    font-size: 2.25cqmin;
    flex: 1;
    display: flex;
    gap: 2cqmin;
    flex-direction: column;
    /*overflow: hidden;*/
    padding: 2cqmin 2cqmin 2cqmin 0;
    min-height: 0;
    max-height: 100%;
    box-sizing: border-box;
    position: relative;
}
#game-container #adventure-title {
    margin: 0;
    font-size: 4cqmin;
}
#game-container .controls {
    position: absolute;
    right: 2.25cqmin;
}
#game-container .web-style {
	font-family:Tahoma, Arial, Helvetica;
}

#inventory {
    display: flex;
    flex-wrap: wrap;
}
#inventory h3 {
    border: .2cqmin solid #000;
    border-bottom: 0 none;
    margin: 0;
    padding: 0 2.25cqmin;
    display: inline-block;
}
#inventory #status-display {
    border-bottom: .2cqmin solid #000;
    display: inline-block;
    flex: 1;
    text-align: right;
}
#inventory #inventory-list {
    border: .2cqmin solid #000;
    border-top: 0 none;
    padding: 2.25cqmin;
    width: 100%;
    min-height: 10cqmin;
}
#inventory #inventory-list:empty:after
{
    content: '-';/*∅*/
    font-size: 150%;
    opacity: .5;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}
#inventory #inventory-list>div {
    display: inline-block;
    width: 20em;
}

.clickable {
    cursor: pointer;
    text-decoration: underline;
}
.clickable:hover {
    color: #00a;
}
.speech {
    color: #000;
    font-style: italic;
}
.speech .clickable:hover {
    color: #44f;
}

.icon-take, .icon-drop, .icon-view, .icon-work, .icon-talk {
    display: inline-block;
    width: 1.2em;
    height: 1.2em;
    vertical-align: middle;
    position: relative;
    top: -.1em;
}
.icon-take:after, .icon-drop:after, .icon-view:after, .icon-work:after, .icon-talk:after {
    content: '';
    position: absolute;
    inset: 0;
    background-position: 50% 50%;
    background-size: 100%;
}
.icon-take:after {
	background-image: url("data:image/svg+xml;utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256px' height='256px'%3E%3Cpath d='M 32 160 L 32 224 L 224 224 L 224 160 M 128 32 L 128 160 M 176 80 L 128 32 L 80 80' fill='none' stroke='%23000' stroke-width='24'/%3E%3C/svg%3E");
}
.icon-drop:after {
	background-image: url("data:image/svg+xml;utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256px' height='256px'%3E%3Cpath d='M 32 160 L 32 224 L 224 224 L 224 160 M 128 32 L 128 160 M 176 112 L 128 160 L 80 112' fill='none' stroke='%23000' stroke-width='24'/%3E%3C/svg%3E");
}
.icon-view:after {
	background-image: url("data:image/svg+xml;utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256px' height='256px'%3E%3Cpath d='M 16 128 C 80 48 176 48 240 128 C 176 208 80 208 16 128 z M 128 100 C 143.464 100 156 112.536 156 128 C 156 143.464 143.464 156 128 156 C 112.536 156 100 143.464 100 128 C 100 112.536 112.536 100 128 100 z' fill='none' stroke='%23000' stroke-width='24'/%3E%3C/svg%3E");
}
.icon-work:after {
	background-image: url("data:image/svg+xml;utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256px' height='256px'%3E%3Cpath d='M 204 128 L 204 128 L 204 128 L 204 128 z M 166 194 L 166 194 L 166 194 L 166 194 z M 90 194 L 90 194 L 90 194 L 90 194 z M 52 128 L 52 128 L 52 128 L 52 128 z M 204 148 L 219 162 L 203 190 L 183 184 L 149 204 L 144 224 L 112 224 L 107 204 L 73 184 L 53 190 L 37 162 L 52 148 L 52 108 L 37 94 L 53 66 L 73 72 L 107 52 L 112 32 L 144 32 L 149 52 L 183 72 L 203 66 L 219 94 L 204 108 L 204 148 L 204 148 z M 128 96 C 145.673 96 160 110.327 160 128 C 160 145.673 145.673 160 128 160 C 110.327 160 96 145.673 96 128 C 96 110.327 110.327 96 128 96 z' fill='none' stroke='%23000' stroke-width='24'/%3E%3C/svg%3E");
}
.icon-talk:after {
	background-image: url("data:image/svg+xml;utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256px' height='256px'%3E%3Cpath d='M 64 40 L 192 40 C 209.673 40 224 54.3269 224 72 L 224 160 C 224 177.673 209.673 192 192 192 L 128 192 L 64 240 L 80 192 L 64 192 C 46.3269 192 32 177.673 32 160 L 32 72 C 32 54.3269 46.3269 40 64 40 z M 176 144 L 176 144 M 128 144 L 128 144 M 80 144 L 80 144' fill='none' stroke='%23000' stroke-width='24' stroke-linecap='round'/%3E%3C/svg%3E");
}

.icon-take:hover:before, .icon-drop:hover:before, .icon-view:hover:before, .icon-work:hover:before, .icon-talk:hover:before {
    content: '';
    position: absolute;
    inset: -.2em;
    border: solid .2cqmin #000;
}

#history {
    flex: 1;
    min-height: 20cqmin;
    overflow-y: auto;
    border: .2cqmin solid #000;
    padding: 2.25cqmin;
}
#history .command-input {
    padding: .5cqmin 1.5cqmin;
    border-radius: .5cqmin;
    margin: .3cqmin 0;
}

#command-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 1cqmin;
}
#game-container #command-buttons button {
    border: .2cqmin solid #1e1e37;
    background-color: #f0f0f0;
    color: #1e1e37;
    padding: 1cqmin 1.6cqmin;
    font-size: inherit;
}
#game-container #command-buttons button:hover {
    background-color: #fff;
    color: #000;
    border-color: #000;
}
#input-container {
    display: flex;
}
#command-input {
    flex: 1;
    border: .2cqmin solid #1e1e37;
    box-shadow: none;
    padding: 1.2cqmin 1.6cqmin;
    font-family: inherit;
    font-size: 2.75cqmin;
    border-radius: 0;
}
#command-input:focus {
    outline: none;
}

/* Room description change highlighting */
.room-description-element.room-description-highlight {
    animation: bg-flash .66s ease-in-out 3 both;
    background-color: #f0f0f0;
    text-shadow: 0 0 .35cqmin #f0f0f0, 0 0 .35cqmin #f0f0f0;
    border-radius: .35cqmin;
    box-shadow: 0 0 0 #aaa;
}
@keyframes bg-flash {
    50% { background-color: #aaa; box-shadow: 0 0 .5cqmin #aaa; }
}

/* ===== TERMINAL THEME (Classic Green Terminal) ===== */
#game-container.terminal {
    color: #0f0;
    scrollbar-color: #0f0 #020;
    &::before
    {
        content: '';
        position: absolute;
        inset: -5px;
        z-index: -1;
        background-color: #010;
        border-radius: 12px;
        box-shadow: 0 0 5px #0f0, 0 0 10px #0f0;
    }
}
#game-container.terminal:fullscreen {
    background-color: #000;
    &::before
    {
        display: none;
    }
}

#game-container.terminal #room-display,
#game-container.terminal #room-display-overlay,
#game-container.terminal #menu-display {
    border-color: #0f0;
    background-color: #010;
}

#game-container.terminal .menu-settings.web-style {
    padding: 1.8cqmin 2.8cqmin;
    border: .2cqmin solid #0f0;
    background: #f0f0f0;
}

#game-container.terminal #room-image::before,
#game-container.terminal #menu-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 10;
    background-image: linear-gradient(to bottom, transparent 49%,#0108 51%);
    background-size: 100% 2px;
}
#game-container.terminal #room-image img, #game-container.terminal #menu-banner img {
    /* sepia: hsl(38, 24.5%, 60%);   green: hsl(120, 100%, 50%); */
    filter: sepia(1) hue-rotate(82deg) saturate(200%);
}

#game-container.terminal #inventory h3 {
    border-color: #0f0;
    background-color: #010;
    color: inherit;
}
#game-container.terminal #inventory #status-display {
    border-bottom-color:#0f0;
}
#game-container.terminal #inventory #inventory-list {
    border-color:#0f0;
    background-color: #010;
}

#game-container.terminal #adventure-title {
    text-shadow: none;
    color: inherit;
}

#game-container.terminal  .clickable:hover {
    color: #6f6;
}

#game-container.terminal .icon-take:after, #game-container.terminal .icon-drop:after,
#game-container.terminal .icon-view:after, #game-container.terminal .icon-work:after,
#game-container.terminal .icon-talk:after {
    filter: brightness(0) saturate(100%) invert(63%) sepia(73%) saturate(5307%) hue-rotate(92deg) brightness(129%) contrast(118%);
}
#game-container.terminal .icon-take:hover:after, #game-container.terminal .icon-drop:hover:after,
#game-container.terminal .icon-view:hover:after, #game-container.terminal .icon-work:hover:after,
#game-container.terminal .icon-talk:hover:after {
    filter: brightness(0);
}
#game-container.terminal .icon-take:hover:before, #game-container.terminal .icon-drop:hover:before,
#game-container.terminal .icon-view:hover:before, #game-container.terminal .icon-work:hover:before,
#game-container.terminal .icon-talk:hover:before {
    background: #0f0;
    border-color: transparent;

}

#game-container.terminal .speech {
    color: #8f8;
    font-style: italic;
}
#game-container.terminal .speech .clickable:hover {
    color: #cfc;
}

#game-container.terminal #history {
    border-color: #0f0;
    background-color: #010;
}
#game-container.terminal #history .command-input {
    background-color: #020;
}

#game-container.terminal #command-buttons button {
    background-color: #010;
    border-color: #0f0;
    color: #0f0;
}
#game-container.terminal #command-buttons button:hover {
    background-color: #0f0;
    color: #000;
}
#game-container.terminal #command-input {
    background-color: #010;
    border-color: #0f0;
    color: #0f0;
}

#game-container.terminal button {
    background-color: #0f0;
    color: #000;
}
#game-container.terminal button:hover {
    background-color: #6f6;
}

#game-container.terminal .room-description-element.room-description-highlight {
    animation: terminal-bg-flash .66s ease-in-out 3 both;
    background-color: #010;
    text-shadow: 0 0 .35cqmin #010, 0 0 .35cqmin #010;
    border-radius: .35cqmin;
    box-shadow: 0 0 0 #080;
}
@keyframes terminal-bg-flash {
    50% { background-color: #080; box-shadow: 0 0 .5cqmin #080; }
}

/* ===== FUTURISTIC THEME ===== */

@font-face {
  font-family: 'Kode Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/kodemono/v4/A2BYn5pb0QgtVEPFnlYOk4Lwa5I.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Kode Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/kodemono/v4/A2BYn5pb0QgtVEPFnlYOnYLw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
#game-container.futuristic {
    font-family: 'Kode Mono', 'Courier New', 'Runa Mono', monospace;
    color: #00ffff;
    scrollbar-color: #00ffff #001133;
    &::before
    {
        content: '';
        position: absolute;
        inset: -5px;
        z-index: -1;
        background: linear-gradient(135deg, #001122 0%, #002244 100%);
        box-shadow:
            inset 0 0 30px #00ffff4d
            0 0 5px #0ff, 0 0 10px #0ff;
    }
}

#game-container.futuristic:fullscreen {
    background: linear-gradient(135deg, #001122 0%, #002244 100%);
    box-shadow: inset 0 0 3cqmin #00ffff4d;
    &::before
    {
        display: none;
    }
}

#game-container.futuristic #room-display,
#game-container.futuristic #room-display-overlay,
#game-container.futuristic #menu-display,
#game-container.futuristic #history {
    border: .15cqmin solid #00ffff;
    background: linear-gradient(135deg, #000f1e 0%, #001932 100%);
    box-shadow:
        inset 0 0 4cqmin #00ffff33,
        0 0 2.5cqmin #00ffff4d;
}

#game-container.futuristic .menu-settings.web-style {
    padding: 1.85cqmin 2.85cqmin;
    background: #f0f0f0;
    border: .15cqmin solid #00ffff;
    box-shadow:
        0 0 4cqmin #00ffff33,
        inset 0 0 2.5cqmin #00ffff4d;
}

#game-container.futuristic #room-image img, #game-container.futuristic #menu-banner img {
    border: .1cqmin solid #00ffff80;
    box-shadow: 0 0 3.75cqmin #00ffff80;
}

#game-container.futuristic #inventory h3 {
    color: inherit;
    background: #000a14;
}
#game-container.futuristic #inventory h3,
#game-container.futuristic #inventory #status-display,
#game-container.futuristic #inventory #inventory-list,
#game-container.futuristic #history,
#game-container.futuristic #command-input,
#game-container.futuristic #command-buttons button {
    border-color: #00ffff;
}

#game-container.futuristic #inventory-list {
    background: #000a14;
}

#game-container.futuristic #command-buttons button {
    background: linear-gradient(135deg, rgba(0, 10, 25, 0.8) 0%, rgba(0, 25, 45, 0.8) 100%);
    color: #00ffff;
    box-shadow: 0 0 1cqmin #00ffff4d;
}

#game-container.futuristic #command-buttons button:hover {
    background: linear-gradient(135deg, rgba(0, 25, 45, 0.9) 0%, rgba(0, 40, 65, 0.9) 100%);
    color: #88ffff;
    box-shadow: 0 0 2cqmin #00ffff80;
}

#game-container.futuristic #command-input {
    background: #000a14;
    border-color: #00ffff;
    color: #00ffff;
    box-shadow: inset 0 0 1cqmin #00ffff33;
}

#game-container.futuristic #input-container:focus-within,
#game-container.futuristic #input-container:hover {
    box-shadow: 0 0 1cqmin #00ffff80;
}

#game-container.futuristic button {
    background: linear-gradient(135deg, #00ffff 0%, #0088cc 100%);
    color: #001122;
}
#game-container.futuristic button#play-button
{
    box-shadow: 0 0 1cqmin #00ffff4d;
}

#game-container.futuristic button:hover {
    background: linear-gradient(135deg, #55ffff 0%, #33aaff 100%);
}
#game-container.futuristic button#play-button:hover
{
    box-shadow: 0 0 2cqmin #00ffff99;
}

#game-container.futuristic #adventure-title {
    text-shadow: none;
    color: inherit;
}

#game-container.futuristic .clickable {
    color: #00ffff;
    text-shadow: 0 0 .6cqmin #00ffff80;
}

#game-container.futuristic .clickable:hover {
    color: #88ffff;
    text-shadow: 0 0 1cqmin #00ffffcc;
}

#game-container.futuristic .icon-take:after, #game-container.futuristic .icon-drop:after,
#game-container.futuristic .icon-view:after, #game-container.futuristic .icon-work:after,
#game-container.futuristic .icon-talk:after {
    filter: invert(75%) sepia(99%) saturate(2087%) hue-rotate(120deg) brightness(102%) contrast(106%);
}
#game-container.futuristic .icon-take:hover:before, #game-container.futuristic .icon-drop:hover:before,
#game-container.futuristic .icon-view:hover:before, #game-container.futuristic .icon-work:hover:before,
#game-container.futuristic .icon-talk:hover:before {
    background: #000a14;/*linear-gradient(90deg, rgba(200, 180, 140, 0.3) 0%, rgba(150, 130, 100, 0.2) 100%);*/
    border-color: #00ffff;
    border-radius: .5cqmin;
}

#game-container.futuristic .speech, #game-container.futuristic .speech .clickable {
    color: #ff88ff;
    text-shadow: 0 0 .6cqmin #ff88ff80;
}

#game-container.futuristic .speech .clickable:hover {
    color: #ffccff;
    text-shadow: 0 0 1cqmin #ff88ff80;
}

#game-container.futuristic #history .command-input {
    background: #00ffff1a;
    color: #00ffff;
    border-left: .2cqmin solid #00ffff;
}

#game-container.futuristic .room-description-element.room-description-highlight {
    animation: futuristic-bg-flash .66s ease-in-out 3 both;
    background-color: #000a14;
    text-shadow: 0 0 .35cqmin #000a14, 0 0 .35cqmin #000a14;
    border-radius: .35cqmin;
    box-shadow: 0 0 0 #088;
}
@keyframes futuristic-bg-flash {
    50% { background-color: #088; box-shadow: 0 0 .5cqmin #088; }
}

/* ===== PAPER THEME ===== */
@font-face {
  font-family: 'Syne Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/synemono/v16/K2FzfZNHj_FHBmRbFvHDK6qlPys.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Syne Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/synemono/v16/K2FzfZNHj_FHBmRbFvHDJaql.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

#game-container.paper {
    font-family: 'Syne Mono', 'Courier New', 'Runa Mono', monospace;
    color: #3e2723;
    scrollbar-color: #8b4513 #deb887;
    position: relative;
}

#game-container.paper:fullscreen {
    background: linear-gradient(45deg, #f4e4bc 0%, #e8d5b7 100%);
}

#game-container.paper #room-display,
#game-container.paper #room-display-overlay,
#game-container.paper #menu-display,
#game-container.paper #history {
    border: .3cqmin double #654321;
    background: linear-gradient(135deg, #f0e6b2 0%, #f5ebbe 100%);
    box-shadow:
        inset 0 0 4cqmin rgba(140, 100, 60, 0.3),
        0 0 1.5cqmin rgba(100, 60, 30, 0.4);
    border-radius: 1cqmin;
}

#game-container.paper .menu-settings.web-style {
    padding: 1.7cqmin 2.7cqmin;
    background: #f0f0f0;
    border: .3cqmin double #654321;
    border-radius: 1cqmin;
    box-shadow:
        0 0 4cqmin rgba(140, 100, 60, 0.3),
        inset 0 0 1.5cqmin rgba(100, 60, 30, 0.4);
}

#game-container.paper #room-image img, #game-container.paper #menu-banner img {
    border: .2cqmin solid #654321;
    border-radius: .5cqmin;
    box-shadow: 0 0 2cqmin rgba(100, 60, 30, 0.3);
    filter: sepia(.3);
}

#game-container.paper #inventory
{
    z-index: 0;
}
#game-container.paper #inventory h3 {
    border: .2cqmin solid #654321;
    border-bottom: 0 none;
    color: #8b4513;
    background: #f5f0dc;
    text-shadow: 0 .2cqmin .4cqmin rgba(0, 0, 0, 0.1);
    border-top-left-radius: .5cqmin;
    border-top-right-radius: .5cqmin;
    position: relative;
    &::before
    {
        content: '';
        position: absolute;
        inset: 0;
        box-shadow: 0 0 1cqmin #c8a06480;
        border-top-left-radius: .5cqmin;
        border-top-right-radius: .5cqmin;
        /*background-color: #c8a06480;
        filter: blur(.5cqmin);*/
        z-index: -5;
    }
}
#game-container.paper #inventory #status-display {
    border-bottom: .2cqmin solid #654321;
    color: #8b4513;
}

#game-container.paper #inventory #inventory-list {
    border: .2cqmin solid #654321;
    border-top: 0 none;
    background: #f5f0dc;
    color: #3e2723;
    border-bottom-left-radius: .5cqmin;
    border-bottom-right-radius: .5cqmin;
    box-shadow: 0 0 1cqmin #c8a06480;
    z-index: -1;
}

#game-container.paper #command-buttons button {
    background: linear-gradient(135deg, #f5ebbe 0%, #f0e6b4 100%);
    border: 0.2cqmin solid #654321;
    color: #8b4513;
    border-radius: 0.5cqmin;
    box-shadow: 0 0 1cqmin rgba(100, 60, 30, 0.2);
    text-shadow: 0 .2cqmin .4cqmin rgba(0, 0, 0, 0.1);
}

#game-container.paper #command-buttons button:hover {
    background: linear-gradient(135deg, #f4c430 0%, #daa520 100%);
    color: #3e2723;
}

#game-container.paper #command-input {
    background: #f5f0dc;
    border-color: #654321;
    border-right: 0 none;
    color: #3e2723;
    border-radius: 0;
    box-shadow: inset 0 .2cqmin .6cqmin rgba(100, 60, 30, 0.2);
    border-top-left-radius: .5cqmin;
    border-bottom-left-radius: .5cqmin;
}

#game-container.paper #input-container:focus-within,
#game-container.paper #input-container:hover {
    box-shadow: 0 0 1cqmin rgba(200, 160, 100, 0.5);
    border-radius: .5cqmin;
}

#game-container.paper #command-input:focus {
    outline: none;
}

#game-container.paper button {
    background: linear-gradient(135deg, #daa520 0%, #b8860b 100%);
    color: #3e2723;
    border: .2cqmin solid #654321;
    border-radius: .5cqmin;
}
#game-container.paper button#play-button {
    box-shadow: 0 .4cqmin 1cqmin rgba(100, 60, 30, 0.3);
    text-shadow: 0 .2cqmin .2cqmin rgba(0, 0, 0, 0.2);
}
#game-container.paper button#submit-button
{
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

#game-container.paper button:hover {
    background: linear-gradient(135deg, #f4c430 0%, #daa520 100%);
}

#game-container.paper #adventure-title {
    color: #8b4513;
    text-shadow: .2cqmin .2cqmin .4cqmin rgba(0, 0, 0, 0.3);
    font-family: inherit;
    font-weight: bold;
}

#game-container.paper .clickable {
    color: #8b4513;
    text-decoration: underline solid;
}

#game-container.paper .clickable:hover {
    color: #daa520;
}

#game-container.paper .icon-take:after, #game-container.paper .icon-drop:after,
#game-container.paper .icon-view:after, #game-container.paper .icon-work:after,
#game-container.paper .icon-talk:after {
    filter: invert(26%) sepia(99%) saturate(528%) hue-rotate(346deg) brightness(96%) contrast(95%);
}
#game-container.paper .icon-take:hover:after, #game-container.paper .icon-drop:hover:after,
#game-container.paper .icon-view:hover:after, #game-container.paper .icon-work:hover:after,
#game-container.paper .icon-talk:hover:after {
    filter: brightness(0) saturate(100%) invert(11%) sepia(7%) saturate(4119%) hue-rotate(321deg) brightness(97%) contrast(85%);
}
#game-container.paper .icon-take:hover:before, #game-container.paper .icon-drop:hover:before,
#game-container.paper .icon-view:hover:before, #game-container.paper .icon-work:hover:before,
#game-container.paper .icon-talk:hover:before {
    background: linear-gradient(135deg, #f4c430 0%, #daa520 100%);
    border-color: #3e2723;
    border-radius: .5cqmin;
}

#game-container.paper .speech {
    color: #ba7543;
    font-style: italic;
    text-shadow: 0 .2cqmin .4cqmin rgba(100, 60, 30, 0.2);
}
#game-container.paper .speech .clickable {
    color: #8b4513;
}
#game-container.paper .speech .clickable:hover {
    color: #daa520;
}

#game-container.paper #history .command-input {
    background: linear-gradient(90deg, rgba(200, 180, 140, 0.3) 0%, rgba(150, 130, 100, 0.2) 100%);
    border-left: 0.3cqmin double #654321;
    font-style: italic;
    color: #5d4e37;
}

/* Styling for highlights in history */
#game-container.paper .room-description-element.room-description-highlight {
    animation: paper-bg-flash .66s ease-in-out 3 both;
    background-color: transparent;
    text-shadow: 0 0 .35cqmin #f0e6b4, 0 0 .35cqmin #f0e6b4;
    border-radius: .35cqmin;
    box-shadow: 0 0 0 #daa520;
}
@keyframes paper-bg-flash {
    50% { background-color: #daa520; box-shadow: 0 0 .5cqmin #daa520; }
}