@import url('https://itproger.com/css/main-font.css');
/* Reset & layout */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family:Montserrat,sans-serif;
font-weight:300;

display: flex; height: 100vh; background: #ecf0f1; }
#sidebar { width: 260px; background: #2c3e50; color: #ecf0f1; padding: 20px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #1abc9c #34495e; }
#sidebar::-webkit-scrollbar { width: 8px; }
#sidebar::-webkit-scrollbar-track { background: #34495e; border-radius: 4px; }
#sidebar::-webkit-scrollbar-thumb { background: #1abc9c; border-radius: 4px; }
.back-button, .set-button { display: block; text-decoration: none; width: 100%; margin-bottom: 12px; padding: 12px; background: #34495e; border: none; color: #ecf0f1; font-size: 1em; text-align: left; border-radius: 6px; cursor: pointer; transition: background .3s, transform .2s; position: relative; }
.back-button:hover, .set-button:hover { background: #3d566e; transform: translateX(4px); }
.set-button.active { background: #1abc9c; }
.set-button .check-icon { margin-left: 8px; color: #ffffff; }
#sidebar h3 { font-size: 1.2em; margin: 20px 0 10px; display: flex; align-items: center; }
#sidebar h3 i { margin-right: 8px; }
#main { flex: 1; display: flex; flex-direction: column; padding: 24px; }
#main h1 {margin-top: 10px; margin-bottom: 20px}
#instructions { background: #f1c40f; color: #2c3e50; padding: 16px; border-radius: 6px; margin-bottom: 20px; font-size: 1.1em; display: flex; align-items: center; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
#needSubs { background: #f1c40f; color: #6a5707; padding: 16px; border-radius: 6px; margin-bottom: 20px; font-size: 1.1em; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
#needSubs a { color: #574c1e }
#needSubs a:hover { text-decoration: none }
#instructions i { margin-right: 12px; font-size: 1.2em; }
#game { flex: 1; display: flex; }
#terms-container, #defs-container { flex: 1; display: flex; flex-direction: column; align-items: center; overflow-y: auto; }
#terms-container { margin-right: 24px; }
#defs-container { margin-left: 24px; }
.column-title { font-size: 1.2em; margin-bottom: 12px; color: #333; }
.term, .definition { width: 90%; margin: 10px 0; padding: 16px; border: 0px solid #ccc; border-radius: 10px; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.1); transition: transform .2s, background .2s, border-color .2s, box-shadow .2s; user-select: none; }
.term { cursor: grab; background: #3498db; color: #fff; font-weight: 500; display: flex; align-items: center; -webkit-user-drag: element; }
.term i { margin-right: 10px; }
.term:hover { transform: translateY(-4px); box-shadow: 0 4px 8px rgba(0,0,0,0.15); }
.term:active { cursor: grabbing; transform: scale(0.95); }
.definition { background: #fff; min-height: 60px; display: flex; align-items: center; justify-content: start; }
.definition.over { animation: pulse 0.6s ease-in-out infinite; }
@keyframes pulse { 0%,100%{ box-shadow:0 0 0 rgba(0,123,255,0.5); } 50%{ box-shadow:0 0 12px rgba(0,123,255,0.8); } }
.matched { animation: pop 0.4s ease; background: #e6f4ea!important; border-color: #28a745!important; color: #28a745!important; }
@keyframes pop { 0%{ transform: scale(0.8); } 50%{ transform: scale(1.02); } 100%{ transform: scale(1); } }
@keyframes shake { 0%,100%{ transform:translateX(0); } 25%{ transform:translateX(-4px); } 75%{ transform:translateX(4px); } }
@keyframes flash { 0%,100%{ background:#fff; } 50%{ background:#fdecea; } }
.wrong { animation: shake 0.3s ease, flash 0.3s ease; }
#toast { position: fixed; top: 20px; right: 20px; background: rgba(0,0,0,0.8); color: #fff; padding: 14px 24px; border-radius: 6px; font-size: 1em; opacity: 0; pointer-events: none; transform: translateX(100%); transition: opacity .3s, transform .3s; }
#toast.show { opacity: 1; transform: translateX(0); }
.fa-check-circle {margin-right: 5px}

.mobile_hint {display: none}

@media(max-width: 940px) {
    #game {flex-direction: column; flex: 0}
    #terms-container, #defs-container {margin: 0}
    #defs-container {margin-bottom: 50px; margin-top: 30px}
    .mobile_hint {display: block}
    .pc_hint {display: none}
    #terms-container, #defs-container {display: block; flex: initial}
    .term, .definition {width: 100%}
}

@media(max-width: 640px) {
    body {flex-direction: column;}
    #sidebar {width: 100%; border-bottom: 7px solid #202f3f; min-height: 300px;}
}