@import"https://fonts.googleapis.com/css2?family=Indie+Flower&family=Inter:wght@400;700&display=swap";:root{--bg-ocean: #F0F8FF;--primary-deep: #2E5A88;--card-white: #FFFFFF;--sticky-yellow: #FFF9C4;--text-main: #2E5A88;--text-soft: #5C7A99;--accent-blue: #03a9f4;--accent-red: #ef5350;--doodle-border: #2E5A88;--pt-word-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif;--example-font: Avenir, "Avenir Next", "Century Gothic", sans-serif;--chinese-font: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;--handwriting-font: var(--pt-word-font);--safe-top: env(safe-area-inset-top, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px)}*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}html,body{height:100%;overscroll-behavior:none}body{background-color:var(--bg-ocean);color:var(--text-main);font-family:var(--chinese-font);min-height:100dvh;display:flex;justify-content:center;overflow-x:hidden}#root{width:100%;max-width:480px;background-color:var(--bg-ocean);min-height:100dvh;position:relative;display:flex;flex-direction:column;padding-top:var(--safe-top)}.sticky-note{background:var(--card-white);border:2px solid var(--doodle-border);border-radius:2px;box-shadow:2px 5px 15px #0000000d;position:relative}.sticky-note:after{content:"";position:absolute;inset:0;border:2px solid var(--doodle-border);border-radius:255px 15px 225px/15px 225px 15px 255px;pointer-events:none}.handwritten{font-family:var(--handwriting-font)}.level-selector{display:flex;justify-content:center;gap:8px;padding:12px 0}.level-btn{width:36px;height:36px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.85rem;cursor:pointer;position:relative;transition:color .3s}.level-btn.active{color:var(--primary-deep)}.level-btn.active:before{content:"";position:absolute;width:44px;height:44px;border:2px solid var(--primary-deep);border-radius:48% 52% 56% 44%/45% 55%;animation:ink-draw .5s ease-out forwards}@keyframes ink-draw{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}.sailing-progress{position:relative;height:40px;margin:14px 24px 2px;display:flex;align-items:center}.wave-line{position:absolute;width:100%;height:4px;background:var(--primary-deep);border-radius:2px;opacity:.6}.wave-line:before{content:"";position:absolute;width:100%;height:20px;background:url("data:image/svg+xml,%3Csvg width='200' height='20' viewBox='0 0 200 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 15 C 20 15, 30 5, 50 5 C 70 5, 80 15, 100 15 C 120 15, 130 5, 150 5 C 170 5, 180 15, 200 15' stroke='%232E5A88' fill='transparent' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M10 18 C 30 18, 40 10, 60 10 C 80 10, 90 18, 110 18 C 130 18, 140 10, 160 10 C 180 10, 190 18, 210 18' stroke='%232E5A88' fill='transparent' stroke-width='1' stroke-dasharray='4 2' opacity='0.4'/%3E%3C/svg%3E");background-repeat:repeat-x;top:-12px}.boat-icon{z-index:2}.boat-icon-inner{transform:translateY(-28px);animation:bobbing 3s ease-in-out infinite;display:flex}@keyframes bobbing{0%,to{transform:translateY(-28px) rotate(0)}25%{transform:translateY(-30px) rotate(-2deg)}75%{transform:translateY(-26px) rotate(2deg)}}.quiz-container{padding:0 16px;flex:1}.tab-bar{position:fixed;bottom:0;left:50%;transform:translate(-50%);width:100%;max-width:480px;padding-bottom:max(var(--safe-bottom),8px);background:#fff;display:flex;justify-content:space-around;align-items:center;border-top:1px solid #e0e0e0;z-index:100;min-height:60px}.tab-item{display:flex;flex-direction:column;align-items:center;color:var(--text-soft);cursor:pointer;font-size:.75rem;transition:color .2s;padding:8px 16px}.tab-item.active{color:var(--primary-deep)}.tab-icon{margin-bottom:4px}main{padding-bottom:calc(75px + var(--safe-bottom))}.detail-overlay{position:fixed;inset:0;background:#2e5a881a;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:200;padding:16px}.detail-modal{width:100%;max-width:400px;max-height:85dvh;overflow-y:auto;background:#fff;border:2px solid var(--primary-deep);border-radius:12px;padding:32px;position:relative;box-shadow:0 10px 40px #0000001a}.close-btn{position:absolute;top:16px;right:16px;background:none;border:none;cursor:pointer;color:var(--text-soft)}.option-btn{width:100%;padding:14px 16px;margin-bottom:10px;text-align:left;background:#fff;border:2px solid var(--doodle-border);border-radius:4px;color:#1a1a1a!important;font-size:1rem;cursor:pointer;transition:transform .35s cubic-bezier(.34,1.56,.64,1),background .1s;position:relative;display:flex;align-items:center;gap:12px;word-break:break-word;-webkit-user-select:none;user-select:none}.option-btn:active{transform:scale(.93)}.option-btn:after{content:"";position:absolute;inset:0;border:1px solid var(--doodle-border);border-radius:255px 15px 225px/15px 225px 15px 255px;pointer-events:none}.option-btn:hover{background:var(--bg-ocean)}.option-btn.correct{background:#e8f5e9;border-color:#4caf50;color:#2e7d32!important}.option-btn.wrong{background:#ffebee;border-color:#ef5350;color:#c62828!important}.action-bar{display:flex;gap:16px;margin-top:24px}.action-btn{flex:1;padding:12px;border:1.5px solid var(--primary-deep);border-radius:8px;background:transparent;color:var(--primary-deep)!important;display:flex;align-items:center;justify-content:center;gap:8px;font-weight:700;cursor:pointer;transition:transform .3s cubic-bezier(.34,1.56,.64,1),background .2s;font-size:.95rem;-webkit-user-select:none;user-select:none}.action-btn:active{transform:scale(.93)}.action-btn.active{background:var(--primary-deep);color:#fff!important}.priberam-trigger{transition:transform .2s ease,opacity .2s ease}.priberam-trigger:hover{transform:scale(1.1);opacity:.8}.example-text{font-family:var(--example-font)}.exam-input-row{display:flex;gap:8px;position:sticky;bottom:0;background:#fff;padding:8px 0 4px}.animate-fade{animation:fade-in .25s ease-out}@keyframes fade-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@media(max-height:668px){.level-selector{padding:8px 0;gap:6px}.sailing-progress{margin:4px 24px;height:36px}.sticky-note h1{font-size:2.4rem!important}.option-btn{padding:11px 14px;font-size:.95rem}}@media(min-width:400px){.tab-item{font-size:.8rem}.option-btn{font-size:1.05rem}}
